JS 事件类型即模拟事件-原创手记-慕课网

JS事件模型

事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。

1. EventTarget接口

DOM的事件操作（监听和触发），都定义在EventTarget接口.Element节点、document节点和window对象，都部署了这个接口
XMLHttpRequest、AudioNode、AudioContext等浏览器内置对象，也部署了这个接口。

v该接口即三个方法

addEventListener：绑定事件的监听函数
target.addEventListener(type, listener[, useCapture]); //type:事件名称，大小写敏感 //listener:句柄 //useCapture:布尔值，捕获阶段为true，默认false
removeEventListener：移除事件的监听函数
div.removeEventListener('click', listener, false);
removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。
dispatchEvent：在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。参数是一个Event对象的实例,否则报错
target.dispatchEvent(event) para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event); ／／根据dispatchEvent方法的返回值，判断事件是否被取消了。 var canceled = !cb.dispatchEvent(event); if (canceled) { console.log('事件取消'); } else { console.log('事件未取消'); } }

监听函数，DOM提供三种方法，可以用来为事件绑定监听函数。

1. HTML标签的on-属性：注意，使用这种方法时，on-属性的值是将会执行的代码，而不是一个函数。

<body onload="doSomething()">

2. Element节点的事件属性 :使用这个方法指定的监听函数，只会在冒泡阶段触发。

window.onload = doSomething; div.onclick = function(event){ console.log('触发事件'); };

3. addEventListener方法

Element节点、document节点、window对象的addEventListener方法，也可以定义事件的监听函数。

4. this指向

addEventListener方法指定的监听函数，内部的this对象总是指向触发事件的那个节点。

`
// 以下写法的this对象都指向Element节点。
// JavaScript代码
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}

// HTML代码
<element onclick="console.log(this.id)">

//以下写法的this对象，都指向全局对象。
// JavaScript代码
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');

// HTML代码
<element onclick="doSomething()">
`

事件的传播

3.1 传播的三个阶段

第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）;第二阶段：在目标节点上触发，称为“目标阶段”（target phase）;第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）

3.2 事件的代理

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

ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
//如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。
p.addEventListener('click', function(event) {
event.stopPropagation();
});
`

Event对象

Event对象本身就是一个构造函数，可以用来生成新的实例。

event = new Event(typeArg, eventInit);//typeArg:string--event name, eventInit:object--config var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);

自定义事件和事件模拟

除了浏览器预定义的那些事件，用户还可以自定义事件，然后手动触发。

`
// 新建事件实例
var event = new Event('build');

// 添加监听函数
elem.addEventListener('build', function (e) { ... }, false);

// 触发事件
elem.dispatchEvent(event);
`

1.CustomEvent()

Event构造函数只能指定事件名，不能在事件上绑定数据。如果需要在触发事件的同时，传入指定的数据，需要使用CustomEvent构造函数生成自定义的事件对象

var event = new CustomEvent('build', { 'detail': 'hello' }); function eventHandler(e) { console.log(e.detail); }

2. 事件的模拟

有时，需要在脚本中模拟触发某种类型的事件，这时就必须使用这种事件的构造函数。

function simulateClick() { var event = new MouseEvent('click', { 'bubbles': true, 'cancelable': true }); var cb = document.getElementById('checkbox'); cb.dispatchEvent(event); }