事件对象的属性和方法（转）

4.1 cancleBubble:是否取消冒泡

4.1.1该属性在IE的各个版本都支持

<div id='myDiv' style="width:100px;height:100px;">>
        <div id="d1" style="width:40px;height:40px;">></div>
    </div>
    
    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.cancelBubble = true;
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;
            
        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.attachEvent("onclick",childClicked2);
        d1.attachEvent("onclick",childClicked1);

    </script>

IE中打印:

child clicked1

child clicked2

注意:添加监听器的顺序

4.1.2 chrome和firefox的高版本也支持

<div id='myDiv' style="width:100px;height:100px;">>
        <div id="d1" style="width:40px;height:40px;">></div>
    </div>
    
    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.cancelBubble  = true;
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;
            
        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1

child clicked2

4.2 stopPropagation():取消冒泡

　　bubbles:返回boolean值，判断当前事件能否冒泡(只读)

只有使用addEventListener方法添加的监听器，该属性才有效(即使在IE 中)

<div id='myDiv' style="width:100px;height:100px;">>
        <div id="d1" style="width:40px;height:40px;">></div>
    </div>
    
    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.stopPropagation();
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;
            
        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1
child clicked2

4.3 stopImmediatePropagation():取消冒泡，监测该事件的其他监听器都停止工作

只有使用addEventListener方法添加的监听器，该属性才有效

<div id='myDiv' style="width:100px;height:100px;">>
        <div id="d1" style="width:40px;height:40px;">></div>
    </div>
    
    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.stopImmediatePropagation();
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;
            
        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
           d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1

4.4 cancelable和preventDefault();

preventDefault()方法阻止默认行为

cancelable:返回boolean值，判断能否阻止默认行为(只读)

只有使用addEventListener方法添加的监听器，该属性才有效

<a id="aa" href="#">click here</a>
    
 <script>
        var link = document.getElementById("aa");
        link.addEventListener("onclick",clickHandler);

        
        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            ev.preventDefault();
        }
 </script>

cancelable是只读的

<a id="aa" href="http://www.baidu.com/">click here</a>
    
    <script>
        var link = document.getElementById("aa");
        link.addEventListener("click",clickHandler);

        
        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            console.log(ev.cancelable);//true
            ev.cancelable = false;
            ev.preventDefault();
            console.log(ev.cancelable);//true
        }
    </script>

即使设置了cancelable=true,仍然能阻止默认行为

 4.5 returnValue:是否取消默认行为，设置为false则取消默认行为 是IE浏览器特有的属性

<a id="aa" href="#">click here</a>
    
    <script>
        var link = document.getElementById("aa");
        link.attachEvent("onclick",clickHandler);

        
        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            ev.returnValue = false;
        }
   </script>

 

<a id="aa" href="http://www.baidu.com">click here</a>
    
    <script>
        var link = document.getElementById("aa");
        link.attachEvent("onclick",clickHandler);

        
        function clickHandler(ev){
           ev.returnValue = false;
        }
    </script>

 

IE中:

　　当使用attachEvent注册监听器时，可以使用参数ev或者window.event来设置returnValue;

　　当使用addEventListener注册监听器时

　　　　IE 9,10 window.event.returnValue = false;或者ev.preventDefault();

　　　　IE 11 ev.preventDefault()或者window.event.preventDefault();

　　当使用obj.onclick = clickHandler形式时

　　　　　　IE 9，10，11支持参数传递，但是参数ev对象中没有returnValue属性，通过ev参数来设置行不通

　　　　　　IE 5~10 可以使用window.event.returnValue = false来阻止默认行为

　　　　　　IE 11: window.event没有returnValue属性，设置失败

 

综上:

　　IE 浏览器 5，6，7，8，9，10都能使用attachEvent来注册监听，使用此方法生成的Event对象是具有IE 特性的对象，里面包含了cancelBubble,returnValue等IE标志

　　IE 11废弃了对attachEvent的支持

　　IE 9,10,11实现了对addEventListener的支持，该方法生成的Event对象是符合DOM标准的

　　IE 9,10 的ev对象是DOM标准对象，window.event是IE 私有对象

　　IE 11的ev对象和window.event都是DOM标准对象

     DOM标准对象中没有IE 私有属性

4.6 srcElement、target、currentTarget

srcElement只在IE浏览器中存在，不管以addEventListener还是attachEvent

它指向触发事件的元素，而不是绑定事件的元素

currentTarget和target:只有使用addEventListener方法添加的监听器，该属性才有效。

 4.7 relatedTarget、fromElement、toElement

发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之 内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目 标是失去光标的元素，而相关元素则是获得光标的元素。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含 值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触 发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。

兼容性写法:

if(event.relatedTarget)
{
    return event.relatedTarget;    
 }else if(event.fromElement)
 {
     return event.fromeElement;    
 }else if(event.toElement)
 {
   return event.toElement;    
 }else{
    return null;    
 }

5.事件处理函数的执行顺序

5.1

<div id='myDiv' style="width:100px;height:100px;"> onClick="alert('1')" onClick="alert('2')">
   
</div>

 弹出1

5.2

var myDiv = document.getElementById("myDiv"); 
        
myDiv.onclick = function(){
    alert('1');    
}
        
myDiv.onclick = function(){
    alert('2');    
}

 弹出2

5.3

<div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }
        
    </script>

 弹出2

5.4

 <div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        /*myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }*/
        
        myDiv.addEventListener("click",function(){
            alert("1")
        });
        
    </script>

 弹出3,1

5.5

<div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        /*myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }*/
        
        myDiv.addEventListener("click",function(){
            alert("1")
        });
        myDiv.addEventListener("click",function(){
            alert("2")
        });
        
    </script>

 弹出3,1,2

5.6

 <div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        /*myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }*/
        
        myDiv.attachEvent("onclick",function(){
            alert("1")
        });
        myDiv.attachEvent("onclick",function(){
            alert("2")
        });
        
    </script>

 lt IE 9----->3,2,1

gte IE 9----> 3,1,2

5.7

 <div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }
        
        myDiv.attachEvent("onclick",function(){
            alert("4")
        });
        myDiv.attachEvent("onclick",function(){
            alert("5")
        });
        
    </script>

 或者

 <div id='myDiv' style="width:100px;height:100px;"> onclick="alert('3')">
   
   </div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv"); 
        
        myDiv.onclick = function(){
            alert('1');    
        }
        
        myDiv.onclick = function(){
            alert('2');    
        }
        
        myDiv.addEventListener("click",function(){
            alert("4")
        });
        myDiv.addEventListener("click",function(){
            alert("5")
        });
        
    </script>

 弹出2,4,5(IE 9以下是2,5,4)

 

综上:

　　1.仅仅使用HTML属性添加事件处理函数时，只有第一个添加的有效，见5.1

　　2.使用DOM0添加的事件处理函数，后添加的覆盖前面添加的，而且覆盖通过HTML属性添加的，见5.2,5.3

　　3.使用DOM2添加的事件处理函数，不会覆盖任何其他事件处理函数

　　4.使用addEventListener添加的事件处理函数的执行顺序，按照添加的先后顺序执行

　　5.使用attachEvent添加的事件处理函数的执行顺序，在 <IE 9时，是倒序执行，>= IE9之后和addEventListener的执行顺序一样