自定义事件javascript

自定义事件

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