1. 事件是什么
DOM事件即为Event对象。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
JavaScript的事件机制也是一个标准的观察者模式(Observer Pattern)的应用,包含事件的订阅者(Subscriber)和事件发布者(Publisher),通过监听对象事件来执行事件处理程序(callback)。
通常事件与函数结合使用,函数不会在事件发生前被执行。
2. 事件绑定
要让javascript对用户做出相应,首先要对 DOM 元素绑定事件处理函数。javascript一共有三种方式可以为DOM元素注册事件处理函数。
通过HTML 属性
通过DOM 元素属性(DOM level 0 事件)
< button id='event'>Event
< script>
var button = document.querySelector('#event')
button.onclick=function(){
console.log("Hello world!")
}
< /script>
通过EventTarget.addEventListener(DOM level 2 事件)
< button id='event'>Event
< script>
var myButton = document.getElementById('event')
myButton.addEventListener('click', function(){
console.log('Hello world');
}, false);
< /script>
在javascript中,后两种方法(DOM level 0 事件和DOM level 2 事件)为最常见的绑定事件方法。其中DOM level 0 事件绑定只能添加一个,添加多个则后面会覆盖前面。而DOM level 2 事件绑定可以添加多个事件。
3. 事件阶段
一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。
![](http://img.e-com-net.com/image/info10/206a502231f341b5a56a6c2da081de4f.jpg)
捕获阶段(capture phase)
事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。
目标阶段(target phase)
当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。
冒泡阶段(bubble phase)
事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。
ie默认支持事件冒泡阶段执行,其它浏览器默认支持事件捕获阶段执行。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行,默认值为false。(永远不要用true)
button.addEventListener('click', fn, true) // 捕获阶段执行(永远不用)
button.addEventListener('click', fn, false) // 冒泡阶段执行(默认)
4. 事件委托
在处理传统事件时,你按照需要为每一个元素添加事件监听器(如对多个
为了解决这个问题,JavaScript事件代理可以把事件处理器添加到一个父元素上,这样就避免了把事件处理器添加到多个子元素上。
li{
border: 1px solid black;
}
ul{
background-color: red;
padding: 20px;
}
- iPhone
- iPad
- Macbook
- iPod
var parent = document.querySelector('ul')
parent.addEventListener('click',function(e){
var el = e.target
//console.log(e.target)
while(el.tagName !== 'LI'){
if(el === parent){
el = null
break
}
el = el.parentNode
console.log(el)
}
if(el){
console.log(el.innerText)
}else{
console.log('未命中')
}
})
利用事件委托点击
- 则输出‘未命中’。
原文引用自:
链接:https://www.jianshu.com/p/0d3d13ab5505