DOM高级事件

文章目录

一.注册事件(绑定事件)

1.注册事件概述
给元素添加事件称为注册事件或绑定事件
注册事件有俩种方式：传统方式和方法监听注册方式

他俩的区别

传统注册方式

利用的on开头事件onclick
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener() 它是一个方法
IE9之前的IF不支持方法，可以使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器(这里的监听器是指function)
按注册顺序依次执行

2.addEventListener事件监听方式

evenTarget.addEventListener(type，listener[，useCapture])

evenTarget.addEventListener() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接受三个参数

type:事件类型字符串，比如click、mouseover，注意这里不带on的
listener：事件处理函数。事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流，在来进一步学习

代码演示

<body>
    <button>传统注册方式</button>
    <button>方法监听注册事件</button>
    <script>
        var bus = document.querySelectorAll('button')
            // 1.传统的注册事件  传统的后面会把前面的给覆盖掉
        bus[0].onclick = function() {
            alert(11)
        }
        bus[0].onclick = function() {
                alert(22)
            }
            // 2.事件监听注册事件 addEventListener 
            // （1）里面的事件类型是字符串的，必须加引号 是不带on的
            // （2）同一个元素同一个事件可以添加多个监听事件 不会覆盖
        bus[1].addEventListener('click', function() {
            alert(11)
        })
        bus[1].addEventListener('click', function() {
            alert(22)
        })
    </script>
</body>

二.删除事件(解绑事件)

1.删除事件的方式

传统注册方式删除

扫描二维码关注公众号，回复： 12699897 查看本文章

eventTarget.onclick = null;

方法监听注册方式删除

eventTarget.removeEventListener(type,listener[,useCapture]);

代码演示

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var dis = document.querySelectorAll('div');
        dis[0].onclick = function() {
                alert('被点击了')
                    // 1.传统方式删除事件
                dis[0].onclick = null
            }
            // 2.removeEventListener 删除事件 我们删除事件的时候要知道删除的是那个函数所以我们添加函数的时候要用到单独声明函数 在把函数名写在里面去 移除的时候移除函数名即可
        dis[1].addEventListener('click', fn) //里面的fn是不需要加上小括号的

        function fn() {
            alert('被点击了')
            dis[1].removeEventListener('click', fn)
        }
    </script>
</body>

三.DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给div一个注册了点击事件：
1.铺获阶段
2.当前目标阶段
2.冒泡阶段

在这里插入图片描述

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕
获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理
程序。捕获阶段是从文档到目标的冒泡阶段是从目标到文档的
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

代码演示

    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

在这里插入图片描述

四.事件对象

1.什么是事件对象

event对象代表事件的状态，比如键盘的状态，鼠标的位置，鼠标按钮的状态等待
简单理解为：事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是事件对象event，他有很多属性和方法

eventTarget.onclick = function(evevt ){}
eventTarget.addEventListener('click'，function( evevt) {} )

代码演示：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>事件对象</div>
    <script>
        var div = document.querySelector('div')
            // 可以也有传统法式设置对象 
            // div.onclick = function(event) {
            //         console.log(event);
            //     }
            // 也可以用监听方法
        div.addEventListener('click', function(event) {
                console.log(event);
            })
            // 注意点
            // 1.event 就是一个事件对象 写到我们侦听函数的 小括号里面，当形参来看
            // 2.事件对象只有 有了事件才会存在的，它是系统给我们自动创建的，不需要我们传递参数
            // 3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标相关的信息，鼠标的坐标等待，再比如键盘事件里面包含了键盘那些信息，判断用户按下了那个键
            // 4.这个事件对象我们可以自己命名 比如event、evt 、e
            // 5.事件对象也有兼容性问题 ie678 通过window.event 兼容性的写法 e = e || window.evevt;
    </script>

在这里插入图片描述
2.事件对象常用的属性和方法

代码演示

   <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div')
        div.addEventListener('click', function(event) {
            //  e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
            // 他俩的区别e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件 那么就返回谁 比如我们绑定的是ul 那么你点击的是小li 他返回的是ul 而不是li
            console.log(event.target);
            console.log(this);
        })
    </script>

