event事件对象

1.DOM2级事件规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段

2.在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域,在DOM0级方法事件处理程序会在其所属元素的作用域内运行,在使用attachEvent()方法。事件处理程序会在全局作用域中运行,因此this等于window。

3.event对象的属性与方法 hubbles 表示事件是否冒泡 cancelable 表示是否可以取消事件的默认行为 currentTarget 其事件处理程序当前正在处理事件的那个元素  defaultPrevented 为true 表示已经调用了preventDefault(); detail:与事件相关的细节信息   eventPhase:调用事件处理程序阶段:1表示捕获阶段,2表示处于目标 3表示冒泡阶段 preventDefault() : 取消事件的默认行为。如果cancelable是true表示可以使用这个方法。 stopImmediatePropagation() :取消事件进一步捕获或冒泡,同时阻止任何事件处理程序被调用; stopPropagation()取消事件进一步捕获冒泡,如果bubble是true可以使用这个方法。 target:事件目标 trusted:为true表示事件是浏览器生成的。为false表示事件是由开发人员通过Javascript创建的 type:被触发的事件类型  view:与事件关联的抽象试图 。等同于发生事件的window对象。在需要通过一个函数处理多个事件时 可以使用type属性 代码如下

 <body>
<form id="myBtn" >
<input type="button"  value="我的值" />
</form>
</body>
<script>
   var btn = document.getElementById("myBtn");
   //IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
   var handler = function(event){
      var event = event || window.event;
      var obj = event.srcElement ? event.srcElement : event.target;
      switch (event.type) {
         case "click":  
             alert("Clicked");
             break;
         case "mouseover":
             obj.style.backgroundColor = "red";
             break;
         case "mouseout":
             obj.style.backgroundColor = "orange";
             break;
      }
   };
   btn.onclick = handler;
   btn.onmouseover = handler;
   btn.onmouseout = handler;
</script>

stopPropagation()的用法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡 例子如下

<body>
<form id="myBtn" >
<input type="button"  value="我的值" />
</form>
</body>
<script>
   var btn = document.getElementById("myBtn");
   btn.onclick = function(event){
      alert("Clciked");
      event.stopPropagation();//有了这句话会取消进一步的事件捕获和冒泡
   };
   
   document.body.onclick = function(event){
      alert("body clicked");
   };
</script>

4.IE的event对象包含的属性和方法  :cancelBubble:默认值为false,但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法的作用相同) returnValue 默认值为true ,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同) srcElement :事件目标(与DOM中的target属性相同) type :被触发的事件类型。

原文地址:https://www.cnblogs.com/luhangnote/p/2642063.html