浅谈JavaScript--事件委托与事件监听

事件监听

该方法用于向指定元素添加事件句柄（代码块），且不会覆盖已存在的事件句柄。

即可以向同一个元素添加同一个事件多次。

添加事件

语法：
element.addEventListener(event,function,useCapture);

event:事件的类型。如'click','mousedown'等。谷歌浏览器下不用加'on'前缀。
function:事件触发时调用的函数。
useCapture：布尔类型，用于描述事件时冒泡还是捕获，可选。默认false，即冒泡传递。

<div id="box"></div>

<script>
var box = document.getElementById('box');
box.onclick = function() {
    alert('box');
}
box.onclick = function() {
    alert('box2!');
}
</script>

此时后面的事件会覆盖前面的事件，即点击box时只弹出'box2!'

事件监听写法：

<div id="box"></div>

<script>
var box = document.getElementById('box');
box.addEventListener('click', function() {
    alert('box');
})
box.addEventListener('click', function() {
    alert('box2');
})
</script>

此时即点击box，先弹出'box'，接着弹出'box2!'。

移除事件

语法：
element.removeEventListener(event,functionName);

移除由addEventListener()方法添加的事件，移除与添加的必须为同一个函数。

兼容性

扫描二维码关注公众号，回复： 1739185 查看本文章

在ie8及更早版本不支持以上方法

请使用：

element.attachEvent(event,function);        //添加
element.detachEvent(event,function);        //删除

注意给事件加'on'前缀。

跨浏览器解决方案

function addEventListener(obj,eve,fun){
    if(obj.addEventListener){
        obj.addEventListener(eve,fun);
    }else if(obj.attachEvent){
        eve="on"+eve;
        obj.attachEvent(eve,fun);
    }else{
        obj['on'+eve]=fun;
    }
}

事件委托

情景：前期绑定了事件，后期有添加了节点，而新添加的节点却没有相应的事件。用事件委托解决。

通常事件是直接添加在触发的元素上，事件委托则是吧事件委托给该元素的父级。

原理：利用冒泡原理，把事件添加到父级上，触发执行效果。

<div id="box">
    <p>我是原来的节点1</p>
    <p>我是原来的节点2</p>
</div>

<script>
var box = document.getElementById('box');
var p = document.getElementsByTagName('p');

var child3 = document.createElement('p');
child3.innerHTML = '我是新添加的节点3';
box.appendChild(child3);

for (var i = 0; i < p.length; i++) {
    p[i].onclick = function() {
        console.log(this.innerHTML)
    }
}

var child4 = document.createElement('p');
child4.innerHTML = '我是新添加的节点4';
box.appendChild(child4);
</script>

此时点击box下的所有p元素，前3个都可以获取到innerHTML，第4个却不能

用事件委托的方法去写：

<div id="box">
    <p>我是原来的节点1</p>
    <p>我是原来的节点2</p>
</div>

<script>
var box = document.getElementById('box');
var p = document.getElementsByTagName('p');

var child3 = document.createElement('p');
child3.innerHTML = '我是新添加的节点3';
box.appendChild(child3);
//----------------区别分割线----------------------------
box.onclick = function(e) {             //委托给父级
    var e = e || window.event;          //兼容处理
    var target = e.target || e.srcElement;      //兼容处理
    if (target.nodeName.toLowerCase() == 'p') {     //触发事件的目标节点
        console.log(target.innerHTML);
    }
}
//----------------区别结束------------------------------
var child4 = document.createElement('p');
child4.innerHTML = '我是新添加的节点4';
box.appendChild(child4);
</script>

此时点击box下的所有p元素，都可以获取到innerHTML。

上述方法中target返回事件的目标节点，即本应触发该事件的节点。需要做兼容处理