• 【第五部分 | JS WebAPI】4：八千字详解 “事件·高级篇”

    目录

    | 概述

    | 注册事件的两种方式

    | 删除事件的两种方式

    | 事件对象【重要】

    事件对象简介和声明

    e.target 和 this 的区别

    [ 事件对象 的常用属性方法 ]

    | Dom事件流

    什么是Dom事件流？

    阻止默认行为

    阻止事件冒泡

    利用事件冒泡进行事件委托

    | 常用的鼠标和键盘事件 & 事件对象

    1-1 鼠标基本事件

    1-2 鼠标事件对象：禁用鼠标右键和选中

    1-2 鼠标基本事件：返回鼠标坐标

    1-3 案例：图片跟随鼠标

    2-1 键盘基本事件

    2-2 键盘事件对象：获取ASCII值

    2-3 案例：当我们按下 s 键， 光标就定位到搜索框

    2-3 案例：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容

    | 概述

    目标

    目录

     

    | 注册事件的两种方式

    • 给元素添加事件，称为注册事件或者绑定事件

    传统方式注册事件

    • 就是我们之前学的最原始的事件方式： 元素对象.onXXXX = function(){ //... }

    • 特点：所注册的事件有唯一性

    • 唯一性，即：同一个元素同一个事件只能设置一个处理函数，最 后注册的处理函数将会覆盖前面注册的处理函数

    监听方式注册事件（W3C标准 推荐使用）

    • addEventListener() 它是一个方法

    • IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替

    • 同一个元素，可以添加多个事件函数。且会同一个元素同一个事件可以注册多个监听器  按注册顺序依次执行

    语法

    eventTarget.addEventListener(type, listener[, useCapture])

     

    上述代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.  
    11.     
    12.     <button class="btn1">传统方法注册事件button>
    13.     <script>
    14.         var traditional = document.querySelector('.btn1');
    15.         traditional.onclick = function(){
    16.             alert('我是第一个弹窗');
    17.         }
    18.         traditional.onclick = function(){
    19.             alert('我是第二个弹窗'); //只弹出了这个，说明传统方法注册的事件有唯一性
    20.         }
    21.     script>
    22.  
    23.     
    24.     <button class="btn2">监听方法注册事件button>
    25.     <script>
    26.         var listener = document.querySelector('.btn2');
    27.         listener.addEventListener('click',function(){//注意：千万不要在click前面加on
    28.             alert('我是第一个弹窗'); //弹出
    29.         })
    30.         listener.addEventListener('click',function(){
    31.             alert('我是第二个弹窗'); //弹出  说明监听的事件不会覆盖之前的，而是按顺序执行
    32.         })
    33.     script>
    34. body>
    35. html>

    | 删除事件的两种方式

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 100px;
    11.             height: 100px;
    12.             background-color: pink;
    13.             margin: 10px ;
    14.             border: 1px solid black;
    15.         }
    16.  
    17.         span {
    18.             display: block;
    19.  
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: black;
    23.             margin: 10px;
    24.             border: 1px solid black;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <div>div>
    30.     <div>div>
    31.     <div>div>
    32.  
    33.     <span>span>
    34.     <span>span>
    35.  
    36.     <script>
    37.         // 传统方式删除事件：点击div第一次弹窗，之后就不弹了
    38.         var divs = document.getElementsByTagName('div');
    39.         for(var i=0 ; ilength ; i++) {
    40.             divs[i].onclick = function(){
    41.                 alert('这是一个弹窗');
    42.                 this.onclick = null;
    43.             }
    44.         }
    45.  
    46.         // 监听方式删除事件
    47.         var spans = document.getElementsByTagName('span');
    48.         for(var i=0 ; ilength ; i++){
    49.             //两个注意点：监听方式删除事件的removeEventListener不能写在匿名函数中。 监听事件方法的参数的函数调用不需要打括号。
    50.             spans[i].addEventListener('click',f);
    51.              function f(){
    52.                  alert('这是span窗口');
    53.                  this.removeEventListener('click',f);
    54.              }
    55.         }
    56.  
    57.         
    58.  
    59.     script>
    60. body>
    61. html>

     

    | 事件对象【重要】

    事件对象简介和声明

    事件对象是一个JS内置对象，不同的事件都有自己的事件对象，对象中包含了不同的属性、方法

    • event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看

    • 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数，我们只需要在事件响应函数的参数写上变量名表示事件对象即可

    • 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键

    • 这个事件对象我们可以自己命名 比如 event 、 evt、 e

    • 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;

    代码示例

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div>123div>
    20.     <script>
    21.         // 事件对象【再次强调：有了事件，才有事件对象！且不需要我们传实参进去。】
    22.         var div = document.querySelector('div');
    23.         div.onclick = function(e) {
    24.             console.log(e);
    25.             console.log(window.event);
    26.             console.log(e);
    27.         }
    28.  
    29.         div.addEventListener('click', function(e) {
    30.             console.log(e);
    31.  
    32.         })    
    33.     script>
    34. body>
    35.  
    36. html>

    e.target 和 this 的区别

    代码示例

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: pink;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div>123div>
    20.     <ul>
    21.         <li>abcli>
    22.         <li>abcli>
    23.         <li>abcli>
    24.     ul>
    25.     <script>
    26.         // 常见事件对象的属性和方法
    27.         // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
    28.         // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
    29.         var div = document.querySelector('div');
    30.         div.addEventListener('click', function(e) {
    31.             console.log(e.target);
    32.             console.log(this);
    33.  
    34.         })
    35.         var ul = document.querySelector('ul');
    36.         ul.addEventListener('click', function(e) {
    37.                 // 我们给ul 绑定了事件  那么this 就指向ul  
    38.                 console.log(this); //ul  绑定的事件 
    39.                 console.log(e.currentTarget);  //ul  绑定的事件（e.currentTarget 相当于 this）
    40.  
    41.                 // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
    42.                 console.log(e.target); //li  点击的对象
    43.  
    44.             })
    45.             // 了解兼容性
    46.             // div.onclick = function(e) {
    47.             //     e = e || window.event;
    48.             //     var target = e.target || e.srcElement;
    49.             //     console.log(target);
    50.  
    51.         // }
    52.         // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    53.     script>
    54. body>
    55.  
    56. html>

    [ 事件对象 的常用属性方法 ]

    | Dom事件流

    什么是Dom事件流？


    说人话，就是：如果listener第三个参数写的是true，则按照捕获顺序依次查看对应元素（document → html → body → ... → 当前元素对象）的监听方法，只要有一个执行了，就不会继续往下寻找；若第三个参数写的是false，则按照冒泡顺序一次查看对应元素（当前元素对象 → ... → body → html → document）。 一般情况下，参数可以不写，默认是false，即从当前对象开始寻找监听对象。

    阻止默认行为

    作用：禁用标签的默认行为。比如给标签 a 声明一个监听器：点击的时候让其无法跳转。则通过其 点击的事件对象 调用preventDefault()方法，禁用跳转

     

    阻止事件冒泡

    • 事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

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

    e 是“事件对象”，请参见本章的下一节

    利用事件冒泡进行事件委托

    说人话就是：不在每一条路都设置收费站，而是让不同道路上的车继续通行（冒泡），直到全部行驶到总道，在总道路上设置一个收费站即可

    代码示例（给父元素设置点击响应函数，让用户在点击父元素的子元素的时候，子元素背景色产生变化）

    需要纠正一个误区：拿下面这段代码举例而言：即使我们没有给div的子元素span添加点击事件click，但是我们点击子元素，仍然会触发这个事件！只不过我们没有给这个事件编写响应函数，我们看不到反应而已！ 根据冒泡原理，会继续向上冒泡到父元素div，由于我们给div写了点击事件的响应函数，因此我们会看到有变化发生。后续，由于我们没有阻止冒泡，因此这个事件会继续冒泡到body html document……但是我没有给它们编写响应函数，所以也没有任何反应

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 400px;
    11.             height: 100px;
    12.             background-color: pink;
    13.         }
    14.  
    15.         span {
    16.             display: block;
    17.             float: left;
    18.  
    19.             width: 150px; 
    20.             height: 80px;
    21.             background-color: yellow;
    22.             
    23.             margin: 10px 25px;
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <div>
    29.         <span>1span>
    30.         <span>2span>
    31.     div>
    32.  
    33.     <script>
    34.         var div = document.querySelector('div');
    35.         div.addEventListener('click',function(e){
    36.             e.target.style.backgroundColor = 'blue';
    37.             //e.target代表触发事件的元素
    38.         })
    39.     script>
    40. body>
    41. html>

    | 常用的鼠标和键盘事件 & 事件对象

    1-1 鼠标基本事件

    1-2 鼠标事件对象：禁用鼠标右键和选中


    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 100px;
    11.             height: 100px;
    12.             background-color: pink;
    13.  
    14.             margin: 200px auto;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div>我是文本div>
    20.     <script>
    21.         //禁止鼠标右键菜单
    22.         document.addEventListener('contextmenu',function(e){
    23.             e.preventDefault(); //设置了这个之后，鼠标右键失效
    24.         })
    25.  
    26.         //禁止选中文本
    27.         var div = document.querySelector('div');
    28.         div.addEventListener('selectstart',function(e){
    29.             e.preventDefault(); //设置了这个之后，鼠标无法选中div的文本
    30.         })
    31.     script>
    32. body>
    33. html>

    1-2 鼠标基本事件：返回鼠标坐标

    1-3 案例：图片跟随鼠标

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         img {
    10.             display: block;
    11.             position: absolute;
    12.  
    13.             width: 100px;
    14.             height: 100px;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <img src="imgs/pic.png">
    20.     <script>
    21.         var pic = document.querySelector('img');
    22.         document.addEventListener('mousemove', function(e) {
    23.             var x = e.pageX;
    24.             var y = e.pageY;
    25.             pic.style.top =  y  + 'px';
    26.             pic.style.left = x + 'px';
    27.         })
    28.     script>
    29. body>
    30. html>

    2-1 键盘基本事件

    2-2 键盘事件对象：获取ASCII值


    2-3 案例：当我们按下 s 键， 光标就定位到搜索框

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.  
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.  
    15.         form {
    16.             display: block;
    17.             width: 300px;
    18.             height: 30px;
    19.             margin: 200px auto;
    20.         }
    21.  
    22.         form input {
    23.             width: 200px;
    24.             height: 30px;
    25.             background-color: lightcyan;
    26.         }
    27.  
    28.         form button {
    29.             width: 50px;
    30.             height: 30px;
    31.             background-color: lightblue;
    32.         }
    33.  
    34.     style>
    35. head>
    36. <body>
    37.     <form action="#">
    38.         <input type="text" name="search" placeholder="搜索">
    39.         <button>搜索button>
    40.     form>
    41.  
    42.     <script>
    43.         var search = document.querySelector('input');
    44.         document.addEventListener('keyup',function(e){
    45.             if(e.keyCode == 83){
    46.                 search.focus();
    47.             }
    48.         })
    49.     script>
    50.     
    51. body>
    52. html>

    2-3 案例：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         .search {
    16.             position: relative;
    17.             width: 178px;
    18.             margin: 100px;
    19.         }
    20.         
    21.         .con {
    22.             display: none;
    23.             position: absolute;
    24.             top: -40px;
    25.             width: 171px;
    26.             border: 1px solid rgba(0, 0, 0, .2);
    27.             box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    28.             padding: 5px 0;
    29.             font-size: 18px;
    30.             line-height: 20px;
    31.             color: #333;
    32.         }
    33.         
    34.         .con::before {
    35.             content: '';
    36.             width: 0;
    37.             height: 0;
    38.             position: absolute;
    39.             top: 28px;
    40.             left: 18px;
    41.             border: 8px solid #000;
    42.             border-style: solid dashed dashed;
    43.             border-color: #fff transparent transparent;
    44.         }
    45.     style>
    46. head>
    47.  
    48. <body>
    49.     <div class="search">
    50.         <div class="con">123div>
    51.         <input type="text" placeholder="请输入您的快递单号" class="jd">
    52.     div>
    53.     <script>
    54.         // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
    55.         // 表单检测用户输入： 给表单添加键盘事件
    56.         // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
    57.         // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
    58.         var con = document.querySelector('.con');
    59.         var jd_input = document.querySelector('.jd');
    60.         jd_input.addEventListener('keyup', function() {
    61.                 // console.log('输入内容啦');
    62.                 if (this.value == '') {
    63.                     con.style.display = 'none';
    64.                 } else {
    65.                     con.style.display = 'block';
    66.                     con.innerText = this.value;
    67.                 }
    68.             })
    69.             // 当我们失去焦点，就隐藏这个con盒子
    70.         jd_input.addEventListener('blur', function() {
    71.                 con.style.display = 'none';
    72.             })
    73.             // 当我们获得焦点，就显示这个con盒子
    74.         jd_input.addEventListener('focus', function() {
    75.             if (this.value !== '') {
    76.                 con.style.display = 'block';
    77.             }
    78.         })
    79.     script>
    80. body>

  • 相关阅读:
    Go 初识微信订阅号(测试号)
    这份阿里内部绝密Java面试八股文手册 谁还没有
    java集合练习，模拟扑克牌发牌。打印最后每个玩家的手牌信息。地主用随机数生成。
    阿里云混合云密码应用分析
    大数据与Hadoop入门理论
    docker高级篇（大厂进阶）：安装redis集群
    duilib 实现登录界面 之 样式设计
    【C语言深入理解指针（3）】
    python文件中设置环境变量
    【限免】杂波环境下线性调频脉冲、巴克码、频率步进脉冲雷达MTI、脉冲压缩【附MATLAB代码】
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/127981458