• js中的事件

    需要了解事件的什么？

    对于事件来讲，首先，我们需要了解这样几个概念：事件；事件处理程序；事件类型；事件流；事件冒泡；事件捕获；事件对象；事件方面的性能优化（事件委托、移除事件处理程序）；常见的浏览器兼容问题。

    事件的概念

    事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。

    事件处理程序

    事件处理程序：我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。

    接下来我们用一段代码来再说明一下上面这两个抽象的概念，具体解释见代码注释：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <div id="main">理解事件的基本概念</div>
    9. </body>
    10. <script>
    11.     var main = document.getElementById('main');
    12.     // 此处click，点击，是一种事件的名称，是浏览器窗口中发生点击的瞬间。on这个单词，其实就是让click这个事件得以相应，因此，onclick就叫做事件处理程序。下面这段代码，我们通过处理程序(onclick)为main这个元素预定了点击(click)，这样在点击(click)发生的时候，执行函数中的代码(弹出一个对话框)。
    13.     main.onclick = function(){
    14.         alert('点击了此处哦！');
    15.     }
    16. </script>
    17. </html>

    关于事件处理程序，从最初的发展到现在，经历了几次的变化。

    事件处理程序的名字是以“on”开头，因此click事件的处理程序就是onclick。在最初，是使用HTML事件处理程序的，也就是说，某个元素（如div），支持的每一种事件，都可以使用一个与相应事件处理程序同名的HTML特性来制定（也就是标签的一个属性），这个特性的值就是能够执行的JavaScript代码。例如：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <p onclick="alert('click')">HTML事件处理程序</p>
    9. </body>
    10. </html>

    当然，我们也可以再onclick=””当中进行函数的调用。

    但是，无论哪种方法，都暴露出来HTML事件处理程序的很多问题：

    1. 首先，HTML代码域JavaScript代码紧密的耦合在一起，没有实现相互分离，在进行代码的更新与维护的时候就显得异常困难。
    2. 第二，扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。
    3. 第三，如果不采用调用函数的方式，而是像例子中那样直接书写代码，那么代码的通用性很差，会使得整站的代码量很大，通用性差。如果提取出来，存放在函数当中，那么，会面临另一个问题——当函数还没有被定义，只是HTML、CSS代码加载完毕，用户进行点击，会完全没有反应。

    基于上面的这些问题，人们逐渐的去完善了事件处理程序，此时出现了DOM0级事件处理程序。（第四代WEB浏览器中出现）

    DOM0级事件处理程序是什么样子的呢？其实它就是我们平时最为常用的事件绑定，如下面这个例子：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <p id='btn'>DOM0级事件处理程序</p>
    9. </body>
    10. <script>
    11.     var btn = document.getElementById('btn');
    12.     btn.onclick = function(){
    13.         alert(this.innerHTML);
    14.     }
    15. </script>
    16. </html>

    在DOM0级事件处理程序推出之后，广为各个用户的使用，但是，却出现了这样一个问题，当我希望为同一个元素/标签绑定多个同类型事件的时候（如，为上面的这个p标签绑定3个点击事件），是不被允许的。那么，此时，出现了另一种事件处理程序，就是DOM2级的事件处理程序，在DOM2级当中，定义了两个基本方法，用于处理指定（即绑定）和删除事件处理程序的操作，分别是addEventListener()和removeEventListener()，IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。对于IE8-，则使用的是IE专有的事件处理程序：两个类似的方法——attachEvent()与detachEvent()。

    具体实例代码如下：（以addEventListener为例，给出了两种书写方式）

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <p id='btn'>DOM0级事件处理程序</p>
    9. </body>
    10. <script>
    11.     var btn = document.getElementById('btn');
    12.     btn.addEventListener("click", test, false);
    13.     function test(){
    14.         alert(this.innerHTML);
    15.     }
    16. </script>
    17. </html>
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <p id='btn'>DOM0级事件处理程序</p>
    9. </body>
    10. <script>
    11.     var btn = document.getElementById('btn');
    12.     btn.addEventListener("click", function(){
    13.         alert(this.innerHTML);        
    14.     }, false);
    15. </script>
    16. </html>

    addEventListener()和removeEventListener()中的第三个参数，表示的是在哪个事件阶段进行事件处理，如果是false，则指的是冒泡阶段；如果是true，则指的是捕获阶段。

    在事件方面，IE与FF存在着一系列的兼容问题，具体问题可查看博文《IE浏览器与FF火狐浏览器在事件上的兼容问题》

    关于如何创建一个兼容全部浏览器的事件侦听器，我们在下一篇博文《跨浏览器的事件处理函数——处理DOM2级事件兼容 》当中再做详细的介绍和代码示范。

    事件类型

    之前在课程的讲解当中，我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分：

    1. UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
    2. 焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
    3. 鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。
    4. 滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
    5. 文本事件：textInput，在文档中输入文本触发。
    6. 键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。
    7. 合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
    8. 变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
    9. 变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！

    对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。

    事件流

    事件流：描述的是从页面中接收事件的顺序。

    IE与原来的NetScape(网景)，对于事件流提出的是完全不同的顺序。IE团队提出的是事件冒泡流；NetScape的事件流是事件捕获流。

    事件冒泡

    事件冒泡：表示的是，事件开始的时候由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

    事件捕获

    事件捕获：表示的是，事件开始的时候由最不具体的节点接收，然后逐级向下传播到最具体的节点。

    来看一个实例：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <div id="main">
    9.         <p>理解事件的基本概念</p>
    10.     </div>
    11. </body>
    12. </html>

    如果单击了p标签，那么，如果是事件冒泡流的事件流机制，则click事件将按照如下顺序进行执行：p —— div —— body —— html —— document。

    如果采用捕获流的事件流机制，则click事件的执行顺序为：document —— html —— body —— div —— p

    对于冒泡流的事件流机制，存在如下的兼容问题：

    1. <=IE5.5     p -> div -> body -> document
    2. >=IE6.0        p -> div -> body -> html ->　document
    3. >=Mozilla 1.0    p -> div -> body -> html ->　document -> window

    欢迎大家互相学习交流。独行冰海

    事件对象

    事件对象：在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。我们书写如下基本代码：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6. </head>
    7. <body>
    8.     <div id="main">理解事件的基本概念</div>
    9. </body>
    10. <script>
    11.     var main = document.getElementById('main');
    12.     main.onclick = function(event){
    13.         console.log(event);
    14.     }
    15. </script>
    16. </html>

    使用console.log打印出的结果如下图。

    JavaScript事件 详细讲解 - 独行冰海 - 独行冰海
     

    其中有两个信息，我们最为常用，分别是type和target。

    type表示的是被触发事件的类型；

    target表示的是事件的目标。

    其他信息，如：

    1. bubbles：表示事件是否冒泡
    2. cancelable：表示是否可以取消事件的默认行为
    3. currentTarget：表示事件处理程序当前正在处理事件的那个元素
    4. defaultPrevented：表示是否调用了preventDefault()
    5. detail：表示的是与事件相关的细节信息
    6. eventPhase：调用事件处理处理程序的阶段：1表示捕获阶段、2表示处于目标、3表示冒泡阶段

    在其中还有一些其他信息，在此就不再一一列举了。

    事件方面性能优化

    谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除

    在JavaScript代码当中，添加到页面中的事件越多，页面的性能也就越差。导致这一问题的原因主要有：

    1. 每个函数都是对象，都会占用内存。内存中对象越多，性能也就越差。
    2. 必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

    为了进行页面的性能优化，因此我们会采用两种方法，就是上面提到的——事件委托和事件处理程序的移除。

    事件委托

    很多人问我，什么时候使用事件委托，其实，简单来说，当时一个页面事件处理程序比较多的时候，我们通常情况下会使用它。

    事件委托主要利用了事件冒泡，只指定一个事件处理程序，就可以管理一个类型的所有事件。例如：我们为整个一个页面制定一个onclick事件处理程序，此时我们不必为页面中每个可点击的元素单独设置事件处理程序（onclick）。还是，看一个例子。

    效果：点击不同的元素执行不同的操作。不使用事件委托：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6.     <style>
    7.         *{margin: 0;padding: 0;}
    8.         .control span{
    9.             float: left;
    10.              50px;
    11.             height: 50px;
    12.             line-height: 50px;
    13.             font-size: 32px;
    14.             text-align: center;
    15.             border: 1px solid #f00;
    16.         }
    17.     </style>
    18. </head>
    19. <body>
    20.     <div class='control'>
    21.         <span id='left'>左</span>
    22.         <span id='first'>1</span>
    23.         <span id='second'>2</span>
    24.         <span id='third'>3</span>
    25.         <span id='right'>右</span>
    26.     </div>
    27. </body>
    28. <script>
    29.     var left = document.getElementById('left');
    30.     var first = document.getElementById('first');
    31.     var second = document.getElementById('second');
    32.     var third = document.getElementById('third');
    33.     var right = document.getElementById('right');
    35.     left.addEventListener("click", function(){
    36.         alert('点击的是左这个字，执行相关操作');        
    37.     }, false);
    38.     first.addEventListener("click", function(){
    39.         alert('要执行第一个序号对应的相关操作');        
    40.     }, false);
    41.     second.addEventListener("click", function(){
    42.         alert('要执行第二个序号对应的相关操作');        
    43.     }, false);
    44.     third.addEventListener("click", function(){
    45.         alert('要执行第三个序号对应的相关操作');        
    46.     }, false);
    47.     right.addEventListener("click", function(){
    48.         alert('点击的是右这个字，执行相关操作');        
    49.     }, false);
    50. </script>
    51. </html>

    不难看出，我们使用了5个事件侦听器，每设置一个就需要绑定一个。

    使用事件委托：

    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件-独行冰海</title>
    6.     <style>
    7.         *{margin: 0;padding: 0;}
    8.         .control span{
    9.             float: left;
    10.              50px;
    11.             height: 50px;
    12.             line-height: 50px;
    13.             font-size: 32px;
    14.             text-align: center;
    15.             border: 1px solid #f00;
    16.         }
    17.     </style>
    18. </head>
    19. <body>
    20.     <div class='control' id='control'>
    21.         <span id='left'>左</span>
    22.         <span id='first'>1</span>
    23.         <span id='second'>2</span>
    24.         <span id='third'>3</span>
    25.         <span id='right'>右</span>
    26.     </div>
    27. </body>
    28. <script>
    29.     var control = document.getElementById('control');
    31.     control.addEventListener("click", function(e){
    32.         // 注意，此处没有考虑IE8-的浏览器，如果想书写兼容全部浏览器的事件处理程序，请查看下一篇博文
    33.         var target = e.target;
    34.         // 在此使用的是switch语句，也可以采用if进行判断
    35.         switch(target.id){
    36.             case "left" : {
    37.                 alert('点击的是左这个字，执行相关操作');
    38.                 break;
    39.             }
    41.             case "first" : {
    42.                 alert('要执行第一个序号对应的相关操作');
    43.                 break;
    44.             }
    46.             case "second" : {
    47.                 alert('要执行第二个序号对应的相关操作');
    48.                 break;
    49.             }
    51.             case "third" : {
    52.                 alert('要执行第三个序号对应的相关操作');
    53.                 break;
    54.             }
    55.             
    56.             case "right" : {
    57.                 alert('点击的是右这个字，执行相关操作');
    58.                 break;
    59.             }
    60.         }
    61.     }, false);
    62. </script>
    63. </html>

    简要的总结一下所谓的事件委托：给元素的父级或者祖级，甚至页面绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。其优势在于：

    1. 大大减少了事件处理程序的数量，在页面中设置事件处理程序的时间就更少了（DOM引用减少——也就是上面我们通过id去获取标签，所需要的查找操作以及DOM引用也就更少了）。
    2. document（注：上面的例子没有绑定在document上，而是绑定到了父级的div上，最为推荐的是绑定在document上）对象可以很快的访问到，而且可以在页面生命周期的任何时点上为它添加事件处理程序，并不需要等待DOMContentLoaded或者load事件。换句话说，只要可单击的元素在页面中呈现出来了，那么它就立刻具备了相应的功能。
    3. 整个页面占用的内存空间会更少，从而提升了整体的性能。

    移除事件处理程序

    每当将一个事件处理程序指定给一个元素时，在运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。连接数量也直接影响着页面的执行速度。所以，当内存中存在着过时的“空事件处理程序”的时候，就会造成Web应用程序的内存和性能问题。

    那么什么时候会造成“空事件处理程序”的出现呢？

    1. 文档中元素存在事件，通过一些DOM节点操作（removeChild、replaceChild等方法），移除了这个元素，但是DOM节点的事件没有被移除。
    2. innerHTML去替换页面中的某一部分，页面中原来的部分存在事件，没有移除。
    3. 页面卸载引起的事件处理程序在内存中的滞留。

    解决方法：

    1. 合理利用事件委托；
    2. 在执行相关操作的时候，先移除掉事件，再移除DOM节点；
    3. 在页面卸载之前，先通过onunload事件移除掉所有事件处理程序。

    转自：

    http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201311735325175/
  • 相关阅读:
    Python实现归并排序
    zip解决杨辉三角问题
    Python中协程、多线程、多进程、GIL锁
    Python copy(), deepcopy()
    Python collections的使用
    javascript中的类
    python3中的zip函数
    三数之和（Python and C++解法）
    两数之和（Python and C++解法）
    Python中list、dict、set、tuple的用法细节区别
  • 原文地址：https://www.cnblogs.com/fatfatdachao/p/4735085.html
Copyright © 2020-2023  润新知