JS里，事件的几个细节问题--(冒泡、自定义事件)

2019独角兽企业重金招聘Python工程师标准>>>

今天想实现一个事件自动订阅到指定class的元素之上的功能。这句话很拗口，稍后解释！

在翻阅了MDN上api说明，多明白了许多细节。

1、event除了具有目标元素，事件类型，时间，位置等有效值 外，还有 bubbles  cancelable

等 与冒泡相关的属性。在查找事件的来源元素时，chrome有 srcElement  属性，  火狐却没有 srcElement  属性，必须用target。 srcElement返回的是一个Element对象，但是target返回一个Node。 不过编程时，好像是互用的。

2、event具有preventDefault   stopImmediatePropagation  stopPropagation 这三个方法。

区别就是：preventDefault:当事件有cancelable=true时，  事件就取消了

stopPropagation :事件停止向DOM的上级传播。

stopImmediatePropagation:   在当前事件执行的函数中，立即停止传播。（即使当前元素还绑定着其它的函数，函数本应该稍后执行的情况， 后面的函数都会不执行，好霸气的方法） 

3、用CustomEvent来实现自定义事件。

假设让el来接收一个blockClicked事件，写法如下：

//首先
el.addEventListener("blockClicked", handler, false);

//在之后的时间，你进行其它操作时，主动生成一个事件，并推送给el。
var bubble = doc.dispatchEvent(
       new CustomEvent("blockClicked", {detail: {data:'一些事件有用的信息'}})
);

注意：经过我的测试，dispatchEvent 时，并不是将事件推入消息队列，而是同步执行！

执行顺序：

1.    执行 var result=  dispatchEvent（new CustomEvent(）)
2.    进入事件处理函数中去，再返回执行结果到result。
3.    再执行dispatchEvent的一下语句。

这样就有机会根据上次事件结果，来决定是否终止事件链！

4、dispatchEvent的返回值是boolean

 如果事件cancelable=true,且至少有一个事件处理函数调用了Event.preventDefault()的话，返回false。事件终止传播

其它时候都返回true，事件继续传播下去。

ev = new CustomEvent(eventName, {
      detail: target,  cancelable: true
      });
result = el.dispatchEvent(ev)   //在处理函数里，来决定result的值

5、IE11不支持new CustomEvent()方法。  window对象上存在CustomEvent，但就是不让用。必须用：

var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: '一些有用的信息'});

代替。

 

 

 

转载于:https://my.oschina.net/u/1540190/blog/914768