码迷,mamicode.com
首页 > 其他好文 > 详细

dispatchEvent相关内容

时间:2016-07-08 19:43:07      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

意思就是:手动触发事件

我的理解是:类似于jquery中的trigger方法,可以在点击某个dom的时候,触发另一个dom的事件,下面一个我自己尝试的例子:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6     <style type="text/css">20         .dom {
 7             width: 300px;
 8             height: 300px;
 9             background: red;
10             margin: 10px;
11         }
12     </style>
13 </head>
14 <body>
15 <div class="dom" id="J_dom1"></div>
16 <div class="dom" id="J_dom2"></div>
17 <script type="text/javascript">
18 var events = new Event(trigger);
19 document.getElementById(J_dom2).addEventListener(trigger, function () {
20     console.log(2);
21 }, false);
22 document.getElementById(J_dom1).addEventListener(click, function () {
23     console.log(1);
24     document.getElementById(J_dom2).dispatchEvent(events);
25 }, false);
26 </script>
27 </body>
28 </html>

 

页面运行出布局为:

技术分享

上面代码中可以看出,我们为dom1绑定了“click”事件,为dom2绑定了trigger事件,在dom1中的“click”触发的时候,内部程序又会用dispatchEvent触发dom2中的trigger事件,因此在点击dom1时输出结果为:

1
2

以上是我对dispatchEvent的理解,还有很多不足,请多多指出,我会继续努力修改增进!!!

 

dispatchEvent相关内容

标签:

原文地址:http://www.cnblogs.com/bo-haier/p/5653250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!