web交互之js事件

时间 2021-04-13

标签 javascript css html java web 浏览器服务器 app 编辑器 ide 栏目 HTML 繁體版

原文原文链接

前言

事件是用来实现js和html之间交互的，能够用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（js）与页面的外观（html和css）的松散耦合。事件最先是在IE3和Netscape Navigator2中出现的，当时是做为分担服务器运算负载的一种手段。javascript

1、事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕获流。css

一、事件冒泡

IE 的事件流叫作事件冒泡，即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收，而后逐级向上传播到较为不具体的节点(文档)。好比单击了页面中的<div>元素，那么这个click事件会按照以下顺序逐级向上传播，直至传播到 document 对象。html

注意：全部现代浏览器都支持事件冒泡，但在具体实现上仍是有一些差异。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素 (从 <body> 直接跳到 document) 。Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。java

二、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预约目标以前捕获它。前面的例子的事件捕获过程为：web

三、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。一样前面的例子触发事件的顺序为：浏览器

IE九、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。服务器

2、事件处理程序

事件就是用户或浏览器自身执行的某种动做。而响应某个事件的函数就叫作事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，好比 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有如下几种。app

一、HTML事件处理程序

在HTML中定义的事件处理程序能够包含要执行的具体动做，也能够调用在页面其余地方定义的脚本。编辑器

<input type="button" value="Click Me" οnclick="alert(this.value)" />

或者ide

<script type="text/javascript">    
    function showMessage(){    
        alert("Hello world!");    
    }    
  </script>    
  <input type="button" value="Click Me" οnclick="showMessage()" />

注意：不能再其中使用未经转义的HTML语法字符，例如和号（&）、双引号（""）、小于号（<）或大于号（>）。

在HTML中指定事件处理程序有三个缺点。一、存在一个时差问题。由于用户可能会在HTML元素一出如今页面上就触发相应的事件，但当时的事件处理程序有可能尚不具有执行条件。为此，不少HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。二、这样扩展事件处理程序的做用域在不一样浏览器中会致使不一样结果。不一样js引擎遵循的标识符解析规则略有差别，极可能会在访问非限定对象成员时出错。三、html与js代码紧密耦合，更换事件处理程序改动较大。

二、DOM0级事件处理程序

经过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，并且至今仍然为全部现代浏览器所支持。缘由一是简单，二是具备跨浏览器的优点。

每一个元素都有本身的事件处理程序属性，如onclick等。能够经过js将一个函数赋值给元素的事件处理程序属性。在DOM0事件处理程序中，事件处理程序里的this指向当前元素。

var objlogo=document.getElementById("site_nav_top");
objlogo.οnclick=function(){
alert(this.innerHTML);//代码改变世界
}

删除DOM0事件，只需将事件处理程序的值赋为null便可。

objlogo.οnclick=null;

三、DOM2级事件处理程序

“DOM2级事件”定义了两个方法，addEventListener() 和 removeEventListener()，它们都接受3个参数：要处理的事件名、做为事件处理程序的函数和一个布尔值。最后这个布尔值参数若是是 true，表示在捕获阶段调用事件处理程序；若是是 false，表示在冒泡阶段调用事件处理程序。addEventListener()能够为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。removeEventListener()不能移除匿名添加的函数。

var btn = document.getElementById("myBtn");  
btn.addEventListener("click", function(){  
alert(this.id);  
}, false);  
var handler = function(){  
alert("Hello world!");  
};  
btn.addEventListener("click", handler, false);  
// 这里省略了其余代码  
btn.removeEventListener("click", handler, false); // 有效！

以上代码会先显示id，再显示hello world。大多数状况下，都是将事件处理程序添加到事件流的冒泡阶段，这样能够最大限度地兼容各类浏览器。IE九、Opera、Firefox、Chrome和Safari都支持DOM2级事件处理程序。

四、IE事件处理程序

IE 实现了与DOM中相似的两个方法：attachEvent() 和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。因为IE只支持事件冒泡，因此经过 attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。

