js自定义事件-向日葵屋

js自定义事件

小咪咪 2023-06-21 05:56 15阅读 0赞

废话不多说看代码，一目了然

注意：监听一定要在触发之前，不然监听无效

<div id="444" >自定义事件</div>
var dom = document.getElementById('444');
//监听事件
document.addEventListener('myEvent', function (event) {
  console.log("事件被触发了： "+event)
}, true);
// 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("myEvent", false, false);
// 触发
dom.dispatchEvent(evt);

initEvent(eventName, canBubble, preventDefault)支持三个参数：
分别表示：
事件名称
是否可以冒泡
是否阻止事件的默认操作

dispatchEvent()
dispatchEvent()就是触发执行了

addEventListener
element.addEventListener(event, function, useCapture)
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
true：事件句柄在捕获阶段执行
false：默认值。事件句柄在冒泡阶段执行

使用Event

// 直接自定义事件，使用 Event 构造函数：
var event = new Event('lookMe');
var elem = document.querySelector('#id')
// 监听事件
elem.addEventListener('lookMe', function (e) { ... }, false);
// 触发事件.
elem.dispatchEvent(event);

使用CustomEvent

// 监听事件
obj.addEventListener("hitIt", function(e) { process(e.detail) });
// 创建事件
var event = new CustomEvent("hitIt", {"detail":{"hazcheeseburger":true}});
//触发事件
obj.dispatchEvent(event);
//创建和触发事件（和上面的作用一样，可以替换上面的两步）
或者obj.dispatchEvent(new CustomEvent("hitIt", {"detail":{"hazcheeseburger":true}}));
// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
// 触发事件
$(element).trigger('myCustomEvent');
// 此外，你还可以在触发自定义事件时传递更多参数信息：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );