事件派发dispatchEvent

编程入门行业动态更新时间:2024-10-10 05:20:05

事件派发dispatchEvent

1、什么是`dispatchEvent`？

dispatch意为“调度”、“派遣”，event为“事件”。所以dispatchEvent即向指定事件目标派发一个事件，并以合适的顺序触发受影响的事件目标。

简单来说就是，一般的事件触发都是用户进行某些操作时才会触发，而使用dispatchEvent就可以在代码中手动触发事件了。

下面是一个简单的创建并派发事件的例子：

var event = new Event('click');//创建一个click事件
elem.addEventListener('click', function(e){}, false);//为元素绑定事件监听
elem.dispatchEvent(event);//派发事件

<!DOCTYPE html>
<html>
<head><title>test</title>
</head>
<body><button id="click">Click me!</button>
</body><script type="text/javascript">window.onload = function(){var btn = document.querySelector('#click');btn.addEventListener('click', function(e){alert('okk!');}, false);var event = new Event('click');btn.dispatchEvent(event);}</script>
</html>

2、运用场景

使用场景
- 一是触发自定义事件，浏览器自带事件一般由浏览器接收某些操作之后触发，而自定义事件的触发就需要使用dispatchEvent来进行手动触发了。
- 二是触发浏览器标准事件。根据需求决定，某些操作如果正好与某个元素事件的触发一致，且该事件很好模拟，我们就可以触发该事件来达到某些我们需要的执行结果。
注意事项
- ie9以下的版本不支持该方法，二是使用fireEvent方法，所以，有需求的话需要做好浏览器兼容。
使用Jquery来兼容浏览器

Jquery中的trigger方法就是用来触发事件的。

$(selector).trigger(event,[param1,param2,...])//规定指定元素要触发的事件，字符串

$(selector).trigger(eventObj)//eventObj派发的事件对象