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

最新推荐文章于 2021-10-27 22:20:46 发布

原创最新推荐文章于 2021-10-27 22:20:46 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

前端-js基础专栏收录该内容

4 篇文章

订阅专栏

本文介绍JavaScript自定义事件的使用方法，包括如何创建、监听及触发自定义事件，同时对比了JQuery中自定义事件的实现方式，展示了如何利用这些特性来扩展DOM行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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元素触发事件 myEvent1
	dom.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 = $({});
	// 监听事件 myEvent1
	eventEmitter.on('myEvent1', function () {
		console.log('1')
	});
	// 监听事件 myEvent2
	eventEmitter.on('myEvent2', function() {
		console.log('2')
	});
	// 触发事件 myEvent1
	eventEmitter.trigger('myEvent1') // 1
	// 触发事件 myEvent2
	eventEmitter.trigger('myEvent2') // 2