JavaScript学习笔记之DOM事件句柄

最新推荐文章于 2019-03-10 19:04:34 发布

秋忆夏伤

最新推荐文章于 2019-03-10 19:04:34 发布

阅读量394

点赞数

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

版权

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

    <!-- DOM事件句柄：EventListener；(参数1：事件的类型；  参数2：触发事件时调用的函数；) -->
    <!-- 方法1：AddEventListener()，给指定的元素添加事件句柄； -->
    <!-- 方法2：RemoveEventListener()，从元素中移除指定的事件句柄； -->

</head>
<body>    
    <button id="bid">按钮</button>

    <script type="text/javascript">
        var btn = document.getElementById("bid");
        if (btn == null) {
            alert("获取html元素失败！");
        } else {
            btn.addEventListener("click", Demo1);   // 添加三个事件句柄，会依次执行三个函数；
            btn.addEventListener("click", Demo2);
            btn.addEventListener("click", Demo3);

            btn.removeEventListener("click", Demo3);    // 移除事件句柄，则Demo3()函数不会执行；
        }

        function Demo1() {
            alert("Hello");
        }

        function Demo2() {
            alert("World");
        }

        function Demo3() {
            alert("第三个弹框！");
        }
    </script>
</body>
</html>

秋忆夏伤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记之DOM事件句柄

按钮 var btn = document.getElementById("bid"); if (btn == null) { alert("获取html元素失败！"); } else { btn.addEventListener("click", Demo1); // 添加三个事件句柄
复制链接

扫一扫