您当前位置: 南顺网络>> 官方资讯>> 建站知识

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); }


编辑:--ns868