javascript 注册和移除事件 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>传统注册事件</button>
<button>监听注册事件</button>
<script>
    var bts = document.querySelectorAll('button');
    // 传统注册事件  具有唯一性 只能注册一个事件  （都兼容）
    bts[0].onclick = function () {
        alert(11) //此事件 被后面的覆盖 不执行
    };
    bts[0].onclick = function () {
        alert(22); // 此事件执行

        bts[0].onclick = null; // 这里移除事件
    };

    // 监听注册事件 可以注册多个事件   （IE9向上兼容）
    // bts[1].addEventListener('click',function () {
    //     alert(33)  // 执行
    // });
    // bts[1].addEventListener('click',function () {
    //     alert(44)  // 执行
    // })

    // 为了移除事件 这里应写成这样
    bts[1].addEventListener('click', f);

    function f() {
        alert(33);
        bts[1].removeEventListener('click', f); // 这里移除事件
    }

</script>
</body>
</html>

 

posted @ 2019-04-24 21:12  码小龙  阅读(750)  评论(0)    收藏  举报