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

  

posted @ 2019-07-17 17:39  我是格鲁特  阅读(1857)  评论(0)    收藏  举报