事件代理或者事件委托的含义等同于事件冒泡。
事件捕获方式(描述事件触发时序问题)有三种:
(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。
(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法
两个应用:
1.事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
- 111
- 222
- 333
- 444
window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function(){ alert(123); } }
为保证等同于在每个li添加的函数 window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ alert(123); alert(target.innerHTML); } } } 这样写优点:1.性能更优,内存占用更少,运行速度更快;2.在动态再添加一个节点时,方法同样能作用在该节点 2.让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情
<
div
id="parent">
<
div
id="child" class="child"></
div
>
</
div
>
document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发,"+this.id); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发,"+this.id) }) 运行结果:child事件被触发,child parent事件被触发,parent 补充: 阻止事件冒泡:e.stopPropagation() 以下事件不冒泡:blur、focus、load、unload