在这里插入图片描述
事件对象组织默认行为

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub" id="">
    </form>
    <script>
        // 1.返回事件类型 type
        var div = document.querySelector('div');
        div.addEventListener('click', fn)

        function fn(e) {
            console.log(e.type);
        }
        // 2.让链接不跳转，或者让提交按钮不提交preventDefault()
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault() //dom 标准写法 ie低版本浏览器不支持因为使用到了addEventListener  我们可以用传统的注册方式
        })
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault() 方法
            // e.preventDefault()
            // 低版本浏览器 ie678 returnValue 属性
            // e.returnValue
            // 还有一种方法 return false 可以使用不要考虑兼容性 但是 在return后的代码就不会在执行了
        }
    </script>

五.阻止事件冒泡

1.阻止事件冒泡的俩种方式
事件冒泡：开始时有最具体的元素接收，然后遂级向上传播到DOM最顶层节点。
事件冒泡本身的特性：有好有坏

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法：IE 678 利用事件对象cancelBubble属性

e.cancelBubble=true

代码演示

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

六.事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

 <ul>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 <li>知否知否，应该有弹框在手</li>
 </ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就
会延长整个页面的交互就绪时间。

事件委托
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，
ul 有注册事件，就会触发事件监听器。
事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。
代码演示

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';


        })
    </script>
</body>

七.常用的鼠标事件

1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
 e.preventDefault();
 })

代码演示

<body>
    我们的征程是星辰大海
    <script>
        // 1.contextmenu 我们可以禁用右键菜单按钮
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault()
            })
            // 2.禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault()
        })
    </script>
</body>

3.鼠标事件对象

event 对象代表事件的状态，跟事件相关的一些列信息的集合。主要是鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

在这里插入图片描述
代码演示

    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1.client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            // 3.screen 鼠标在电脑屏幕的x和y坐标 简单了解即可
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

八.常用的键盘事件

1 常用键盘事件
事件除了使用鼠标触发，还可以使用键盘触发，注意给文档 document 添加键盘事件
在这里插入图片描述
注意：
1.如果使用addEvtListener 不需要加 on 如果传统的要加on
2.onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
3.三个事件的执行顺序是：keydown-keypress-keyup

代码演示

<body>
    <script>
        // 常用键盘事件
        // 1.keyup 按键弹起的时候触发
        document.addEventListener('keyup', function() {
                console.log('我弹起了');
            })
            // 2.keypress 按键按下的时候触发 不能识别功能键 比如ctrl shift 箭头等等
        document.addEventListener('keypress', function() {
                console.log('我按下了');
            })
            // 3.keydown 按键按下的时候触发 能识别功能键 比如ctrl shift 箭头等等
        document.addEventListener('keydown', function() {
            console.log('我按下了');
        })
    </script>
</body>

2.键盘事件对象
在这里插入图片描述

注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。在实际开发中更多的使用keydown和keyup，他能识别所有的键（包括功能键）keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCll值
代码演示

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
    </script>
</body>

3.键盘事件案例

1.模仿京东按键输入内容

代码演示

<body>
    <input type="text">
    <script>
        // 核心思路,检测用户是否按下了s键 如果按下了就把光标定到搜索框里面
        var ipt = document.querySelector('input')
        document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
            if (e.keyCode === 83) {
                ipt.focus(); //别忘记加小括号
            }
        })
    </script>
</body>

2.模仿京东快递单号查询案例

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        // 注意着里为什么不能用到keydown和keypress 因为他俩在文本框的特点：他们俩个事件触发的时候。文字还没有落入文本框中。就先执行代码了，而keyup 是把文字落入文本框中再去执行的代码
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                if (jd_input.value == '') {
                    con.style.display = 'none'
                } else {
                    con.innerHTML = jd_input.value
                    con.style.display = 'block'

                }
            })
            // 当我们失去焦点 ,就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none'
            })
            // 当我们获得焦点,就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            // con.style.display = 'block'
            if (this.value !== '') {
                con.style.display = 'block'

            }
        })
    </script>
</body>

文章目录

一.注册事件(绑定事件)

二.删除事件(解绑事件)

三.DOM事件流

四.事件对象

五.阻止事件冒泡

六.事件委托

七.常用的鼠标事件

八.常用的键盘事件

猜你喜欢