dispatchEvent相關內容

意思就是:手動觸發事件javascript

個人理解是:相似於jquery中的trigger方法,能夠在點擊某個dom的時候,觸發另外一個dom的事件,下面一個我本身嘗試的例子:css

 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>

 

頁面運行出佈局爲:html

上面代碼中能夠看出,咱們爲dom1綁定了「click」事件,爲dom2綁定了trigger事件,在dom1中的「click」觸發的時候,內部程序又會用dispatchEvent觸發dom2中的trigger事件,所以在點擊dom1時輸出結果爲:java

1
2

以上是我對dispatchEvent的理解,還有不少不足,請多多指出,我會繼續努力修改增進!!!jquery

相關文章
相關標籤/搜索