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

迈不过友情╰ 2023-10-03 14:59 38阅读 0赞

## 注册事件的两种方式 ##

<!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>