《DOM事件探秘》笔记

慕课网 DOM事件探秘 学习笔记

一、事件流

• 时间流： 描述的是从页面中接收事件的顺序。分为事件冒泡流和事件捕获流。

事件冒泡

• 事件冒泡： 即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

事件捕获

• 事件捕获： 不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

---

二、事件处理程序

HTML 事件处理程序

• 即事件是直接加载HTML结构里的。

DOM0级 事件处理程序

• 传统：把一个函数赋值给一个事件的处理程序属性。

oDiv.onclick = function () {}; // 给oDiv加了一个点击的属性
oDiv.onclick = null; // 删除onclick属性

DOM2级 事件处理程序

• DOM2级事件定义了两个方法：（用于处理指定和删除事件处理程序的操作）
  • addEventListener() 和 removeEventListener() 。
  • 接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值（true表示在捕获阶段调用事件处理程序，false为在冒泡阶段调用）。 - 参数的事件不带on，如click，mouseover
  • 添加和删除时的参数得相同。
  • addEventListener加的事件，只能通过removeEventListener删除。
  • 非标IE不支持。

IE事件处理程序

• attachEvent() 添加事件
• detachEvent() 删除事件
• 接受两个参数：事件处理程序的名称和事件处理程序的函数（只支持事件冒泡）。

---

三、事件对象

• 在触发DOM上的事件时都会产生一个事件对象event。其包含了所有和事件有关的信息。
• 非IE：event， IE：window.event

DOM中的事件对象

• type属性 ：用于获取事件类型。
• target属性 ： 用于获取事件目标。
• stopPropagation()方法 ： 用于阻止事件冒泡。
• preventDefault()方法 ： 用于阻止事件的默认行为。

IE中的事件对象

• type 和DOM一样。
• srcElement属性 ： 用于获取事件目标。
• cancelBubble属性 ： 用于阻止事件冒泡，设置为true表示阻止冒泡，false表示不阻止冒泡。
• returnValue属性 ： 用于阻止事件的默认行为，设置为false表示阻止事件的默认行为。

---

四、跨浏览器兼容

var eventUtil = {
 // 添加事件
 addHandler: function (element, eventType, handler) {
 if(element.addEventListener) { // DOM2
 element.addEventListener(eventType, handler, false);
 }
 else if(element.attachEvent) { // IE
 element.attachEvent('on' + eventType, handler);
 }
 else { // DOM0
 element['on' + eventType] = handler;
 }
 },
 // 删除事件
 removeHandler: function (element, eventType, handler) {
 if(element.removeEventListener) {
 element.removeEventListener(eventType, handler, false);
 }
 else if(element.detachEvent) {
 element.detachEvent('on' + eventType, handler);
 }
 else {
 element['on' + eventType] = null;
 }
 },
 // 事件对象
 getEvent: function (event) {
 return event ? event :window.event;
 },
 // 事件类型
 getType: function (event) {
 return event.type;
 },
 // 事件目标
 getElement: function (event) {
 return event.target || event.srcElement;
 },
 // 阻止默认行为
 preventDefault: function (event) {
 if(event.preventDefault) {
 event.preventDefault();
 }
 else {
 event.returnValue = false;
 }
 },
 // 阻止事件冒泡
 stopPropagation: function (event) {
 if(event.stopPropagation) {
 event.stopPropagation();
 }
 else {
 event.cancelBubble = true;
 }
 }
};

// 使用时
eventUtil.addHandler(oDiv, 'click', function (ev) {
 ev = eventUtil.getEvent(ev); // 事件对象
 // 或者就直接写 ev = ev || window.event;
 alert(eventUtil.getElement(ev)); // 弹出目标元素
 eventUtil.preventDefault(ev); // 阻止默认行为
 eventUtil.stopPropagation(ev); // 阻止冒泡
});

---