DOM事件概念以及绑定事件解绑事件（含代码解析）

最新推荐文章于 2024-05-25 13:36:04 发布

“玫瑰无原则 ”

最新推荐文章于 2024-05-25 13:36:04 发布

阅读量512

点赞数 8

本文链接：https://blog.csdn.net/m0_60273757/article/details/120794062

版权

本文介绍了HTML事件的概念、三要素及执行步骤，并详细讲解了如何绑定和解绑事件，包括HTML元素和DOM对象的事件绑定，以及高级事件如click和mouseover的处理。同时涵盖了Event对象的使用和高级事件处理函数的绑定与解绑技巧。

摘要由CSDN通过智能技术生成

什么是事件？

HTML 事件是发生在 HTML 元素上的事情。

例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件，在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。

事件三要素

事件源：事件被触发的对象（是谁干了这件事！）
事件类型：如何触发什么事件，例如：鼠标点击、鼠标经过、键盘按下（干了啥！）
事件处理程序：通过函数赋值的方式（怎么干的！）

事件的执行步骤

获取事件源
注册事件（绑定事件）元素可以不用添加事件
添加事件处理程序（采用函数赋值的形式）

代码讲解

<body>
    <input type="button" value="点秋香">
    <script>
        //1.获取事件源（是谁要做这件事情）
        var btj = document.querySelector('input');
        //2.注册事件  元素可以不添加事件
        btj.onclick;
        //3.添加事件处理程序
        btj.onclick = function () {
            alert('唐伯虎点秋香');
        }
    </script>

</body>

事件对象

概念

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件通常与函数结合使用，函数不会在事件发生前被执行！

实例

高级事件

绑定事件

绑定HTML元素

特点：绑定事件唯一性，只能添加一个处理函数，若设置多个后面的函数会将前面的函数覆盖。

语法：element.Event Handlers = function() {}

参数：

element：事件源，引起事件的元素或者节点；
Event Handlers：事件句柄，触发事件的行为，例如：onclick（点击鼠标）；
function() {}：匿名函数，处理事件的方法；

绑定DOM对象

特点：绑定事件不唯一，可以添加多个处理函数，但有一定兼容性问题IE9以上支持

语法：element.addEventListener(type,lister,useCapture);

参数：

element：事件源，引起事件的元素或者节点；
type :事件类型字符串,比如click、 mouseover 注意这里不要带on;
listener :事件处理函数,事件发生时,会调用该监听函数;
useCapture :可选参数,值为true为捕获阶段,值为false或省略不写(默认是false) 处于冒泡阶段;

代码讲解

<body>
    <input type="button" value="秋香" id="but1">
    <input type="button" value="唐伯虎" id="but2">

    <script>
        //获取事件源
        var but1 = document.getElementById('but1');
        var but2 = document.getElementById('but2');
        //绑定HTML元素
        but1.onclick = function () {
            console.log('你点了秋香');
        }
        //绑定DOM对象
        but2.addEventListener('click', function () {
            console.log('你点了唐伯虎');
        })

    </script>

</body>

解绑事件

解绑HTML元素

语法：element.Event Handlers = null

解绑DOM对象

语法：element.removeEventListener(type,lister,useCapture);

注意：涉及到解绑的时候function不能使用匿名函数；

代码讲解

<body>
    <input type="button" value="秋香" id="but1">
    <input type="button" value="唐伯虎" id="but2">

    <script>
        //获取事件源
        var but1 = document.getElementById('but1');
        var but2 = document.getElementById('but2');
        //绑定HTML元素
        but1.onclick = function () {
            console.log('你点了秋香');
        }
        //绑定DOM对象
        function fn() {
            console.log('你点了唐伯虎');
        };
        but2.addEventListener('click', fn);
        //解绑HTML元素
        but1.onclick=null;
        //解绑DOM对象
        but2.removeEventListener('click', fn);

    </script>

</body>

“玫瑰无原则 ”

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
DOM事件概念以及绑定事件解绑事件（含代码解析）

目录什么是事件？事件三要素事件的执行步骤代码讲解事件对象概念实例高级事件绑定事件绑定HTML元素绑定DOM对象代码讲解解绑事件解绑HTML元素解绑DOM对象代码讲解什么是事件？ HTML 事件是发生在 HTML 元素上的事情。例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件，在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。...
复制链接

扫一扫