js事件

亦凉 2022-09-26 13:55 306阅读 0赞

1.1 事件：一般是用于浏览器和用户操作进行交互。也就是说javascript和html之间的交互是通过事件实现的

1.2 事件流：事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

1.3 事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点  ，从里往外逐个触发（IE事件流就是事件冒泡）

1.4 事件捕获：由不具体的节点先接收事件，具体的节点应该最后接收事件，目的是在事件到达预定目标之前捕获它。从外往里逐个触发。很少用

1.5 DOM事件流：

“ DOM2级事件 ”规定的事件包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。

但是实际的目标在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到<html>再到<body>后就停止了。下一阶段是处于目标阶段，于是事件在<div>上发生，并在事件处理中看成冒泡阶段的一部分。最后，冒泡事件发生，事件又传播回文档。（即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但是很多浏览器都会在捕获阶段接触事件对象上的事件，所以就有两个机会在目标对象上面操作事件）

2.1 事件处理程序：

事件就是用户或浏览器自身执行到某种动作，诸如 click，load，mouseover都是事件的名字。响应某个事件的函数就叫做事件处理程序。

2.2 HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序，如下面这段代码：

缺点：(1)首先：存在一个时差问题。就本例子来说,假设show()函数是在按钮下方，页面的最底部定义的，如果用户在页面解析show()函数之前就单击了按钮，就会引发错误；   
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。

因此，许多开发人员摒弃html事件处理程序，转而使用javascript指定事件处理程序。

2.3 DOM0级事件处理程序

通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

即为指定对象添加事件处理，看下面的一段代码

var btn2= document.getElementById("btn2");

btn2.οnclick=function()\{

alert("DOM0级添加事件处理");

btn.οnclick=null;//如果想要删除btn2的点击事件，将其置为null即可

</script>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。   
删除DOM0级方法指定的事件处理程序：

btn.οnclick=null; // 删除事件处理程序

优点：简单，具有跨浏览器的优势

缺点：只能实现单个事件的处理程序， 存在一个时差问题

2.4 DOM2级事件处理程序

“ DOM2级事件 ”定义了两种方法，用于处理指定和删除事件处理程序的操作：addEventListener（）和remove EventListener（）

所有DOM节点都包含这两个方法，并且它们都接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。

第三个参数布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认是在冒泡阶段处理。

var btn=document.getElementById("mybtn");   
btn.addEventListener("click",function()\{   
alert(this.id);   
\},false);   
btn.addEventListener("click",function()\{   
alert("hello world!");

\},false);

这两个时间处理程序会按照添加它们的顺序触发。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。

var btn=document.getElementById("mybtn");   
var hander=function()\{   
alert(this.id);   
\};   
btn.addEventListener("click",hander,false);

btn.removeEventListener("click",hander,false); // 有效

缺点：addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同

优点：可以添加多个事件处理程序

2.5 IE事件处理程序

IE有两个方法：attachEvent() 和 detachEvent() .这两个方法接收相同的两个参数：事件处理程序名称与事件处理程序函数。

通过attachevent() 添加的事件处理程序都会被添加到冒泡阶段。

var btn=document.getElementById("mybtn");   
btn.attachEvent("onclick",function()\{   
alert("clicked");   
\});   
btn.attachEvent("onclick",function()\{   
alert("hello world!");

\});

这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。这些事件处理程序不是以它们的添加顺序执行，而是以相反的顺序被触发。

var btn=document.getElementById("mybtn");   
var hander=function()\{   
alert("clicked");   
\}

btn.detachEvent("onclick",hander\}); // 移除

使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。

2.6  跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，有两种方式，第一种是会直接使用能够隔离浏览器差异的javascript库，另一种会自己开发最合适的事件处理方法。

EventUtil这个对象来处理浏览器间的差异。其中有两个方法。addHandler()和removeHandler().它们的目的是视情况分别使用DOM0级方法，DOM2级方法或者IE方法来添加或者删除事件。它们接受三个参数：要操作的元素，事件名称和事件处理程序函数。

![Image 1][]

3.1 事件对象

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

3.2  DOM中的事件对象