美文网首页
事件派发dispatchEvent

事件派发dispatchEvent

作者: 一颗脑袋 | 来源:发表于2019-01-07 19:26 被阅读0次

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派发的事件对象

3、总结

事件除了浏览器自动监,我们还可以手动触发事件,也就是使用dispatchEvent

但是我们定义事件的目的就是为了执行某一方法,所以我们手动触发事件的目的其实也是想要执行该事件下影响到的方法。有时候不只是一个方法,且执行顺序也有所区别,这个时候调用方法不如直接触发事件方便,但是方便的同时也会有某些我们不希望触发函数的隐患。

相关文章

  • 事件派发&事件监听

    派发事件 dispatchEvent dispatchEvent 向指定目标事件派发一个事件;一般的事件触发是用户...

  • 事件派发dispatchEvent

    1、什么是dispatchEvent? dispatch意为“调度”、“派遣”,event为“事件”。所以disp...

  • 事件派发dispatchEvent

    点击b或者自执行b事件,将自动执行a事件 a bbb 原文作者:匆匆那年_海,博客主页:https://www....

  • js,vue实现给元素绑定自定义事件

    1.利用dispatchEvent给元素绑定自定义事件 dom.dispatchEvent(new Event('...

  • window.resize

    窗口调整大小事件: window.dispatchEvent(new Event('resize'));

  • js逻辑运算

    1.使用JS触发事件(dispatchEvent) 例如:主动触发click事件 var event=new Ev...

  • Activity、ViewGroup和View触摸事件分发机制总

    View触摸屏事件传递机制 整个View的事件转发流程是:View.dispatchEvent->View.set...

  • 事件总线通信

    事件谁派发谁监听,这里事件都交给$bus派发和监听,在派发事件时调用回调函数 main.js 文件 跨越多层级的...

  • 手动触发事件

    可通过原生方法调用的事件: 无法用原生方法分发的事件,可以通过 target.dispatchEvent 方法分发...

  • 2018-11-15

    dispatchEvent 自定义事件触发document.createevent最近接到需求,用户进入页面,自动...

网友评论

      本文标题:事件派发dispatchEvent

      本文链接:https://www.haomeiwen.com/subject/fsjprqtx.html