今天想实现一个事件自动订阅到指定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 时,并不是将事件推入消息队列,而是同步执行!
执行顺序:
这样就有机会根据上次事件结果,来决定是否终止事件链!
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: '一些有用的信息'});
代替。