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); ~~~