html事件处理、Dom0级事件处理、Dom2级事件处理、IE处理

最新推荐文章于 2023-01-12 08:15:18 发布

最酷程序员

最新推荐文章于 2023-01-12 08:15:18 发布

阅读量261

点赞数 1

分类专栏：事件处理文章标签：前端 JS

本文链接：https://blog.csdn.net/weixin_45863735/article/details/103071877

版权

事件处理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件处理程序

事件处理程序分为：html事件处理、Dom0级事件处理、Dom2级事件处理、IE事件处理。下面我们来简述给个处理程序。
html事件处理：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            function demo(){
                alert("hello html事件处理");
            }
        </script>
    </body>
</html>

简单明了，不用调用其他元素和属性，不过，当你需要修改函数demo名字时，你需要修改function函数以及onclick点击事件里面的名称。
Dom2级事件处理：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1">按钮</button>
        </div>
        <script>
            var btn1=document.getElementById("btn1");
            btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
            btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");}
            btn1.onclick=function(){alert("Hello DOM0级事件处理程序3");}
            // btn1.onclick=null;  清除事件处理
   </body>
</html>

这个处理程序，没有给的函数名称，所以修改起来很方便，只需要修改一个地方即可，不过缺点是下一个处理程序会把上一个覆盖掉。

Dom2事件处理：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1">按钮</button>
        </div>
        <script>
            var btn1=document.getElementById("btn1");
            btn1.addEventListener("click",demo1);
            btn1.addEventListener("click",demo2);
            btn1.addEventListener("click",demo3);
            function demo1(){
                alert("DOM2级事件处理程序1")
            }
            function demo2(){
                alert("DOM2级事件处理程序2")
            }
            function demo3(){
                alert("DOM2级事件处理程序3")
            }
            btn1.removeEventListener("click",demo2);
        </script>

相比于前两个，Dom2处理程序运用的复杂些，通过添加句柄来实现函数的修改，并且下一个处理程序不会把上一个覆盖掉，并且是按顺序执行。克服了之前两个处理程序的不足，是目前工作中经常用到的一种处理程序。

IE事件处理程序：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1">按钮</button>
        </div>
        <script>
            var btn1=document.getElementById("btn1"); 
            if(btn1.addEventListener){
                btn1.addEventListener("click",demo);
            }else if(btn1.attachEvent){
                btn1.attachEvent("onclick",demo); //IE处理程序
            }else{
                btn.onclick=demo();
            }
            function demo(){
                alert("Hello");
            }
        </script>
  </body>
</html>

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this指向window。

以上是本篇博客全部内容，大家可以在下面评论，一起学习JS。