DOM事件探秘

事件流

    定义：面中接收事件的顺序

    事件冒泡：从最具体的元素开始，逐级到最不具体节点

    事件捕获：从最不具体的节点开始，逐级到最具体元素

事件处理程序

    HTML

        在html标签中通过属性写事件

1	<button onclick="alert('hello');">按钮一</button>

    DOM 0级

        把一个函数赋值给一个事件的处理程序属性

1 2 3 4 5

var btn = document.getElementById('btn');              btn.onclick = function () {              console.log('hello');          };          btn.onclick = null; //删除事件

    DOM 2级

        用于处理添加和删除事件处理程序

1 2 3 4 5 6

var btn = document.getElementById('btn');          var showHello = function () {                  console.log('hello');          };          btn.addEventListener('click', showHello,false);          btn.removeEventListener('click', showHello, false);

        

        兼容处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var eventUtil = {     addEvent: function (element, type, fn) {    //添加事件         if (element.addEventListener) {             element.addEventListener(type, fn, false);         } else if (element.attachEvent) {             element.attachEvent('on' + type, fn);         } else {             element['on' + type] = fn;         }     },     removeEvent: function (element, type, fn) { //移除事件         if (element.removeEventListener) {             element.removeEventListener(type, fn, false);         } else if (element.detachEvent) {             element.detachEvent('on' + type, fn);         } else {             element['on' + type] = null;         }     },

事件对象

    是什么

        在触发dom上事件时会产生一个对象

        事件对象event

    DOM中的事件对象

        type属性

        target属性

        stopPropagation() 方法

        preventDefault()方法

    IE中的事件对象

        type属性

    ​    ​srcElement属性

    ​    ​cancelBubble属性

    ​    ​returnValue属性

    兼容类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

var eventUtil = {     addEvent: function (element, type, fn) {    //添加事件         if (element.addEventListener) {             element.addEventListener(type, fn, false);         } else if (element.attachEvent) {             element.attachEvent('on' + type, fn);         } else {             element['on' + type] = fn;         }     },     removeEvent: function (element, type, fn) { //移除事件         if (element.removeEventListener) {             element.removeEventListener(type, fn, false);         } else if (element.detachEvent) {             element.detachEvent('on' + type, fn);         } else {             element['on' + type] = 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;         }     } };

​