自定义事件
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);