JS事件快速回顾
事件绑定方法

- Html事件处理程序-直接在元素上指定事件及相应的处理程序,事件处理程序中可直接访问event对象(不需要用参数接收event独享),this指向当前元素,同时还扩展了this和document的作用域,即访问对象的属性或方法时可以省略this或document
- Dom0级事件处理程序-只支持冒泡阶段,同一事件如果指定多个处理程序,后面的会覆盖前面的。绑定非箭头函数时,内部this代表当前发生事件的元素。
- Dom2级事件处理程序-obj.addEventListener("click",func) 默认是冒泡阶段(将第三个参数为true则表示捕获阶段),可为同一元素指定多个事件处理程序。绑定非箭头函数时,内部this代表当前发生事件的元素。注意:IE8及之前使用attachEvent绑定事件处理程序,并且只支持冒泡阶段。
event对象及常用属性
- 标准浏览器通过事件处理程序的参数来获取,IE8及更低版本采用window.event来获取
- target和currentTarget的区别: target指向触发事件的元素,currentTarget指向事件绑定的元素,详情请看这篇
- event常用属性及方法的兼容性对比
|
行为 |
标准dom |
IE8及之前的浏览器 |
|
取消事件默认行为 |
e.preventDefault() |
e.returnValue=false |
|
阻止事件冒泡 |
e.stopPropagtion() |
e.cancelBubble=false |
|
获取事件目标 |
e.target |
e.srcElement |
注意:在事件处理函数中使用return false,并不能阻止事件冒泡,也不能取消事件默认行为。
事件执行是异步的吗?
事件触发是同步执行的,事件回调通常是异步执行的
当事件触发时会被事件线程捕获到,事件线程把事件处理程序放入到事件队列中,这一过程不会打断JS引擎线程的执行
自定义模拟事件
在 JavaScript 中,可以通过 Event 构造函数 或 CustomEvent 构造函数 来模拟(触发)事件。为了携带额外的参数或数据,可以使用 CustomEvent 来传递自定义数据。
- 使用
CustomEvent构造函数:CustomEvent允许你创建一个包含附加数据的自定义事件。 - 使用
dispatchEvent方法:通过这个方法将事件派发(触发)到指定的目标(通常是 DOM 元素)。
// 创建一个包含数据的自定义事件
const customEvent = new CustomEvent('myCustomEvent', {
detail: {
userId: 12345,
userName: 'JohnDoe'
}
});
// 选择一个 DOM 元素
const button = document.querySelector('button');
// 为元素添加事件监听器
button.addEventListener('myCustomEvent', function(event) {
// 访问事件携带的数据
console.log('User ID:', event.detail.userId); // 12345
console.log('User Name:', event.detail.userName); // JohnDoe
});
// 触发自定义事件
button.dispatchEvent(customEvent);

浙公网安备 33010602011771号