JavaScript全解析——DOM事件（上）

来源：千锋教育

发布人：lxl

时间： 2023-05-12 11:35:31

　　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>