事件（事件委托的原理）

1. 事件监听

（1）可以同时绑定多个事件，并且具有多个事件处理函数。

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
    console.log('你终于点中了我...');
},false);

addEventListener() 方法还可以为指定一个元素绑定一个事件同时具有多个处理函数。

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
    console.log('你终于点中了我...');
},false);
btn.addEventListener('click',function(){
    console.log('你终于又点中了我...');
},false);

（2）监听器的兼容方案（由于addEventListener和attachEvent中的this指代不同，兼容方案可优化）

function bind(elem, event, callback){
    // 判断是否存在 addEventListener
    if (elem.addEventListener){
        elem.addEventListener(event, callback, false);
    }else{
        elem.attachEvent('on' + event, callback);
    }
}

2. 事件对象（event）

这个事件对象会返回关于该事件的信息，以及该事件绑定在哪个元素中。

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

（1）兼容的事件对象

event = event || window.event;

（2）事件的目标元素（event.target）

Event 事件对象提供了 target 属性用于获取触发事件的目标元素（标签）。

(3)阻止默认行为

if (event.preventDefault){
    event.preventDefault();
}else{
    event.returnValue = false;
}

（4）获取鼠标坐标

3. 事件周期

捕获

触发

冒泡(我们可以看到事件会从最底层节点向上传播。如果只想触发当前节点的事件，而不继续向上冒泡，我们可以通过 Event 事件对象提供的属性来完成)

if (event.stopPropagation){
    event.stopPropagation();
}else{
    event.cancelBubble = true;
}

4. 事件委托（新添加的不起作用）（事件冒泡的原理）

这种将事件绑定其祖先元素的方式，我们可以称之为事件委托。

事件（事件委托的原理）

猜你喜欢