JavaScript当中事件监听与On事件重复出现时

最新推荐文章于 2022-11-25 16:32:31 发布

HPhone

最新推荐文章于 2022-11-25 16:32:31 发布

阅读量1.9k

点赞数 3

分类专栏： JavaScript 文章标签： javascript function 浏览器 firefox html opera

本文链接：https://blog.csdn.net/hphone/article/details/7071548

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

我们分为三种，第一中是事件多次被监听，第二种是On事件多次被赋值，第三种就是两者被交叉出现。

我们先看第一个就是事件多次被监听。

<html>
    <head>
    	
        <script >
        	
            function addHandler(element, type, handler){
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else 
                    if (element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = handler;
                    }
            }
        </script>
    </head>
    <body οnlοad="load(event)">
        <script >
            function click1(event){
                alert("click1");
            }
            
            function load(event){
                var mydiv = document.getElementById("mydiv");
		addHandler(mydiv, "click", click1); 
                addHandler(mydiv, "click", click2);  
            }
            
            function click2(event){
                alert("click2");
				
            }
            
           
        </script>
        <div id="mydiv" >
            test
        </div>
    </body>
</html>

由于不同的浏览器采用不同事件方式，IE采用的是冒泡，其他主流的浏览器采用的是捕获。结果是不一样的。

IE，先触发的是click2，然后是click1.

chrome，opera，firefox先触发的是click1，然后是click2。

总体来说，整体顺序，并不容易控制兼容。如果非得触发有顺序，那真是不是很好办呀。除非使用别人的框架来做。不过还是最好一个东西绑定一个事件比较好办一些。IE在这方面总是和别的浏览器统一协调，也难怪份额一直在下跌。你认为这还不够吗，在第三种，你会发现，IE这是一个什么东东，搞什么呀！

第二种，On事件多次赋值时候。

<html>
    <head>       
    </head>
    <body οnlοad="load()">
        <script >
            function click1(){
                alert("click1");
            }
            function load(){
                var mydiv = document.getElementById("mydiv");
				mydiv.οnclick=click1;
				mydiv.οnclick=click2;
            }
            
            function click2(){
                alert("click2");
				
            }  
        </script>
        <div id="mydiv" >
            test
        </div>
    </body>
</html>

这个还好说，只执行最后一个，也就是click2。

最后一个，交叉出现的时候，这可是一个比较麻烦的东西。

<html>
    <head>
        <script >
        	
            function addHandler(element, type, handler){
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else 
                    if (element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = handler;
                    }
            }
        </script>
    </head>
    <body οnlοad="load()">
        <script >
            function click1(){
                alert("click1");
            }
            
            function load(){
                var mydiv = document.getElementById("mydiv");
                addHandler(mydiv,"click",click2);
            }
            
            function click2(event){
				alert("click2");
			}
        </script>
        <div id="mydiv" οnclick="click1()">
            test
        </div>
    </body>
</html>

在浏览器测试的结果都是先弹出click1，然后click2。一般来说，先加载页面，然后执行onload事件。也就是所onlick赋值，早于事件监听。非IE浏览器，采用的是捕获，还比较好解释。但是IE这一点就不怎么好解释了。先不要着急，我们接着看下面的一个例子。

<html>
    <head>
        <script >
        	
            function addHandler(element, type, handler){
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else 
                    if (element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = handler;
                    }
            }
        </script>
    </head>
    <body οnlοad="load()">
        <script >
            function click1(){
                alert("click1");
            }
            function click2(){
				alert("click2");
			}
			function click3()
			{
				alert("click3");
			}
            function load(){
                var mydiv = document.getElementById("mydiv");
                addHandler(mydiv,"click",click2);
				mydiv.οnclick=click1;
				addHandler(mydiv,"click",click3);
				
            }
        </script>
        <div id="mydiv" >
            test
        </div>
    </body>
</html>

IE测试的结果是click1，click3，click2。

chorme，firefox，opera结果是click2，click1，click3。

我们应该可以做个小结吧。

IE顺序是on事件最优先，然后先绑定后执行。

其他浏览器是先绑定先执行，把on事件当成一个普通绑定事件来说。

还是建议不要绑定多长，顺序，真的不容易掌握