likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 72

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>
转载自:https://juejin.cn/post/7236549738010673213
评论
请登录