javascript事件触发器fireEvent和dispatchEvent

顺其自然~

已于 2022-04-25 08:08:47 修改

阅读量2.6k

点赞数

文章标签： fireEvent dispatchEvent

于 2020-12-04 20:40:15 首次发布

本文链接：https://blog.csdn.net/fuhanghang/article/details/110672153

版权

事件触发器就是用来触发某个元素下的某个事件，IE下fireEvent方法(触发事件，fire：射出(子弹); 射(箭);)，高级浏览器（chrome,firefox等）有dispatchEvent方法（派遣事件，dispatch：派遣; 调遣; 派出; 发出，发送(邮件、包裹、信息); ）。

一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

例如在ie下看看这个例子：

//document上绑定自定义事件ondataavailable（attach：附加）

document.attachEvent('ondataavailable', function (event) {

alert(event.eventType);

});

var obj=document.getElementById("obj");

//obj元素上绑定click事件

obj.attachEvent('onclick', function (event) {

alert(event.eventType);

});

//调用document对象的createEventObject方法得到一个event的对象实例。

var event = document.createEventObject();

event.eventType = 'message';

//触发document上绑定的自定义事件ondataavailable

document.fireEvent('ondataavailable', event);

//触发obj元素上绑定click事件

document.getElementById("test").onclick = function () {

obj.fireEvent('onclick', event);

};

再看看高级浏览器（chrome,firefox等）的例子：

//document上绑定自定义事件ondataavailable

document.addEventListener('ondataavailable', function (event) {

alert(event.eventType);

}, false);

//调用document对象的 createEvent 方法得到一个event的对象实例。

var event = document.createEvent('HTMLEvents');

// initEvent接受3个参数：

// 事件类型，是否冒泡，是否阻止浏览器的默认行为

event.initEvent("ondataavailable", true, true);

event.eventType = 'message';

//触发document上绑定的自定义事件ondataavailable

document.dispatchEvent(event);

//

var obj = document.getElementById("obj");

//obj元素上绑定click事件

obj.addEventListener('click', function (event) {

alert(event.eventType);

}, false);

var event1 = document.createEvent('HTMLEvents');

event1.initEvent("click", true, true);

event1.eventType = 'message';

//触发obj元素上绑定click事件

document.getElementById("test").onclick = function () {

obj.dispatchEvent(event1);

};

在实际封装中没这么简单，看了一下jQuery.event.trigger的源码，是通过模拟来实现了，给某元素绑定一个事件处理函数，如果有触发事件的实际操作就会执行相应的事件处理函数，所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。

trigger() 方法触发被选元素的指定事件类型。

语法

$(selector).trigger(event,[param1,param2,...])

参数	描述
event	必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]	可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

参数

描述

event

必需。规定指定元素要触发的事件。

可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。

[param1,param2,...]

可选。传递到事件处理程序的额外参数。

额外的参数对自定义事件特别有用。

使用 Event 对象来触发事件

规定使用事件对象的被选元素要触发的事件。

触发 input 元素的 select 事件：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>

使用 Event 对象来触发事件

规定使用事件对象的被选元素要触发的事件。

语法

$(selector).trigger(eventObj)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  var e = jQuery.Event("select");
  $("button").click(function(){
    $("input").trigger(e);
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>