[JavaScript] DOM事件高级

最新推荐文章于 2023-03-23 16:23:37 发布

天才小熊猫一号

最新推荐文章于 2023-03-23 16:23:37 发布

阅读量195

点赞数

分类专栏： javascript 笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46076151/article/details/114973121

版权

一，注册事件

1.1注册事件概述

给元素添加事件叫做注册事件或绑定事件
注册事件有两种方式：传统注册方式，方法监听注册方式

传统注册事件方式：

以on开头的事件onclick。
特点：注册事件的唯一性，同一个元素，同一个事件，只能设置一个处理函数，最后注册的处理函数会覆盖前面的处理函数

方法监听注册方式：

addEventListener()方法
特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。
IE9之前的IE不支持此方法，可使用attachEvent()代替

1.2addEventListener事件监听方式

eventTarget.addEventListener(type,listener[,useCapture)]
该方法接受三个参数：

type:事件类型字符串，click,mouseover等，这里不要加on.
Listener:事件处理函数，事件触发时会调用这个函数。
useCapture:可选参数，是一个布尔值，默认false。

<body>
    <button>1</button>
    <button>2</button>

    <script>
        var but = document.querySelectorAll('button');
        // 传统注册方式(后面的处理函数会覆盖前面的处理函数)
        but[0].onclick = function () {
   
            alert('我是第一个按钮');
        }
        but[0].onclick = function () {
   
            alert('又被点击了一次');
        }
        // 方法监听注册方式(按顺序依次执行处理函数)
        but[0].addEventListener('click', function () {
   
            alert('点击一次');
        })
        but[0].addEventListener('click', function () {
   
            alert('点击两次');
        })
    </script>

</body>

1.3attachEvent事件监听方式

eventTarget.attachEvent(eventNameWithOn,callback)

eventNameWitjOn:事件类型字符串，onclick,onmouseover.
callback:事件处理函数

二，删除事件

当想要点击一次显示效果，再点击就不再显示效果，就用删除事件，写在处理函数里面

传统方式

eventTarget.οnclick=null;

方法监听注册方式

eventTarget.removeEventListener(type,Listener[,useCapture];

<body>
    <button>1</button>
    <button>2</button>

    <

最低0.47元/天解锁文章

天才小熊猫一号

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript] DOM事件高级

一，注册事件1.1注册事件概述给元素添加事件叫做注册事件或绑定事件注册事件有两种方式：传统注册方式，方法监听注册方式传统注册事件方式：以on开头的事件onclick。特点：注册事件的唯一性，同一个元素，同一个事件，只能设置一个处理函数，最后注册的处理函数会覆盖前面的处理函数方法监听注册方式：addEventListener()方法特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。IE9之前的IE不支持此方法，可使用attachEvent()代替1.2addEve
复制链接

扫一扫