DOM事件

最新推荐文章于 2025-07-07 17:17:52 发布

原创最新推荐文章于 2025-07-07 17:17:52 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

本文深入解析DOM事件机制，包括鼠标事件、键盘事件等常见事件类型及其绑定方式。对比DOM0级和DOM2级事件绑定的区别，并介绍事件传播机制，如冒泡和捕获阶段。

DOM事件

事件及浏览器常用事件行为

给一个元素绑定 onclick onmouseenter onmouseleave window.onscroll img.onload window.onload 事件绑定，给元素绑定事件；当事件触发，执行对应函数

dom0级事件 dom2级事件事件池机制以及其引出来的发布订阅者设计模式

事件：元素天生自带的默认行为。

天生自带的可进行的操作，不管你写没写onclick它都有click事件。

时间绑定：给元素的某个行为绑定一个方法

鼠标事件行为：

click 点击

dblclick 双击

mouseenter

mouseleave

键盘事件：

keyup

keypress

手指事件：

touch 单手指

touchstart 手指按下

touchend 手指松开

touchmove 手指移动

touchcancel 操作取消，用于非正常状态下的操作结束，滑动过快

多手指事件模型：

gesturestart 5个手指按下的信息都存起来

表单元素：

focus

blur

change

音视频常用事件：

canplay 可以播放

canplaythrough

其他常用事件：

load 资源加载完成。(document.ready dom结构渲染完成；window.onload 浏览器当前页面所有资源加载完成)

beforeunload 页面关闭之前

timeout 超时

onbort 中断事件

oncontextmenu 右键

DOM 0级和2级事件绑定的区别

onxxx dom 0级事件绑定

可绑定方法的数量

区别：

可绑定方法的数量：

dom0级：原理是私有属性赋值。当前元素对象的私有属性，赋值了一个方法；

dom2级：是把绑定的事件方法存到事件池中，绑定几个存几个

操作上的区别：

onxxx=null

removeEventListener：因为移除时需要知道哪个函数，所以2级事件绑定一般采用实名函数

事件池会自动去重

顺序

二者可以混用，不冲突，都会被触发；

执行顺序就是按照你绑定的顺序；

支持的事件类型

DOM2支持的事件类型比dom0要多

比如，ontransitonend DOMContentLoaded

跟css3相关的一些东西，dom0里一般都支持不好

这里有2个比较重要的事件：load和DOMContentLoaded

2级的好处：

可以给当前某个事件行为绑定多个方法
支持更多强大的事件类型

jQuery中的事件绑定

on方法实现事件绑定

有一个专门的event去处理事件：event.on event.remove

有一道题：

看过源码

本质区别

闭包是什么，怎么理解

事件对象

给原生绑定一个事件，触发click事件行为的时候，事件回调触发；

给元素的某个事件行为绑定方法，当事件触发，方法执行；不仅方法会执行，而且还会把当前你操作的信息传给方法，而传过来的信息就叫事件对象；

MouseEvent 鼠标事件对象类，我们得到的是这个类的实例

KeyboardEvent 键盘事件类

一些属性

事件对象：你当前操作的相关信息，存储的是你当前操作相关信息

当前鼠标触发点距离窗口左上角的 x/y轴坐标值

clientX / clientY

pageX / pageY：距离文档流左上角的 x/y轴坐标值

target: 事件源

事件对象永远只有一个

事件对象永远都只有一个。从底层原理来看：

事件对象仅和当前操作有关，跟函数跟事件无关。

是由事件操作本身产生的，跟方法无关。

preventDefault

阻止默认行为

a标签的默认行为：点击跳转链接或锚点定位

想把它当做普通按钮。阻止默认行为：

return false;
ev.preventDefault;

先触发click行为，再执行href跳转。

右键菜单：

document.documentElement.oncontextmenu=function(ev){
    ev.preventDefault();
    console.log(ev);
    const contextmenu=document.querySelector('.contextmenu');
    contextmenu.style.left=ev.clientX+'px';
    contextmenu.style.top=ev.clientY+'px';
    contextmenu.style.display='block';
}

<body>
    <ul class="contextmenu">
        <li>新建文档</li>
        <li>删除文档</li>
    </ul>
</body>

输入框禁止输入案例：

let inputEl=document.getElementById('cardInput');
inputEl.addEventListener('input',function(ev){
    this.value=this.value.replace(/([^0-9X])/gi,'')
})

let inputEl=document.getElementById('cardInput');
inputEl.addEventListener('keydown',function(ev){
    
    console.log(ev)
    let pass=/x|[0-9]/gi.test(ev.key)
    console.log(pass);
    if(!pass){
        ev.preventDefault();
    }
})

KeyboardEvent

键盘事件对象：

cancelBubble 阻止冒泡

code 按的那个键。比key描述得更详细

keyCode | which 键盘里的每个键都有自己对应的键盘码值

按下键能往文本框输入内容——这属于按键的默认行为

那现在阻止这个默认行为，输不进去内容，超过多少位不让输了

a标签的默认行为、右键默认行为、文本框按键输入默认行为

推盒子案例

小方块在一个容器里来回走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pushbox</title>
    <style>
        .container{
            width: 500px;
            height: 500px;
            background: #9fcdff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .container .box{
            width: 100px;
            height: 100px;
            background: #a71d2a;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <script>
        let container=document.querySelector('.container'),box=document.querySelector('.box');
        let step=10;

        document.addEventListener('keydown',function (ev) {
            let left=box.offsetLeft;
            let top=box.offsetTop;
            let minLeft=0,maxLeft=container.offsetWidth-box.offsetWidth,minTop=0,maxTop=container.offsetHeight-box.offsetHeight;
            switch (ev.keyCode) {
                case 37:
                    if(left>minLeft){
                        left-=step;
                    }
                    break;
                case 38:
                    if(top>minTop){
                        top-=step;
                    }
                    break;
                case 39:
                    if(left<maxLeft){
                        left+=step;
                    }
                    break;
                case 40:
                    if(top<maxTop){
                        top+=step;
                    }
                    break;
            }
            box.style.top=`${top}px`;
            box.style.left=`${left}px`;
        })
    </script>
</body>
</html>