JavaScript全解析——DOM事件(上)

myzbx 2025-01-10 15:41 106 浏览

DOM 事件

●是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作）
●一个事件由哪几部分组成
○触发谁的事件：事件源
○触发什么事件：事件类型
○触发以后做什么：事件处理函数（事件处理程序）

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

●我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

●当我们点击 div 的时候，就会执行事件处理函数内部的代码
●每点击一次，就会执行一次事件处理函数

事件绑定和事件解绑

事件绑定

●事件绑定有DOM 0级和DOM 2级
●没有DOM 1级
○DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型
DOM 0级事件绑定
●我们现在给一个注册事件都是使用 onxxx 的方式
●但是这个方式不是很好，只能给一个事件源的同一个事件类型, 只能绑定一个事件处理函数
●一旦写了第二个事件，那么第一个就被覆盖了
●语法：事件源.onclick = 事件处理程序（事件处理函数）

oDiv.onclick = function () {
  console.log('我是第一个事件')
}

oDiv.onclick = function () {
  console.log('我是第二个事件')
}

●当你点击的时候，只会执行第二个，第一个就没有了

DOM 2级事件绑定事件监听

标准浏览器
●使用 addEventListener 的方式添加。addEventListener : 非 IE 7 8 下使用
●语法：元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)
●可以给同一个事件源的同一个事件类型绑定多个事件处理函数

oDiv.addEventListener('click', function () {
  console.log('我是第一个事件')
}, false)

oDiv.addEventListener('click', function () {
  console.log('我是第二个事件')
}, false)

●当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
●先打印我是第一个事件再打印我是第二个事件
●注意：事件类型的时候不要写 on，点击事件就是 click，不是 onclick

IE低版本浏览器

●attachEvent ：IE 7 8 下使用
●语法：元素.attachEvent('事件类型'，事件处理函数)
●可以给同一个事件源的同一个事件类型绑定多个事件处理函数

oDiv.attachEvent('onclick', function () {
  console.log('我是第一个事件')
})

oDiv.attachEvent('onclick', function () {
  console.log('我是第二个事件')
})

●当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
●先打印我是第二个事件再打印我是第一个事件
●注意：事件类型的时候要写 on，点击事件就行 onclick
两个方式的区别
●注册事件的时候事件类型参数的书写
○addEventListener ：不用写 on
○attachEvent ：要写 on
●参数个数
○addEventListener ：一般是三个常用参数
○attachEvent ：两个参数
●执行顺序
○addEventListener ：顺序注册，顺序执行
○attachEvent ：顺序注册，倒叙执行
●适用浏览器
○addEventListener ：非 IE 7 8 的浏览器
○attachEvent ： IE 7 8 浏览器

事件解绑

DOM 0级事件解绑

●语法：事件源.on事件类型 = null
●因为赋值符号, 当你给这个事件类型赋值为 null 的时候，会把本身的事件处理函数覆盖
●当你再次触发行为的时候, 没有事件处理函数执行，相当于解绑了事

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <button>事件解绑</button>

    <div></div>

    <script>
        // 0. 获取元素
        var div = document.getElementsByTagName('div')[0]
        var btn = document.getElementsByTagName('button')[0]

        // 1. DOM 0级 绑定事件
        div.onclick = function() {
            console.log('你好 世界')
        }

        btn.onclick = function() {
            console.log('在这里操作解绑 div 的事件')

            // 1. DOM 0级 事件解绑
            div.onclick = null

            console.log('解绑事件的代码执行完毕了')
        }
    </script>
</body>

</html>

DOM 2级事件解绑

标准浏览器
●语法：事件源.removeEventListener('事件类型', 事件处理函数)
●注意：
○当你使用 DOM 2级事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候
○需要把函数单独书写出来, 以函数名的形式进行绑定和解绑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <button>事件解绑</button>

    <div></div>

    <script>
        // 0. 获取元素
        var div = document.getElementsByTagName('div')[0]
        var btn = document.getElementsByTagName('button')[0]

        //  DOM 2级 事件 标准浏览器
        function a() {
            console.log('我是事件处理函数')
        }
        div.addEventListener('click', a)

        btn.onclick = function() {
            console.log('在这里操作解绑 div 的事件')

            // 2. DOM 2级 事件解绑 - 标准浏览器
            //事件源.removeEventListener('事件类型', 事件处理函数)
            div.removeEventListener('click', a)

            console.log('解绑事件的代码执行完毕了')
        }
    </script>
</body>

</html>

IE低版本浏览器

●语法：事件源.detachEvent('on事件类型', 事件处理函数)
●注意：
○当你使用 DOM 2级事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候
○需要把函数单独书写出来, 以函数名的形式进行绑定和解绑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <button>事件解绑</button>

    <div></div>

    <script>
        // 0. 获取元素
        var div = document.getElementsByTagName('div')[0]
        var btn = document.getElementsByTagName('button')[0]

        // DOM 2级 事件 IE 低版本
        function b() {
            console.log('IE 的事件处理函数')
        }
        div.attachEvent('onclick', b)

        btn.onclick = function() {
            console.log('在这里操作解绑 div 的事件')

            //DOM 2级 事件解绑 - IE 低版本
            div.detachEvent('onclick', b)

            console.log('解绑事件的代码执行完毕了')
        }
    </script>
</body>

</html>

HTML 事件

上一篇：了解JavaScript事件注册的几种方式
下一篇：探索 JavaScript 的事件循环与任务队列，区分宏任务与微任务

JavaScript全解析——DOM事件(上)

DOM 事件

事件绑定和事件解绑

事件绑定

DOM 2级事件绑定事件监听

事件解绑

DOM 0级事件解绑

DOM 2级事件解绑

IE低版本浏览器

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

comfyui安装MimicMotion扩展，AI跳舞动作模仿

JavaScript全解析——DOM事件(上)

DOM 事件

事件绑定和事件解绑

事件绑定

DOM 2级事件绑定 事件监听

事件解绑

DOM 0级事件解绑

DOM 2级事件解绑

IE低版本浏览器

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

comfyui安装MimicMotion扩展，AI跳舞动作模仿

DOM 2级事件绑定事件监听