JavaScript之事件处理详解(3)

相对addEventListener()的是removeEventListener()方法,它同样有三个参数,前两个参数自然跟addEventListener()的意义一样,而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可,同样可以省略,默认值为false。它表示从对象中删除某个事件处理函数。实例:

div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
    console.log('div1-bubble');
}

4.attachEvent()

但是,IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的,IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获,所以attachEvent()并不能注册捕获过程中的事件处理函数,因此attachEvent()和detachEvent()要求只有两个参数:事件类型和事件处理函数。而且,它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例:

var div1 = document.getElementById('div1');
  div1.attachEvent('onclick', div1BubbleFun);
  function div1BubbleFun(){
     console.log('div1-bubble');
  }

相应的,从对象上删除事件处理程序函数使用detachEvent()。例如:

div1.detachEvent('onclick', div1BubbleFun);

到此为止,我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧!

二.事件处理程序的调用

1.事件处理程序的参数:正如前面所说,通常事件对象作为参数传递给事件处理函数,但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以,我们在写相关代码时应该注意兼容性问题。实例(给页面上id为div1的元素添加点击事件,当点击该元素时在控制台输出事件类型和被点击元素本身):

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div>div1</div>
    <script type="text/javascript">
        var div1 = document.getElementById('div1');
        if(div1.addEventListener){
            div1.addEventListener('click', div1Fun, false);
        }else if(div1.attachEvent){
            div1.attachEvent('onclick', div1Fun);
        }
        function div1Fun(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            console.log(event.type);
            console.log(target);
        }
    </script>
</body>
</html>

2.事件处理程序的运行环境:关于事件处理程序的运行环境,也就是在事件处理程序中调用上下文(this值)的指向问题,可以看下面四个实例。

实例一:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div>div1</div>
    <script type="text/javascript">
    </script>
</body>
</html>

结果一:

JavaScript之事件处理详解

从结果可以看出:

①第一种方法事件处理程序中this指向这个元素本身;

实例二:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/18c5e201c636b0b302cb42feac24acd9.html