码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2016-09-16 12:43:15      阅读：122      评论：0      收藏：0      [点我收藏+]

标签：

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的执行顺序一样

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

标签：

原文地址：http://www.cnblogs.com/gongshunkai/p/5876120.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！