在使用DOM0级方法的状况下，事件处理程序会在其所属元素的做用域内运行；在使用 attachEvent() 方法的状况下，事件处理程序会在全局做用域中运行，所以 this 等于 window 。而且，与DOM 方法不一样的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。

注意：一、事件名前面有on前缀；二、在事件处理程序的函数中，this再也不指向当前元素，而是指向window对象。

var btn = document.getElementById("myBtn");  
var handler = function(){  
alert("Clicked");  
};  
btn.attachEvent("onclick", handler);  
// 这里省略了其余代码  
btn.detachEvent("onclick", handler);

支持IE事件处理程序的浏览器有IE和Opera。

五、跨浏览器的事件处理程序

第一个要建立的方法是 addHandler()，它的职责是视状况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件，它属于一个名叫 EventUtil 的对象。addHandler()方法接受3个参数：要操做的元素、事件名称和事件处理程序函数。EventUtil的用法以下所示：

var EventUtil = {    
    addHandler: function(element, type, handler){    
        if (element.addEventListener){    
            element.addEventListener(type, handler, false);    
        } else if(element.attachEvent) {    
            element.attachEvent("on" + type, handler);    
        } else {    
            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;    
        }    
    }    
};

使用EventUtil对象的实例以下：

var btn = document.getElementById("myBtn");  
var handler = function(){  
    alert("Clicked");  
};  
EventUtil.addHandler(btn, "click", handler);  
// 这里省略了其余代码  
EventUtil.removeHandler(btn, "click", handler);

六、事件回调函数的做用域问题

事件绑定函数时，该函数会以当前元素为做用域执行。

(1)使用匿名函数

咱们为回调函数包裹一层匿名函数。包裹以后，虽然匿名函数的做用域被指向事件触发元素，但执行的内容就像直接调用同样，不会影响其做用域。

(2)使用 bind 方法

使用匿名函数是有缺陷的，每次调用都包裹进匿名函数里面，增长了冗余代码等，此外若是想使用 removeEventListener 解除绑定，还须要再建立一个函数引用。Function 类型提供了 bind 方法，能够为函数绑定做用域，不管函数在哪里调用，都不会改变它的做用域。

3、事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着全部与事件有关的信息。

一、DOM中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。event 对象包含与建立它的特定事件有关的属性和方法。触发的事件类型不同，可用的属性和方法也不同。不过，全部事件都会有下表列出的成员。

在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。若是直接将事件处理程序指定给了目标元素，则 this 、currentTarget 和 target 包含相同的值。

二、IE中的事件对象

在使用 DOM0 级方法添加事件处理程序时，event 对象做为 window 对象的一个属性存在。若是是经过 HTML 特性指定的事件处理程序，那么还能够经过一个名叫 event 的变量来访问 event 对象 (与 DOM 中的事件模型相同)。IE 的 event 对象一样也包含与建立它的事件相关的属性和方法。

三、跨浏览器的事件对象

综合考虑DOM和IE中的事件对象，写出跨浏览器的事件对象，放在以前的EventUtil中。

var EventUtil = {    
    addHandler: function(element, type, handler){    
        // 省略了其余代码    
    },    
    getEvent: function(event){    
        return event? event: window.event;    
    },    
    getTarget: function(event){    
        return event.target || event.srcElement;    
    },    
    preventDefault: function(event){    
        if (event.preventDefault){    
            event.preventDefault();    
        } else {    
            event.returnValue = false;    
        }    
    },    
    removeHandler: function(element, type, handler){    
        // 省略了其余代码    
    },    
    stopPropagation: function(event){    
        if (event.stopPropagation){    
            event.stopPropagation();    
        } else {    
            event.cancelBubble = true;    
        }    
    }    
};

4、事件类型

Web浏览器中可能发生的事件有不少类型。如前所述，不一样的事件类型具备不一样的信息，而 "DOM3级事件" 规定了下列几类事件：
UI事件：在用户与页面上的元素交互时触发；
鼠标事件：当用户经过鼠标在页面上执行操做时触发；
滚轮事件：当使用鼠标滚轮（或相似设备）时触发；
文本事件：当在文档中输入文本时触发；
键盘事件：当用户经过键盘在页面上执行操做时触发；
合成事件：当为IME（Input Method Editor,输入法编辑器）输入字符时触发；

