JS高级-事件兼容（26）

最新推荐文章于 2024-09-11 09:43:46 发布

yzy0223郁子彦

最新推荐文章于 2024-09-11 09:43:46 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/yzy0223/article/details/100010272

版权

事件兼容

(1)、事件绑定

addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
你可以使用函数名，来引用外部函数:
JS代码块：
<script type="text/javascript">
    window.onload=function(){
        function show(){
            alert('点击事件注册了');
        }
        var test1=document.getElementById('test1');
        test1.addEventListener('click',show,false);
    }
</script>
Html代码块：
<body>
        <input type="button" id="test1" value="测试1" />
</body>

通过addEventListener（添加点击事件监听器）形式的绑定事件不会互相抵消，从而实现一个按钮控制多个事件。

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    //传统方式
    btn1.onclick = function(){
        console.log("第一个");
    }
    btn2.onclick = function(){
        console.log("第二个");
    }
    //添加事件监听器
    //addEventListener  添加事件监听器
    //type listener uesCapture  事件类型  事件处理函数  使用捕获
    btn2.addEventListener("click",function(){
        console.log("第一个");
    },false);
    btn2.addEventListener("click",function(){
        console.log("第二个");
    },false);
    //通过添加事件监听器形式绑定事件不会相互抵消
</script>

(2)、事件移除

<button id="btn1">按钮1</button>
<button id="btn2">按钮</button>
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    //传统方式
    btn1.onclick = function(){
        console.log("第一个人");
    }
    btn2.onclick = function(){
        console.log("第二个人");
    }
    // btn1.onclick=null;
    //添加事件监听器
    //如果添加的事件处理函数将来想要移除就不能使用匿名函数的方式
    btn2.addEventListener("click",fn1,false);
    function fn1(){
        console.log("第二个人");
    }
    //移除事件监听器   
    btn2.removeEventListener("click",fn1,false);
</script>

(3)、阻止冒泡

<body id="body">  
    <div id="box1" class="box1">  
        <div id="box2" class="box2">  
            <span id="span">This is a span.</span>  
        </div>  
    </div>  
</body>

我们现在想实现这样的功能，在div1 点击的时候，弹出 “你好，我是最外层div。”，点击div2 的时候，弹出 “你好，我是第二层div”；点击span 的时候，弹出"您好，我是span。"。

样式:

<style type="text/css">  
        .box1 {  
            border: green 40px solid;  
            width: 300px;  
            height: 300px;  
            margin: auto;  
        }  
        .box2 {  
            border: yellow 40px solid;  
            width: 220px;  
            height: 220px;  
            margin: auto;  
        }  
        span {  
            position: relative;  
            left: 50px;  
            top: 50px;  
            background-color: rgba(128, 128, 128, 0.22);  
        }  
</style> 
JavaScript代码块:
<script type="text/javascript">
    //window.onload = function() {  
    //  document.getElementById("body").addEventListener("click",eventHandler);  
    //}  
    //function eventHandler(event) {  
    //  console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +"  当前节点："+event.currentTarget.id);  
    //}  
    window.onload = function() {  
        document.getElementById("box1").addEventListener("click",function(event){  
        alert("您好，我是最外层div。");  
        });  
        document.getElementById("box2").addEventListener("click",function(event){  
        alert("您好，我是第二层div。");  
        });  
        document.getElementById("span").addEventListener("click",function(event){  
        alert("您好，我是span。");  
        });  
    }  
</script>

这显然不是我们想要的！我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢？原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的div2 和祖父节点的div1也会收到此事件，于是会做出事件响应，执行响应函数。现在问题是发现了，但是怎么解决呢？

在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了。
修改上述的script片段：

<script type="text/javascript">
    window.onload = function() {  
        document.getElementById("box1").addEventListener("click",function(event){  
            alert("您好，我是最外层div。");  
            event.stopPropagation();  
        });  
        document.getElementById("box2").addEventListener("click",function(event){  
            alert("您好，我是第二层div。");  
            event.stopPropagation();  
        });  
        document.getElementById("span").addEventListener("click",function(event){  
            alert("您好，我是span。");  
            event.stopPropagation();  
        });  
    }  
</script>

(4)、阻止默认

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。div元素没有默认事件

var a = document.getElementById("testA");
a.onclick =function(e){
    if(e.preventDefault){
    	e.preventDefault();
    }else{
    	window.event.returnValue == false;
    }
}
阻止链接跳转的默认行为