js 事件 码农

一、EventTarget 接口
事件是程序各个组成部分之间的一种通信方式，DOM 节点的事件操作（监听和触发），都定义在EventTarget接口
addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件

useCapture：布尔值，如果设为true，表示监听函数将在捕获阶段（capture）触发（参见后文《事件的传播》部分）。该参数可选，默认值为false（监听函数只在冒泡阶段被触发）。

二、事件的传播

1:捕获阶段(capture phase)
2:目标阶段(target phase)
3:冒泡阶段(bubbling phase)

<div>
<p>click</p>
</div>

<script>
var phases = {
1: 'capture',
2: 'target',
3: 'bubble'
};

var div = document.querySelector('div');
var p = document.querySelector('p');


div.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, true);
p.addEventListener('click', callback, false);

 


function callback(event) {
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];

console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'. event.eventPhase:"+event.eventPhase);
}

</script>

　　

Tag: 'DIV'. EventPhase: 'capture'. event.eventPhase:1
Tag: 'P'. EventPhase: 'target'. event.eventPhase:2
Tag: 'DIV'. EventPhase: 'bubble'. event.eventPhase:3

三、事件的代理
事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});

// 事件传播到 p 元素后，就不再向下传播了

p.addEventListener('click', function (event) {
event.stopPropagation();
// event.stopImmediatePropagation();//彻底取消该事件,不再触发后面所有click的监听函数
}, true);

四、Event 对象
event = new Event(type, options);
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡

var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);

var click = new Event('click');
p.dispatchEvent(click);

Event.target:原始触发节点
Event.currentTarget:当前正在通过的节点, 等同于监听函数内部的this

Event.type:返回一个字符串，表示事件类型

Event.preventDefault:方法取消浏览器对当前事件的默认行为

event.stopPropagation()：方法阻止事件在 DOM 中继续传播