第十三章 事件
1、页面上单击某个按钮,单击事件不仅仅发生在按钮上,也单击了按钮的容器元素,甚至整个页面。
事件流描述的是从页面中接收事件的顺序。分事件冒泡和事件捕获。
事件冒泡即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收,然后逐级向上传播到较为不具体的节点(文档)
事件捕获则恰恰相反,由最上级节点最后传播到具体节点。
DOM事件流:三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会,然后是实际的目标接收到事件,最后一个阶段事件冒泡,可以在这个阶段对事件作出响应。
2、事件处理程序
响应某个事件的函数,如onclick、onload……
3、事件对象
在触发DOM的某个事件时会产生一个事件对象event,这个对象包含所有与事件有关的信息,包括导致事件的元素、事件的类型等等。
btn.onclick=function(event){
alert(event.type); //click
}
event对象包含与创建它的特定事件有关的属性和方法。
特别注意event.target是事件实际的目标。
ul.onclick=function(e){
ul.removeChild(e.target);
}
这个例子中target就是ul中的li(实际点击的目标)。
4、事件委托
由于事件冒泡,如果给所有可单击的元素都加上click等事件会造成页面的性能下降,我们可以指定一个母元素事件的处理程序,而不必给每个元素都加上事件。如ul中有很多个li需要点击触发事件,我们只需要给ul加上点击事件,然后e.target就可以找到实际点击的元素了。