DOM 高阶教程

注册事件 / 绑定事件

传统注册方式：

<button onclick=""></button>
btn.onclick = function() {}

特点：注册事件的唯一性

方法监听注册方式：

addEventLisener()

特点：同个元素可以注册多个监听器（注意，非标准也可以使用：attachEvent()）

例如：

    btn.addEventListener('click', function() {
        alert(1);
    })

删除事件/解绑事件

传统注册方式：

btn.onclick = null

方法监听注册方式：

removeEventLisener()
detachEvent()

DOM 事件流

例如，我们给 div 添加了点击事件：

document —> html —> body —> div  // 捕获阶段
div —> body —> html —> document  // 冒泡阶段

div 被点击，那么父元素、body、html 均会被点击，会依次查找是否绑定了事件

我们可以验证，通过给父元素和子元素都添加点击事件，观察触发事件的顺序（注意，addEventListener 的第三个参数为 true ，代表处于捕获阶段，否则处于冒泡阶段）

我们更关注事件冒泡，并且有些事情是没有冒泡的，例如：onblur、onfocus、onmouseenter、onmouseleave

事件对象

如果在侦听函数中放入 event 参数（可以自己命名），那么它代表此事件对象，例如：

div.addEventListener('click', function(event) {
    console.log(event)
})

类似于 python 中类的 self 参数

事件对象的常见属性和方法

例如：e.target，返回触发事件的对象，这个和 this 是有区别的。e 一般可以理解为点击到的对象

e.type e.preventDefault() e.stopPropagation()

事件委托

例如，我们有一个 ul ，我们想要点击每个 li 的时候均弹出对话框，那么只需要给 ul 设置监听器即可，因为 li 没有绑定监听器，会冒泡到 ul 上

常用的鼠标事件

例如，禁止复制文字：

<body>
    不可复制的文字
    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault()
        })
    </script>
</body>

selectstart 可以阻止选中

鼠标事件对象

<body>
    <script>
        document.addEventListener('click', function(e) {
            console.log(e)
        })
    </script>
</body>

e.clientX/Y 返回鼠标相对于浏览器窗口可视化区的坐标

e.pageX/Y 返回鼠标相对于文档页面的坐标

e.screenX/Y 返回鼠标相对于电脑屏幕的坐标

常用的键盘事件

例如：

<body>
    <script>
        document.addEventListener('keyup', function(e) {
            console.log('键盘弹起了')
        })
    </script>
</body>

keyup keydown keypress

我们可以知道用户按下了哪个键，通过查看事件的属性

posted @ 2022-11-21 18:55 树叶本子阅读(30) 评论(0) 收藏举报

刷新页面返回顶部

DOM 高阶教程

公告