JavaScript学习笔记之事件处理程序的三种方式

最新推荐文章于 2024-01-20 20:17:34 发布

秋忆夏伤

最新推荐文章于 2024-01-20 20:17:34 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52512099

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <!-- 事件处理程序共有三种方式： -->

    <!-- 1、html事件处理程序：直接添加到html代码中；代码量大的时候，修改不便，不推荐使用。 -->
    <button id="btn" οnclick="clickDemo()">html事件处理程序</button><br /><br />
    <script type="text/javascript">
        function clickDemo() {
            alert("Html事件处理程序！");
        }
    </script>

    <!-- 2、DOM0级事件处理程序：把一个函数直接赋值给一个html元素的事件属性； -->
    <button id="did">DOM0级事件处理程序</button><br /><br />
    <script type="text/javascript">
        var id = document.getElementById("did");

        // 1)、DOM0级事件处理程序的第一种写法：
        //id.onclick = function () {          // 此方法需要点击按钮才能触发事件；
        //    alert("DOM0级事件处理程序1！");
        //}
        //id.onclick = function () {          // 当有两个或多个事件时，最后的事件会把前面的事件全部覆盖掉。
        //    alert("DOM0级事件处理程序2！");
        //}

        id.onclick = null;      // 清除按钮点击事件；

        // 2)、DOM0级事件处理程序的第二种写法：
        //id.onclick = Demo();    // 此方法不需要点击按钮，文档加载成功之后会直接接执行该事件；
        id.onclick = Demo;        // 此方法需要点击按钮才能触发事件；
        function Demo() {
            alert("DOM0级事件处理程序3！");
        }
    </script>

    <!-- 3、DOM2级事件处理程序：使用事件句柄(addEventListener()函数 和 removeEventListener()函数) -->
    <button id="dd">DOM2级事件处理程序</button><br /><br />
    <script type="text/javascript">
        var button = document.getElementById("dd");

        button.addEventListener("click", demo1);    // 用addEventListener可以添加多个事件处理程序。
        button.addEventListener("click", demo2);
        button.addEventListener("click", demo3);

        button.removeEventListener("click", demo3); // 移除事件处理程序；

        function demo1() {
            alert("DOM2级事件处理程序1！");
        }
        function demo2() {
            alert("DOM2级事件处理程序2！");
        }
        function demo3() {
            alert("DOM2级事件处理程序3！");
        }
    </script>

    <!-- 浏览器兼容模式： -->
    <button id="ie">浏览器兼容模式</button>
    <script type="text/javascript">
        var btn = document.getElementById("ie");

        if (btn.addEventListener) {                     // 如果支持DOM2级事件处理程序，就用addEventListener；
            btn.addEventListener("click", demoTest);  // addEventListener()的事件处理类型是 "click";
        } else if (btn.attachEvent) {                   // 如果支持IE事件处理程序，就用attachEvent；
            btn.attachEvent("onclick", demoTest);     // attachEvent的事件处理类型是 "onclick";
        } else {
            btn.onclick = demoTest;                     // 否则就用DOM0级事件处理程序；
        }

        function demoTest() {
            alert("Hello World!");
        }
    </script>
</body>
</html>