事件概述
- 在 JS 程序设计中，当文档、浏览器、元素与之相关的对象发生交互活动时，Web 浏览器就会产生事件
- 事件类型（
event type）：指用来说明发生了什么类型事件的字符串，如mouseenter、mouseleave等 - 事件目标（
event target）：指发生的事件与之相关的对象，最常见的如Window、Document和Element - 事件处理程序（
event handler）或事件监听程序（event listener）：指处理或响应事件的函数 - 事件对象（
event object）：指与特定事件相关且包含有关该事件详细信息的对象，所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性 - 事件传播（
event propagation）：是浏览器决定哪个对象触发其事件处理程序的过程，有事件冒泡（bubble）和事件捕获（capturing）两种形式
- 事件类型（
事件传播
-
IE事件冒泡：指从事件目标节点逐级的往上层节点传递，冒泡到document对象 -
Netscape事件捕获：从document对象到目标节点，例如当点击<div>元素时，按照document-<html>-<body>-<div>的顺序传递 -
DOM2(W3C标准)事件传播的三个阶段- 捕获阶段，事件从顶层节点逐级往下层传递，接着到达目标节点
- 处于目标阶段
- 然后事件又从目标节点逐级往上层节点传递，这部分叫做事件冒泡
事件代理
- 按《JavaScript高级程序设计》所讲，事件委托利用了事件冒泡，只指定一个事件处理程序就可以管理某一类型的所有事件。通过减少
DOM访问次数，达到提高内存利用率，性能提升的目的。<ul id="job"> <li>牙医</li> <li>律师</li> <li>警察</li> </ul> <script> //for循环遍历li，增加了DOM访问次数 window.onload = function(){ var aLi = document.querySelectorAll('#job li'); for(var i=0; i<aLi.length; i++){ aLi[i].onclick = function(e){ if(e.target.tagName.toLowerCase() == 'li'){ console.log(e.target.innerText); } } } } //绑定父级元素，利用冒泡进行事件代理 window.onload = function(){ var ulNode = document.getElementById("job"); ulNode.onclick = function(e){ if(e.target.tagName.toLowerCase() == 'li'){ console.log(e.target.innerText); } } } </script> - 无事件代理时，对新增的子元素处理时要调用先前函数；而事件代理对新增的子元素同样会进行处理
网友评论