JS事件 (事件流,事件监听,事件委托)

527 阅读2分钟

事件

概念 :用户或浏览器自身执行的某种动作。

事件流

事件按照事件流(从页面中接收事件的顺序)可以分为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);