DOM 常见问题分享
dom 事件模型
DOM 之事件模型分脚本模型、内联模型（同类一个，后者覆盖）、动态绑定（同类多个）
<body>
<!--行内绑定：脚本模型-->
<button onclick="javascrpt:alert('Hello')">Hello1</button>
<!--内联模型-->
<button onclick="showHello()">Hello2</button>
<!--动态绑定-->
<button>Hello3</button>
</body>
<script>
/*DOM0：同一个元素，同类事件只能添加一个，如果添加多个，
* 后面添加的会覆盖之前添加的*/
function shoeHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello");
}
/*DOM2:可以给同一个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("hello1");
});
btn3.addEventListener("click",function () {
alert("hello2");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
})
}
</script>冒泡解释：当点击一个元素触发事件时，事件会先从元素的最外层父元素一层一层进入到触发的元素，然后在从触发元素一层一层返回到最外层父元素，从最外层一层一层进入的阶段叫事件捕获阶段，从最里层一层一层往外的阶段叫事件冒泡。
移动端触摸事件
- touchstart：当手指触碰到屏幕的时候触发
- touchmove：当手指在屏幕上滑动的时候触发
- touchend：当手指离开屏幕的时候时候触发
- touchcancel 事件：当系统停止跟踪触摸的时候触发（这个事件很少会用，一般不做深入研究）。
电话接入或者弹出信息等其他事件切入 event：
- touches：表示当前跟踪的触摸操作的touch对象的数组。
- targetTouches：特定于事件目标的Touch对象的数组。
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个 touch 对象包含的属性
- clientX：触摸目标在视口中的x坐标。
- clientY：触摸目标在视口中的y坐标。
- identifier：标识触摸的唯一 ID。
- pageX：触摸目标在页面中的x坐标。
- pageY：触摸目标在页面中的y坐标。
- screenX：触摸目标在屏幕中的x坐标。
- screenY：触摸目标在屏幕中的y坐标。
- target：触目的 DOM 节点目标。
事件委托
参考定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
好处：给重复的节点添加相同操作，减少 dom 交互，提高性能
实现思路：给父组件添加事件，通过事件冒泡，排查元素是否为指定元素，并进行系列操作
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论