JavaScript学习 — 事件_html 事件是发生在 html 元素上的“事情”。当在 html 页面中使用 javascript-CSDN博客

本文链接：https://blog.csdn.net/weixin_67614925/article/details/124944674

本文介绍了JavaScript中的事件，包括事件三要素（元素、事件类型、事件处理函数）、鼠标点击事件（如mouseover、mouseout、mouseenter、mouseleave的区别）、事件绑定与解绑（DOM0级和DOM2级）、事件冒泡与捕获、事件对象以及事件默认行为。通过实例解析，帮助读者深入理解JavaScript事件机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

事件三要素

元素 >>> 事件源：绑定在谁身上的事件
事件 >>> 事件类型：绑定一个什么事件
执行函数 >>> 事件处理函数：当事件触发的时候执行的函数

鼠标点击事件

<script>
    function slgoan() {
        alert('航海王');
    }
</script>

<body>
    <!-- 双击弹出对话框 -->
    <button ondblclick="slgoan()">双击</button>
    <!-- 单击弹出对话框 -->
    <button onclick="slgoan()">单击</button>
</body>

解析mouseover,mouseout与mouseenter,mouseleave之间的区别：
mouseenter
在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。
mouseleave
在位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡。
mouseover
在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseout
在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。

详情请参考实例解析

    // mouseenter： 当鼠标移入某元素时触发。
    // mouseleave： 当鼠标移出某元素时触发。
    // mouseover：  当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
    // mouseout：   当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
    // mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

事件绑定与解绑

事件绑定的两种方式
1.dom0级事件：元素.on事件类型 = 事件处理函数

dom0级事件, 只能给一种事件绑定一个事件处理函数，因为是 = 赋值, 当你给他第二个值的时候, 第一个就被覆盖了。

2.dom2级事件：元素.addEventListener(‘事件类型’，事件处理函数)

dom2级事件, 可以给一种事件绑定多个事件处理函数，当事件触发的时候都会执行。

事件解绑的方式
元素.removeEventListener(‘事件类型’, 要移除的事件处理函数)
实例应用

<body>
    <button id="btn01">事件注册</button>
    <button id="btn02">事件监听</button>
    <button id="btn03">事件绑定</button>
    <span id="content" style="display:none"></span>
</body>

<script>
    // 获取页面按钮
    let btn01 = document.querySelector('#btn01');
    let btn02 = document.querySelector('#btn02');
    let btn03 = document.querySelector('#btn03');
    // 单击弹窗 事件注册
    btn01.onclick = function (params) {
        alert(btn01.innerText);
    }
    // 单击弹窗 事件监听 注意 上面的代码会被此代码覆盖
    btn01.onclick = function (params) {
        alert(btn02.innerText);
    }
    // 单击弹窗 事件监听
    btn02.addEventListener('click', function (params) {
        alert(btn02.innerText);
    });
    // 单击弹窗 事件注册 注意 上面代码不会被覆盖
    btn02.addEventListener('click', function (params) {
        alert(btn01.innerText);
    });
    // 单击页面显示 事件注册 
    btn02.addEventListener('click', function (params) {
        show01();
        // 移除单击页面显示（事件解绑） 事件监听 
        btn02.removeEventListener('click', show02);
    });
    btn02.addEventListener('click', show02);
    // 单击页面显示 事件注册 
    btn02.addEventListener('click', show);
    // 单击页面显示 事件注册 
    btn03.addEventListener('click', show);
    // 创建三个显示效果方法
    function show(params) {
        let content = document.querySelector('#content');
        content.append(btn01.innerText);
        content.style.display = 'block';
    }
    function show01(params) {
        let content = document.querySelector('#content');
        content.append(btn01.innerText);
        content.style.display = 'block';
    }
    function show02(params) {
        let content = document.querySelector('#content');
        content.append(btn02.innerText);
        content.style.display = 'block';
    }
</script>

事件冒泡与捕获

冒泡: 按照从目标到 window的顺序来执行所有的同类型事件。
捕获: 按照从window到目标的顺序来执行所有的同类型事件。

<body>
    <div id="out_box">
        <div id="inner_box"></div>
    </div>
</body>

<script>
    // 1、Javascript 代码中默认只能执行 捕获 或 冒泡 其中一个阶段
    // 2、onclick 和 attachEvent(ie) 只能得到 冒泡 阶段
    // 3、捕获阶段 如果 addEventListener 第三个参数为 true 那么进入 捕获阶段
    // 4、冒泡阶段 如果 addEventListener 第三个参数为 false 那么进入 冒泡阶段
    let out_box = document.querySelector('#out_box');
    let inner_box = document.querySelector('#inner_box');
    out_box.addEventListener('click', function (params) {
        alert('out_box捕获');
    },true);
    out_box.addEventListener('click', function (params) {
        alert('out_box冒泡');
    },false);
    inner_box.addEventListener('click', function (params) {
        alert('inner_box捕获');
    },true);
    inner_box.addEventListener('click', function (params) {
        alert('inner_box冒泡');
    },false);
</script>

事件对象

概念：
就是一个保存了本次事件的描述信息的对象数据类型，当你触发事件的时候，浏览器会帮我们记录好这些内容，在每一个事件触发的时候都应该有一些描述性的信息。

触发的什么事件；
触发的哪一个元素身上的事件；
鼠标事件的时候, 光标坐标点时什么；
键盘事件的时候, 按下的时哪一个按键。

当我们把这些信息放在一个对象里面的时候，我们管这个对象叫做事件对象。

<body>
    <div id="box">路飞</div>
</body>

<script>
    // 1. e 就是一个事件对象写到我们监听函数的小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在 它是系统给我们自动创建的 不需要我们传递参数
    // 3. 事件对象是我们事件的一系列相关数据的集合 跟事件相关的
    // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
    let box = document.querySelector('#box');
    box.addEventListener('click', function (e) {
        console.log(e);
    });
</script>

事件默认行为

表单提交: 不需要绑定提交时间, 只要点击 submit 按钮, 会自动提交跳转页面。
a 超链接: 不需要绑定点击事件, 只要点击 a标签就会跳转连接。
鼠标右键: 不需要绑定右键单击事件, 只要你单击鼠标右键, 就会出现一个菜单。
文本选中: 不需要绑定选中事件,只要你框选, 就会选中页面中的文本内容。

<body>
    <!-- 方法一 -->
    <!-- <form action="http://www.ekgc.cn/member/elogin" method="post" οnsubmit="return false"> -->
    <form action="http://www.ekgc.cn/member/elogin" method="post">
        <input type="text" name="KgcForm_models_LoginForm[identity]" value="15311484568" id="account">
        <input type="password" name="KgcForm_models_LoginForm[password]" value="1fe57b020cf7bcd8ef4cc23354b214a9"
            id="password">
        <input id="submit" type="submit" value="登录"><span id="msg" style="display: none; color: red;"></span>
    </form>
</body>

<script>
    let submit = document.querySelector('#submit');
    // 方法二
    // submit.onclick = function (params) {
    //     return false;
    // }
    // 方法三
    // submit.addEventListener('click',function (e) {
    //     e.preventDefault();
    // });
    // 方法四
    // submit.addEventListener('click',function (e) {
    //     e.returnValue = false;
    // });
    方法五
    submit.addEventListener('click', function (e) {
        e.preventDefault();
        e.returnValue = false;
    });
</script>