jquery自定義事件 · PHP筆記

### ?自定義事件 ## **1、event構造函數自定義事件** ~~~ /* * 自定義一個名為build的事件 * bubbles :事件是否冒泡 * cancelable:是否阻止事件的默認操作 * composed:指示事件是否將觸發影子根外部的偵聽器 */ var buildEvent = new Event('build',{"bubbles":true, "cancelable":false,"composed":false}); ~~~ ~~~ //監聽自定義定義的build事件 elem=getElemntById("xx").addEventListener()或者document.addEventListener() elem.addEventListener('build', function (e) { /* 類似elem.onclick */ }, false); //手動觸發事件，自定義的瀏覽器是捕獲不到的需要用下面的代碼手動觸發 elem.dispatchEvent(buildEvent); ~~~ ## **2、CustomEvent()自定義事件** 為了向事件對象添加更多數據，存在CustomEvent接口，并且可以使用詳細信息屬性傳遞自定義數據。例如，可以如下創建事件 ~~~ var event = new CustomEvent('build', { detail: elem.dataset.time }); ~~~ 面的代碼允許你在事件監聽器中訪問更多的數據： ~~~ function eventHandler(e) { log('The time is: ' + e.detail); } ~~~ 例子： ~~~ obj=document.querySelector('form') // 可以監聽為定義的事件，我們在后面補上就行 obj.addEventListener("cat", function(e) { process(e.detail) }); // 創建自定義事件 var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}); //手動觸發事件 obj.dispatchEvent(event); ~~~ 模擬鼠標點擊事件 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>simulate click</title> </head> <body> <input type="button" value="clickMe" id="demo_click"> <script> const btn = document.getElementById('demo_click'); btn.onclick = function () { // alert('click complete!'); }; simulateClick(); // 2. 模擬瀏覽器的鼠標點擊事件 // 2.1 可以觸發 onclick 事件（先觸發） // 2.2 可以觸發 addEventListener 事件（后觸發） // 2.3 jQuery 的事件綁定底層就是 addEventListener , function simulateClick() { // 模擬瀏覽器的鼠標點擊事件 const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); btn.dispatchEvent(event); } </script> </body> </html> ~~~ ?或者 ~~~ var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); document.getElementById("clickme").dispatchEvent(e); //只要id 就好或者 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事件 obj.dispatchEvent(event1); ~~~ ## **IE<9**為fireEvent方法 ~~~ //document上綁定自定義事件ondataavailable 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); }; ~~~ ## 3、廢棄的舊方法 ~~~ // Create the event. var event = document.createEvent('Event'); // Define that the event name is 'build'. event.initEvent('build', true, true); // Listen for the event. elem.addEventListener('build', function (e) { // e.target matches elem }, false); // target can be any Element or other EventTarget. elem.dispatchEvent(event); ~~~