学习第八天（2019-11-21）

Posted 2020-11-22 xiaoxb17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习第八天（2019-11-21）相关的知识，希望对你有一定的参考价值。

第13章事件

javascript与 html之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

一、事件流

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

事件流分事件冒泡流、事件捕获流、DOM事件流，建议使用事件冒泡流。

二、事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此 click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种：

1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
4、IE事件处理程序

下面是跨浏览器的事件处理器代码：

1 <html>
2   <head>
3   </head>
4   <body>
5      <input type = "button" id = "myBtn" value="Click Me">
6      <script type="text/javascript" src="myscript.js"></script>
7   </body>
8 </html>

//myscript.js
var EventUtil = {
    addHandler: function(element,type,handler){
        if(element.addEventListener){ //DOM2级方法
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){ //IE方法
            element.attachEvent("on"+type,handler);
        }else{ //DOM0级方法
            element["on"+type]=handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    }
};

var btn = document.getElementById("myBtn");
var handler1 = function(){
   alert(this.id);
}
var handler2 = function(){
   alert("hello world!");
}
//btn.addEventListener("click",handler1,false);
//btn.addEventListener("click",handler2,false);
//btn.removeEventListener("click",handler2,false);
EventUtil.addHandler(btn,"click",handler1);
EventUtil.addHandler(btn,"click",handler2);
EventUtil.removeHandler(btn,"click",handler2);

三、事件对象

在触发DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

在DOM和IE中的event对象有所不同，不过可以基于它们之间的相似性依给出跨浏览器的方案来。

下面是代码：

可以对前面的EventUtil对象加以增强，添加了一些方法。

 1 var EventUtil = {
 2     addHandler: function(element,type,handler){
 3         if(element.addEventListener){
 4             element.addEventListener(type,handler,false);
 5         }else if(element.attachEvent){
 6             element.attachEvent("on"+type,handler);
 7         }else{
 8             element["on"+type]=handler;
 9         }
10     },
11     removeHandler: function(element,type,handler){
12         if(element.removeEventListener){
13             element.removeEventListene(type,handler,false);
14         }else if(element.detachEvent){
15             element.detachEvent("on"+type,handler);
16         }else{
17             element["on"+type] = null;
18         }
19     },
20     getEvent : function(event){
21         return event ? event : window.event;
22     },
23     getTarget:function(event){
24         return event.target||event.srcElement;
25     },
26     preventDefault:function(event){
27         if(event.preventDefault){
28             event.preventDefault();
29         }else{
30             event.returnValue=false;
31         }
32     },
33     stopPropagation:function(event){
34         if(event.stopPropagation){
35             event.stopPropagation();
36         }else{
37             event.cancelBubble=true;
38         }
39     }
40 };
41 
42 var btn = document.getElementById("myBtn");
43 
44 btn.onclick = function(event){
45     alert("Clicked");
46     event = EventUtil.getEvent(event); //跨浏览器获取事件
47     var target = EventUtil.getTarget(event); //返回事件的目标
48     alert(target===document.body); //false
49     alert(target===this); //true
50     EventUtil.preventDefault(event); //取消事件的默认行为
51     EventUtil.stopPropagation(event);//取消事件冒泡
52 }

四、事件类型

Web浏览器中可能发生的事件有很多类型。如上面所述，不同的事件类型具有不同的信息，而“DOM3 级事件”规定了以下几类事件：

1、UI事件，当用户与页面上的元素交互时触发；
2、焦点事件，当元素获得或失去焦点时触发；
3、鼠标事件，当用户通过鼠标在页面上执行操作时触发；
4、滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
5、文本事件，当在文档中输入文本时触发；
6、键盘事件，当用户通过键盘在页面上执行操作时触发；
7、合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
8、变动（mutation）事件，当底层 DOM结构发生变化时触发。

除此之外，HTML5也定义了一组事件，而有些浏览器还会在 DOM和 BOM中实现其他专有事件。这些专有的事件一般都是根据开发人员需求定制的，没有什么规范，因此不同浏览器的实现有可能不一致。

五、内存和性能

在 JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的 DOM访问次数，会延迟整个页面的交互就绪时间。

1、事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。

以下面的HTML代码为例

1 <ul id = "myLinks">
2     <li id = "goSomewhere">Go somewhere</li>
3     <li id = "doSomething">Do something</li>
4     <li id = "sayHi">Say hi</li>
5 </ul>
6 <script type="text/javascript" src="myscript.js"></script>

按照传统的做法，需要为它们添加3个事件处理程序，而使用事件委托，只需在DOM树中尽量高的层次上添加一个事件处理程序，这种技术需要占用的内存更少，性能更好，代码如下：

 1 var list = document.getElementById("myLinks");
 2 
 3 EventUtil.addHandler(list,"click",function(event){
 4     event = EventUtil.getEvent(event);
 5     var target = EventUtil.getTarget(event);
 6     switch(target.id){
 7         case "doSomething":
 8             document.title="I changed the document‘s title";
 9             break;
10         case "goSomewhere":
11             location.href="http://www.wrox.com";
12             break;
13         case "sayHi":
14             alert("hi");
15             break;
16     }
17 });

2、移除事件处理程序

在不需要的时候移除事件处理程序也能提高页面的性能。内存中留有那些过时不用的“空事件处理程序”，也是造成 Web 应用程序内存与性能问题的主要原因。

在两种情况下，可能会造成上面的问题:

a、第一种情况就是从文档中移除带有事件处理程序的元素时。

b、卸载页面的时候，如果在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。一般来说，好的做法是在页面卸载之前，先通过 onunload 事件处理程序移除所有事件处理程序。

六、模拟事件

事件经常由用户操作或通过其他浏览器功能来触发。使用 JavaScript 也可以在任意时刻来触发特定的事件，而此时的事件就如同浏览器创建的事件一样。也就是说，这些事件该冒泡还会冒泡，而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序。

在测试 Web 应用程序，模拟触发事件是一种极其有用的技术。DOM2 级规范为此规定了模拟特定事件的方式，IE9、Opera、Firefox、Chrome和 Safari都支持这种方式。IE有它自己模拟事件的方式。

以上是关于学习第八天（2019-11-21）的主要内容，如果未能解决你的问题，请参考以下文章