事件监听详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wqliuj/article/details/108567207

事件监听
事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。

作用：实现多个事件的绑定

通用性的事件监听方法：

（1）绑定HTML元素属性：

（2）绑定DOM对象属性：

document.getElementById(“xxx”).οnclick=test;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JavaScript两种通用性的绑定事件的方式</title>
        <script type="text/javascript">
            function test1(){
                alert("绑定HTML元素属性");
            }

            function test2(){
                alert("绑定DOM对象属性");
            }
        </script>
    </head>
    <body>
        <a href="https://www.baidu.com" onclick="return false">百度</a>
        <!--超链接有自己的默认行为，即当点击的时候会跳转页面。若是要把默认行为给去掉，可以绑定一个onclick事件，
        onclick="return false"。这样点击就不会跳转页面了。-->
        <input type="button" id="test1" value="测试1" onclick="test1()">
        <button type="button" id="test2"><b>测试2</b></button>

        <script type="text/javascript">
            document.getElementById("test2").onclick=test2;//此处不能加括号，加了括号表示调用函数。
            /*注意：函数需要通过后面的触发才会调用执行，而上面这句没有放在函数里面，JavaScript从上往下解析的时候，解析到上面的那句代码，
　　　　　　　　若还没有解析到<body>中的id--test2,就会报错。故JavaScript代码要放在后面。*/
        </script>
    </body>
</html>

不常用的事件监听：

5.1 IE中的监听方法：

5.1.1 [object].attachEvent(“事件类型”,“处理函数”);//添加监听
　　　5.1.2 [object].detachEvent(“事件类型”,“处理函数”);//取消监听

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>IE监听事件</title>
        <!--备注：这段代码测试失败-->
        <script type="text/javascript">
            function show(){
                alert("Hello IE");
            }

            window.onload=function(){//当整个HTML文档加载好之后就会触发onload事件
                document.getElementById("test1").attachEvent("onclick",show);//给第一个按钮注册了onclick事件
                document.getElementById("test2").onclick=function(){//解除第一个按钮的onclick事件
                    document.getElementById("test1").detachEvent("onclick",show);
                }
            };
            
        </script>
    </head>
    <body>
        <input type="button" id="test1" value="测试1">
        <button type="button" id="test2"><b>测试2</b></button>

    </body>
</html>

标准DOM中的事件监听方法：
　　　　5.2.1 [object].addEvent(“事件类型”,“处理函数”,“冒泡事件或捕获事件”);
　　　　5.2.2 [object].removeEvent(“事件类型”,“处理函数”,“冒泡事件或捕获事件”);

提示：IE监听方法中事件类型和标准DOM监听方法中的事件类型写法有点不同，前者事件类型用“on”开头，不如：“onclick”、“onmousemove”等，而后者不需要“on”，就是“click”、“mousemove”等。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DOM事件监听</title>
        <script type="text/javascript">
            function show(){
                alert("hello");
            }

            window.onload=function(){
                var test1=document.getElementById("test1");
                var test2=document.getElementById("test2");
                test1.addEventListener("click", show, false);//给第一个按钮注册了onclick事件
                /*test2.οnclick=function(){//解除第一个按钮的onclick事件(方法一)
                    test1.removeEventListener("click", show, false);
                }*/
                test2.addEventListener("click", function(){//解除第一个按钮的onclick事件(方法二)
                    test1.removeEventListener("click", show, false);
                }, false);
            }
        </script>
    </head>
    <body>
        <input type="button" id="test1" value="测试1">
        <button type="button" id="test2"><b>测试2</b></button>
    </body>
</html>

事件监听的捕捉和冒泡
事件监听函数有三个参数：事件事件触发时执行的函数是否使用捕获

例如我们有三个div块
在这里插入图片描述

我们给每个div块绑定一个事件从外到内 div块的 id为 china bg hd

当我们点击最里面的的时候，到底谁先执行呢？这个时候就要用到捕捉和冒泡了

var china=document.getElementById('China');
var bj=document.getElementById('bj');
var hd=document.getElementById('hd');

china.addEventListener('click',function(){alert('捕捉china')},true);
bj.addEventListener('click',function(){alert('捕捉bj')},true);
hd.addEventListener('click',function(){alert('捕捉hd')},true);
//捕捉阶段

此时的执行顺序：捕捉China 捕捉bj 捕捉hd

冒泡阶段：

china.addEventListener('click',function(){alert('mchina')},false);
bj.addEventListener('click',function(){alert('mbj')},false);
hd.addEventListener('click',function(){alert('mhd')},false);