变更 (mutation) 事件：当底层 DOM 结构发生变化时触发。

一、UI事件

(1)load事件：load能够用来判断图片加载完毕。注意：新建立的图像元素不是在加载到页面中才开始下载，而是设置src以后就开始下载。load能够用来判断js加载完成。<script>元素能够触发load事件，来判断动态加载的js文件是否加载完成。它和img不一样，必须设置了src属性而且添加到文档以后才会开始下载。

(2).unload事件

(3).resize事件
注意：关于什么时候会触发resize事件，不一样浏览器有不一样的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，而后随着变化不断重复触发。Firefox则只会在用户中止调整窗口大小时才会触发resize事件。
(4).scroll事件

二、焦点事件

焦点事件会在页面元素得到或失去焦点时触发，利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，能够知晓用户在页面上的行踪。有如下6个焦点事件：blur、DOMFocusIn、DOMFocusOut、foucs、focusin、focusout。

三、鼠标与滚轮事件

DOM3级事件定义了9个鼠标事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup。
鼠标事件中还有一类滚轮事件mousewheel事件。
(1).客户区坐标位置：clientX和clientY属性。
(2).页面坐标位置：pageX和pageY属性。
(3).屏幕坐标位置：screenX和screenY属性。
(4).修改键：shiftKey、ctrlKey、altKey、metaKey。
(5).相关元素：DOM经过event对象的relatedTarget属性提供了相关元素的信息。而在IE中，mouseover事件触发时，fromElement保存了相关元素，mouseout事件触发时，toElement保存了相关元素。
(6).鼠标按钮

(7).更多的事件信息

(8).鼠标滚轮事件：mousewheel事件中包含wheelDelta属性，Firefox支持相似的DOMMouseScroll事件，包含detail属性。

四、键盘与文本事件

DOM3级含有3个键盘事件：keydown、keypress、keyup。
1.键码：keyCode属性
2.字符编码：charCode属性
3.DOM3级变化：新属性（key、char、location属性：表示按下了什么位置上的键），getModifierState()方法。
4.textinput事件：data属性：表示用户输入的字符（而非字符编码）、inputMethod属性：表示把文本输入到文本框中的方式。

五、复合事件：用以处理IME的输入序列的一类事件。六、变更事件：删除节点、插入节点等。七、HTML5事件

1.contextmenu事件：用以表示什么时候应该显示上下文菜单。
2.beforeunload事件：让开发人员有可能在页面卸载前阻止这一操做。
3.DOMContentLoaded事件：在造成完整的DOM树以后触发。
4.readystatechange事件：提供与文档或元素的加载状态有关的信息。
5.pageshow和pagehide事件：pageshow事件在页面显示时触发，pagehide事件在浏览器卸载页面时触发。
6.hashchange事件：以便在URL的参数列表发生变化时通知开发人员。

八、设备事件

1.orientationchange事件
2.MozOrientation事件
3.deviceorientation事件
4.devicemotion事件

九、触摸与手势事件

1.触摸事件

2.手势事件

5、内存和性能

1.事件委托

事件委托能够解决页面中事件处理程序过多的问题。事件委托利用了事件冒泡，只指定一个事件处理程序，就能够处理某一类型的全部事件。

EventUtil.addHandler(document.body, 'click', function (event) {
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  switch (target.id) {
  case 'site_nav_top':
    alert('口号');
    break;
  case 'nav_menu':
    alert('点击菜单');
    EventUtil.preventDefault(event);
    break;
  case 'editor_pick_lnk':
    alert('推荐区');
    EventUtil.preventDefault(event);
    break;
  }
});

2.移除事件处理程序

若是内存中保留大量无用的事件处理程序，会影响性能。因此必定要在不须要的时候及时移除事件处理程序。尤为注意如下状况：使用innerHTML删除带有事件处理程序的元素时，要先将事件处理程序设置为null。使用委托也能够解决这个问题，不直接将事件加载会被innerHTML替换的元素，而是将事件赋给其父元素，这样就能够避免了。卸载页面时，最好手工清除全部的事件处理程序。

