DOM事件（上）

超、凢脫俗 2023-09-27 19:46 13阅读 0赞

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

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 的时候，就会执行事件处理函数内部的代码  
●每点击一次，就会执行一次事件处理函数

#### [事件绑定和事件解绑][Link 1] ####

[事件绑定][Link 2]

●事件绑定有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级事件绑定 事件监听][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 浏览器

#### [事件解绑][Link 3] ####

[DOM 0级事件解绑][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级事件解绑][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低版本浏览器][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>

[Link 1]: http://tuwen.1000phone.net/details?id=NjE3MA==#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%92%8C%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91
[Link 2]: http://tuwen.1000phone.net/details?id=NjE3MA==#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A
[DOM 2_]: http://tuwen.1000phone.net/details?id=NjE3MA==#DOM%202%E7%BA%A7%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%20%20%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC
[Link 3]: http://tuwen.1000phone.net/details?id=NjE3MA==#%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91
[DOM 0]: http://tuwen.1000phone.net/details?id=NjE3MA==#DOM%200%E7%BA%A7%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91
[DOM 2]: http://tuwen.1000phone.net/details?id=NjE3MA==#DOM%202%E7%BA%A7%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91
[IE]: http://tuwen.1000phone.net/details?id=NjE3MA==#IE%E4%BD%8E%E7%89%88%E6%9C%AC%E6%B5%8F%E8%A7%88%E5%99%A8