JS复习12：事件高级1（注册事件）

最新推荐文章于 2022-07-22 16:39:40 发布

好汤圆

最新推荐文章于 2022-07-22 16:39:40 发布

阅读量61

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_47436772/article/details/115933343

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

JS复习12：事件高级1（注册事件）

一、注册事件的两种方式

addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用
注意：IE9以后不支持

注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
    // 判断当前浏览器是否支持 addEventListener 方法
    if (element.addEventListener) {
        element.addEventListener(eventName, fn); // 第三个参数 默认是false
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
}

代码示例

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

好汤圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS复习12：事件高级1（注册事件）

JS复习12：事件高级1（注册事件）一、注册事件的两种方式addEventListener 事件监听方式eventTarget.addEventListener(type, listener[, useCapture])type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 onlistener：事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习attachE
复制链接

扫一扫