注册事件的两种方式（传统注册事件、方法监听注册事件）

原创

CMMKK 2022-10-20 10:14:39 博主文章分类：前端 ©著作权

文章标签 javascript html html5 事件处理字符串 文章分类 运维

©著作权归作者所有：来自51CTO博客作者CMMKK的原创作品，请联系作者获取转载授权，否则将追究法律责任

注册事件的两种方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册事件的两种方式</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function () {
            alert('hi');

        }
        btns[0].onclick = function () {
            alert('hao a u');  //只会执行最后一个
        }


        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })  //一个接着一个执行



        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function () {
            alert(11);
        })</script>
</body>

</html>