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