事件处理程序

RiemannHypothesis

发布于 2022-10-31 06:57:37

74300

代码可运行

文章被收录于专栏：ElixirElixir

运行总次数：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>

DOM0级事件处理

<!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");}
   </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>