js自定义事件和jQuery自定义事件

来源：互联网发布：淘宝上哪家药店信誉好编辑：程序博客网时间：2024/05/18 01:09

1.简述

js自定义事件是用来扩展DOM元素的行为的，可以让DOM元素监听自定义事件，并手动触发，更加灵活地实现一些操作。JQuery自定义事件使用场景更加广泛一些，不仅限于DOM监听自定义事件，可以任意自定义事件并随时触发。用于实现观察者模式，为大型项目解耦非常方便。

2.js自定义事件，js可以让一个DOM元素和一个自定义事件绑定，当DOM元素触发这个事件时，会执行相应的响应函数。示例代码如下

// 获取一个DOM元素var dom = document.getElementById('myDiv');// 创建一个js自定义事件var evt = document.createEvent('HTMLEvents');// 初始化这个自定义事件（给它起个名字）evt.initEvent('myEvent1', true, true);// 让DOM元素监听这个事件dom.addEventListener('myEvent1', function (e, data) {console.log('1')});// DOM元素触发事件 myEvent1dom.dispatchEvent(evt); // 1

值得注意的是，一个自定义事件只能初始化一次，即只能拥有一个名字，如果初始化多次，则以最后一次为准

var dom = document.getElementById('myDiv');var evt = document.createEvent('HTMLEvents');evt.initEvent('myEvent1', true, true);evt.initEvent('myEvent2', true, true);dom.addEventListener('myEvent1', function (e, data) {console.log('1')});dom.addEventListener('myEvent2', function (e, data) {console.log('2')});dom.dispatchEvent(evt); // 2

3.jQuery自定义事件，jQuery自定义事件是通过jQuery对象的自定义相关方法（on、one、trigger等）实现的，示例如下：

// 创建一个jQuery自定义事件对象var eventEmitter = $({});// 监听事件 myEvent1eventEmitter.on('myEvent1', function () {console.log('1')});// 监听事件 myEvent2eventEmitter.on('myEvent2', function() {console.log('2')});// 触发事件 myEvent1eventEmitter.trigger('myEvent1') // 1// 触发事件 myEvent2eventEmitter.trigger('myEvent2') // 2

1 0