javascript事件对象

事件对象

1. DOM中的事件对象

   • 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论是DOM0级还是DOM2级方法，都会传入event对象。

   • event事件中的有关属性和方法

     1. event.bubbles 表明事件是否冒泡

        类型=>boolean

     2. event.cancelable 表明是否可以取消事件的默认行为

        类型=>boolean

     3. event.currentTarget 事件处理程序当前处理的那个元素

        类型=>Element

     4. event.defaultPrevented 为true时表示已经调用了e.preventDefault( )

        类型=>boolean

     5. event.eventPhase 处理程序的阶段 1表示捕获 2表示正在处于目标对象阶段 3表示冒泡阶段

        类型=>integer

     6. event.preventDefault( ) 取消系统事件默认行为 cancelable为true时可以使用

     7. event.stopPropagation( ) 取消事件的进一步冒泡 bubbles为true时即为冒泡阶段可以使用

     8. event.target 事件的目标元素

        类型=>Element

     9. event.isTrusted 为true表示是浏览器生成的事件 false表示时开发人员用js创建的事件

        类型=>boolean

     10. event.type 触发事件的事件类型

         类型=>string

         //当前绑定的事件对象就为触发事件的对象时  e.currentTarget === e.target
         var btn = document.querySelector('button');
                 btn.onclick =function(e) {
                     console.log(e.currentTarget === this); // true
                     console.log(e.target === this);  //true
                     console.log(e.currentTarget === e.target);//true
         
                 }
         

2. IE中的事件对象

   • IE中获取事件对象方式：window.event

   • IE中事件相关属性和方法

     1. window.event.cancelBubble 默认值为false ，将其设置为true时就可以取消事件冒泡

        类型=>boolean

     2. window.event.returnValue 取消事件的默认行为

        类型=>boolean

     3. window.event.srcElement 事件的目标

        类型=>Element

     4. window.event.type 触发事件的事件类型

        类型=>string

   • 在dom0级处理程序中的this指向事件对象，但在attachEvent事件中this指向window

     var btn = document.getElementById('mybtn');
     btn.onclick = function() {
     	console.log(window.event.srcElement === this) //true
     }
     
     btn.attachEvent('onclick', function() {
     	console.log(event.srcElement. === this) //false
     	//因为attachElement处理函数会在全局作用域中运行 因此this === window
     })