WebAPI之DOM事件操作详解

╰+攻爆jí腚メ 2023-02-12 11:29 327阅读 0赞

WebAPI之DOM事件

  • WebAPI之DOM事件
      1. 事件基础
      • 1.1 事件三要素
      • 1.2 执行事件的步骤
      1. 事件高级
      • 2.1 注册事件（2种方式）
      • 2.2 事件监听
      • 2.3 删除事件（解绑事件）
      • 2.4 DOM事件流
        • 2.4.1 事件流来源与介绍
        • 2.4.2 事件冒泡
        • 2.4.3 事件捕获
      • 2.5 事件对象
        • 2.5.1 事件对象的使用
        • 2.5.2 事件对象的属性和方法
        • 2.5.3 e.target 和 this 的区别
      • 2.6 阻止默认行为
      • 2.7 阻止事件冒泡
      • 2.8 事件委托
    • 3 鼠标事件
      • 3.1 常用鼠标事件
      • 3.2 鼠标事件对象与获取鼠标在页面中的坐标
    • 4 键盘事件
      • 4.1 键盘事件用法
      • 4.2 键盘事件对象
      • 4.3 案例：模拟京东按键输入内容

WebAPI之DOM事件

1. 事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。触发— 响应机制。

1.1 事件三要素

  • 事件源（谁）：触发事件的元素
  • 事件类型（什么事件）： 例如 click 点击事件

  • 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

    1. <script>
    2.     // 点击一个按钮，弹出对话框
    3.     // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
    4.     //(1) 事件源 事件被触发的对象 谁 按钮
    5.     var btn = document.getElementById('btn');
    6.     //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
    7.     //(3) 事件处理程序 通过一个函数赋值的方式 完成
    8.     btn.onclick = function() { 
    9.         alert('点秋香');
    10.     }

1.2 执行事件的步骤

  1. <div>123</div>
  2.     <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); } </script>

2. 事件高级

2.1 注册事件（2种方式）

  1. <body>
  2.     <button>传统注册事件</button>
  3.     <button>方法监听注册事件</button>
  4.     <button>ie9 attachEvent</button>
  5.     <script> var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件，只弹出最后一次注册的事件。 btns[0].onclick = function() { alert('hi'); } btns[0].onclick = function() { alert('hao a u'); } // 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序） btns[1].addEventListener('click', function() { alert(22); }) btns[1].addEventListener('click', function() { alert(33); }) // 3. attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function() { alert(11); }) </script>
  6. </body>

2.2 事件监听

1.事件监听用法如下：
在这里插入图片描述
2.代码见2.1注册事件代码部分。

