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