自定义事件

公司平常开发的项目不多有能使用到自定义事件的,已有的事件就够用了,但做为一个前端人员,学习这个仍是有必要了解和学习一下,可能在之后会使用到。。前端

下面看下代码函数

方式一:学习

// 新建事件实例
var event = new Event('build');

// 添加监听函数
elem.addEventListener('build', function (e) { ... }, false);

// 触发事件
elem.dispatchEvent(event);

该事件会层层向上冒泡。在冒泡过程当中,若是有一个元素定义了该事件的监听函数,该监听函数就会触发。ui

方式二:spa

var myEvent = new CustomEvent("myevent", {
  detail: {
    foo: "bar"
  },
  bubbles: true,
  cancelable: false
});

el.addEventListener('myevent', function(event) {
  console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);

CustomEvent构造函数的第一个参数是事件名称,第二个参数是一个对象,该对象的detail属性会绑定在事件对象之上。code

相关文章
相关标签/搜索