事件
概念 :用户或浏览器自身执行的某种动作。
事件流
事件按照事件流(从页面中接收事件的顺序)可以分为IE团队提出的事件冒泡,Natescape团队提出的事件捕获,和把它们综合起来的DOM2级事件。
1. 事件冒泡:
指事件最开始是由最具体的元素接收,然后逐级向上传播到不具体的节点(文档)。
比如: <div> --> <body> --> <html> --> document
2. 事件捕获:
指事件最开始是由不具体的节点(文档)接收,然后逐级向下传播到最具体的元素。
比如: document --> <html> --> <body> --> <div>
3. DOM事件流:
包含三个阶段:事件捕获阶段,处于事件阶段,和事件冒泡阶段。
事件发生的顺序: 按照W3C的标准,先发生捕获事件,后发生冒泡事件。如果一个元素已经执行了有两个同样的事件,但一个是捕获,一个是冒泡,只执行捕获事件。
father.addEventListener('click', function(){ console.log('father捕获') }, true);
father.addEventListener('click', function(){ console.log('father冒泡') }, false);
son.addEventListener('click', function(){ console.log('son捕获') }, true);
son.addEventListener('click', function(){ console.log('son冒泡') }, false);
输出顺序:father捕获->son捕获->son冒泡->father冒泡
事件处理程序/事件监听
概念:响应某个事件的函数叫做事件处理程序(事件监听器)。可以分为4类:HTML事件处理程序,DOM0级事件处理程序,DOM2级事件处理程序,和IE事件处理程序。
HTML事件处理程序:
<input type="button" value="Click Me" onclick="alert('Clicked!')" />
<input type="button" value="Click Me" onclick="showMessage()" />
DOM0级事件处理程序:
var btn = document.getElementById("button");
btn.onclick = function() {alert(this.id)}
btn.onclick = null;
DOM2级事件处理程序:
var btn = document.getElementById("button");
btn.addEventListener("click", function() {alert(this.id)}, false);
btn.removeEventListener("click", function() {alert(this.id)}, false);
//false是冒泡阶段调用事件处理程序、true是捕获阶段
IE事件处理程序:
var btn = document.getElementById("button");
btn.attachEvent("onclick", function() {alert("Clicked!")});
btn.detachEvent("onclick", function() {alert("Clicked!")});
事件对象
概念: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与对象有关的信息。
事件委托/事件代理
概念: 不在事件发生的直接DOM上设置监听函数,而在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型(使用target属性),来做出不同的响应。
使用原因/性能内存问题: 在JS中,添加到页面的事件处理程序数量会关系到页面的整体运行性能。两个方面:每个函数都是对象,会占用内存,内存中对象越多,性能越差;大量事件处理程序导致的DOM访问次数会延迟整个页面的交互就绪时间。
<ul id="name">
<li id="1">a</li>
</ul>
var ul = document.getElementById("name");
ul.addEventListener("click", function(event){
switch (event.target.id) {
case "1":
event.target.innerHTML = "aa";
break;
}
},false);