【js学习笔记-091】-----------注册事件处理程序

注册事件处理程序

两种方式：

一 给事件目标对象或文档元素设置属性

二 更具有通用性，是将事件处理程序传递给对象或元素的一个方法

但是复杂的是，每种技术都有两个版本。可以在js代码中设置事件处理程序为对象属性，或对于文档元素，可以在HTML中直接设置相应属性。对于通过方法调用处理程序注册。有一个标准方法，命名为addEventListener()，除IE8及以前版本之外，所有浏览器都支持这个方式，而IE之前版本支持一个叫attachEvent()的不同方法。

设置js对象属性为事件处理程序

注册事件处理程序最简单的方式就是通过设置事件目标的属性为所需事件处理程序函数。按照约定，事件处理程序属性的名字由”on”后面跟着事件名组成：onclick/onchange/onload/onmouseover等。注意这些属性是区分大小写的，所有都是小写即使有多个单词组成如onreadystatechange。

这种方式的缺点是其设计都是围绕着假设每个事件目标对每种事件类型将最多只有一个处理程序。如果想编写能够在任意文档中都能使用的脚本库代码，更好的方式是使用一种不修改或覆盖任何已有注册程序的技术。

设置html标签属性为事件处理程序

如<button onclick=”alert(‘hello’);”>点我！</button>

如果html事件处理程序属性包含多条js语句，要记住必须使用分号分隔这些语句或断开属性值使其跨多行。

addEventListener()

 它接受三个参数。

A.     事件类型，这个事件类型是字符串，但它不应该包括用于设置事件处理程序属性的前缀“on”

B.      当指定类型事件发生时应该调用的函数

C.      布尔值 通常是false，如果设置为true，那么函数注册为捕获事件处理程序

 removeEventListener()

同样有三个参数，从对象中删除事件处理程序函数而非添加，它常用于临时注册事件处理程序，然后不久就删除它，例如mousedown事件，可以为mousemove和mouseup事件注册临时捕获事件处理程序来看看用户是否拖动鼠标。当mouseup事件到来后，可以注销这些事件处理程序。

document.removeEventListener(“mousemove”,handleMouseMove,true);

document.removeEventListener(“mouseup”,handleMouseUp,true);

attachEvent()

IE9之前的IE不支持上述的两个方法。IE5及以后版本定义了类似的方法。attachEvent()和detachEvent() 方法原理有类似addEventListener()和removeEventListener()。

但有如下例外：

l  因为IE不支持事件捕获，所以attachEvent()和detachEvent()要求只有两个参数。事件类型和处理程序函数

l  IE方法的第一个参数使用了带“on”前缀的事件处理程序属性名，而非没有前缀的事件类型。例如addEventListener()传递”click”而attachEvent()传递“onclick”。

l  attachEvent允许相同事件处理程序函数注册多次，当特定的事件类型发生时，注册函数的调用次数和注册次数一样

经常会有这个的事件处理程序写法

var b =document.getElementById(“mybutton”);

var handler = function(){alert(“thanks!”);};

if(b.addEventListener)

  b. addEventListener(“click”, handler,false);

else if(b.attachEvent)

  b. attachEvent(“onclick”, handler);