6、DOM中的事件模拟

事件常常由用户操做或经过其余浏览器功能来触发，也可使用JS在任意时刻来触发特定的事件，而此时的事件就如同浏览器建立的同样。在测试Web应用程序，模拟触发事件是一种极其有用的技术。

1. DOM中的事件

模拟分三步：

使用document.createEvent()建立event对象。经过赋值不一样的参数，能够模拟不一样的事件类型
初始化event对象；

触发事件，调用dispatchEvent()方法，全部支持事件的DOM节点均可以支持这个方法。

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

2. 模拟鼠标事件

首先createEvent()方法传入参数是“MouseEvent”来模拟鼠标事件。返回的event对象有一个initMouseEvent()方法，用来初始化事件信息。该方法有15个参数：
type(字符串)：要触发的事件类型，好比“click”。
bubbles(bool)：事件是否冒泡。通常设为true。
cancelable(bool)：事件是否能够取消。通常设为true。
view：与事件关联的视图，通常设置为document.defaultView。
detail(整数)：与事件有关的详细信息，通常设置为0.
screenX：事件相对于屏幕的X坐标。
screenY：事件相对于屏幕的Y坐标。
clientX：事件相对于视口的X坐标。
clientY：事件相对于视口的Y坐标。
ctrlKey(bool)：是否俺下了Ctrl键，默认为false。
altKey：是否按下了alt键，默认false。
shiftKey：是否按下了shift键，默认false。
metaKey：是否按下了meta键，默认false.
button(整数)：按下了哪一个鼠标键，默认0。
relatedTarget：与事件相关的对象，通常为null.只在模拟mouseover和mouseout的时候会用到。
最后给DOM元素调用dispatchEvent()方法来触发事件。

var objmenu = document.getElementById('nav_menu');
objmenu.onclick = function () {
  console.log('menu');
}
document.body.onclick = function () {
  console.log('body');
}
var event = document.createEvent('MouseEvent');
event.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
for (var i = 0; i < 5; i++) {
  objmenu.dispatchEvent(event);
}

3. 自定义DOM事件

DOM3中支持自定义DOM事件。要建立新的自定义事件，能够调用document.createEvent()方法，返回的对象有一个initCustomEvent()方法，包含四个参数：
type：触发事件的类型；
bubbles：事件是否冒泡；
cancelable：事件是否能够取消；
detail：任意值，保存在event.detail属性中。
最后在DOM元素调用dispatchEvent()方法触发事件。

var objmenu = document.getElementById('nav_menu');
EventUtil.addHandler(objmenu, 'myevent', function (event) {
  console.log('menu' + event.detail);
});
EventUtil.addHandler(document.body, 'myevent', function (event) {
  console.log('body' + event.detail);
})
if (document.implementation.hasFeature('CustomEvents', '3.0')) {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('myevent', true, true, '测试事件detail');
  for (var i = 0; i < 5; i++) {
    objmenu.dispatchEvent(event);
  }
}

自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。直接自定义事件，使用 Event 构造函数；CustomEvent 能够建立一个更高度自定义事件，还能够附带一些数据，具体用法以下：

var myEvent = new CustomEvent(eventname, options);

其中 options 能够是：

{
    detail: {
        ...
    },
    bubbles: true,
    cancelable: false
}

其中 detail 能够存放一些初始化的信息，能够在触发的时候调用。其余属性就是定义该事件是否具备冒泡等等功能。内置的事件会由浏览器根据某些操做进行触发，自定义的事件就须要人工触发。dispatchEvent 函数就是用来触发某个事件：

element.dispatchEvent(customEvent);

上面代码表示，在 element 上面触发 customEvent 这个事件。结合起来用就是：

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

使用自定义事件须要注意兼容性问题，而使用 jQuery 就简单多了：

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
// 触发事件
$(element).trigger('myCustomEvent');

此外，你还能够在触发自定义事件时传递更多参数信息：

$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});