2.3 删除事件（解绑事件）

  1. <body>
  2.     <div>1</div>
  3.     <div>2</div>
  4.     <div>3</div>
  5.     <script> var divs = document.querySelectorAll('div'); divs[0].onclick = function() { alert(11); // 1. 传统方式删除事件 divs[0].onclick = null; } // 2. removeEventListener 删除事件 divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号 function fn() { alert(22); divs[1].removeEventListener('click', fn); } // 3. detachEvent divs[2].attachEvent('onclick', fn1); function fn1() { alert(33); divs[2].detachEvent('onclick', fn1); } </script>
  6. </body>

2.4 DOM事件流

2.4.1 事件流来源与介绍

事件流的来源如下：

  1. 当时的2大浏览器霸主谁也不服谁！
  2. IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
  3. Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
  5. 江湖纷争，武林盟主也脑壳疼！！！
  7. 最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。
  8. 现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：

  • 捕获阶段
  • 当前目标阶段
  • 冒泡阶段

2.4.2 事件冒泡

  1. <div class="father">
  2.         <div class="son">son盒子</div>
  3.     </div>
  4.     <script>
  5.         // onclick 和 attachEvent（ie） 在冒泡阶段触发
  6.         // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
  7.         // son -> father ->body -> html -> document
  8.         var son = document.querySelector('.son');
  9.         // 给son注册单击事件
  10.         son.addEventListener('click', function() { 
  11.             alert('son');
  12.         }, false);
  13.         // 给father注册单击事件
  14.         var father = document.querySelector('.father');
  15.         father.addEventListener('click', function() { 
  16.             alert('father');
  17.         }, false);
  18.         // 给document注册单击事件，省略第3个参数
  19.         document.addEventListener('click', function() { 
  20.             alert('document');
  21.         })
  22.     </script>

2.4.3 事件捕获

  1. <div class="father">
  2.         <div class="son">son盒子</div>
  3.     </div>
  4.     <script>
  5.         // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
  6.         // document -> html -> body -> father -> son
  7.          var son = document.querySelector('.son');
  8.         // 给son注册单击事件，第3个参数为true
  9.          son.addEventListener('click', function() { 
  10.              alert('son');
  11.          }, true);
  12.          var father = document.querySelector('.father');
  13.         // 给father注册单击事件，第3个参数为true
  14.          father.addEventListener('click', function() { 
  15.              alert('father');
  16.          }, true);
  17.         // 给document注册单击事件，第3个参数为true
  18.         document.addEventListener('click', function() { 
  19.             alert('document');
  20.         }, true)
  21.     </script>

2.5 事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

  1. 谁绑定了这个事件。
  2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
  3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

2.5.1 事件对象的使用

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

2.5.2 事件对象的属性和方法

在这里插入图片描述

2.5.3 e.target 和 this 的区别

  • this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
  • e.target 是事件触发的元素。

常情况下target 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。

  1. <div>123</div>
  2.     <script>
  3.         var div = document.querySelector('div');
  4.         div.addEventListener('click', function(e) { 
  5.             // e.target 和 this指向的都是div
  6.             console.log(e.target);
  7.             console.log(this);
  9.         });
  10.     </script>

事件冒泡下的e.target和this：

  1. <ul>
  2.         <li>abc</li>
  3.         <li>abc</li>
  4.         <li>abc</li>
  5.     </ul>
  6.     <script>
  7.         var ul = document.querySelector('ul');
  8.         ul.addEventListener('click', function(e) { 
  9.               // 我们给ul 绑定了事件 那么this 就指向ul 
  10.               console.log(this); // ul
  12.               // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
  13.               console.log(e.target); // li
  14.         });
  15.     </script>

2.6 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转

  1. <a href="http://www.baidu.com">百度</a>
  2.     <script>
  3.         // 2. 阻止默认行为 让链接不跳转 
  4.         var a = document.querySelector('a');
  5.         a.addEventListener('click', function(e) { 
  6.              e.preventDefault(); // dom 标准写法
  7.         });
  8.         // 3. 传统的注册方式
  9.         a.onclick = function(e) { 
  10.             // 普通浏览器 e.preventDefault(); 方法
  11.             e.preventDefault();
  12.             // 低版本浏览器 ie678 returnValue 属性
  13.             e.returnValue = false;
  14.             // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
  15.             return false;
  16.         }
  17.     </script>

2.7 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

  1. <body>
  2.     <div class="father">
  3.         <div class="son">son儿子</div>
  4.     </div>
  5.     <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>
  6. </body>

2.8 事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

1.事件委托的原理：
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
2.事件委托的作用：
我们只操作了一次 DOM ，提高了程序的性能；动态新创建的子元素，也拥有事件。

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

3 鼠标事件

3.1 常用鼠标事件

在这里插入图片描述
禁止选中文字和禁止右键菜单：

  1. <body>
  2.     我是一段不愿意分享的文字
  3.     <script>
  4.         // 1. contextmenu 我们可以禁用右键菜单
  5.         document.addEventListener('contextmenu', function(e) { 
  6.                 e.preventDefault();
  7.         })
  8.         // 2. 禁止选中文字 selectstart
  9.         document.addEventListener('selectstart', function(e) { 
  10.             e.preventDefault();
  11.         })
  12.     </script>
  13. </body>

3.2 鼠标事件对象与获取鼠标在页面中的坐标

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  9.     <style> body { height: 3000px; } </style>
  10. </head>
  12. <body>
  13.     <script> // 鼠标事件对象 MouseEvent document.addEventListener('click', function(e) { // 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); }) </script>
  14. </body>
  16. </html>

4 键盘事件

4.1 键盘事件用法

  1. <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function() { // console.log('我弹起了'); // } document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4. 三个事件的执行顺序 keydown -- keypress -- keyup </script>

4.2 键盘事件对象

  1. <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>

4.3 案例：模拟京东按键输入内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  9.     <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>
  10. </head>
  12. <body>
  13.     <div class="search">
  14.         <div class="con">123</div>
  15.         <input type="text" placeholder="请输入您的快递单号" class="jd">
  16.     </div>
  17.     <script> // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） // 表单检测用户输入： 给表单添加键盘事件 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function() { // console.log('输入内容啦'); if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerText = this.value; } }) // 当我们失去焦点，就隐藏这个con盒子 jd_input.addEventListener('blur', function() { con.style.display = 'none'; }) // 当我们获得焦点，就显示这个con盒子 jd_input.addEventListener('focus', function() { if (this.value !== '') { con.style.display = 'block'; } }) </script>
  18. </body>

发表评论

表情：
评论列表 （有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

    相关 WebAPI-键盘事件

    概述 所谓键盘事件就是在按键被敲击时触发的一些事件，常见的键盘事件有：keyup（键盘抬起事件）、keydown（键盘按下事件）、keypress（键盘按下并抬起触发事件

    梦里梦外;梦里梦外;/ 0 赞/ 117 阅读

    相关 WebAPI-事件委托

    概述 事件委托（也叫事件代理）主要是用来解决后生成的子元素（动态添加的元素）的事件绑定问题，有动态创建进来的新元素不需要重新绑定事件。 实现原理：将事件绑定在已存在的父

    怼烎@怼烎@/ 0 赞/ 21 阅读

    相关 WebAPI-DOM事件流

    概述 js事件在触发时会在元素节点之间按照特定的顺序进行传播，这个传播的过程就是 DOM 事件流。 例如：给页面中的一个 button 按钮注册了点击事件并进行了点击，

    - 日理万妓- 日理万妓/ 0 赞/ 31 阅读

    相关 DOM操作与事件高级

    Web API之DOM Web-API API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力而又无需访问源码，或了解内部工

    朱雀朱雀/ 0 赞/ 280 阅读