事件处理程序

1.设置对象的属性为事件处理程序,按照约定,事件处理程序的属性由on+事件名 组成。

有缺点:这样的设计都是围绕着假设每个事件目标对于每种事件类型最多只有一个处理程序。可以使用addEventListener()来注册多个处理函数

window.onload()=function(){}

2.设置HTML标签属性

<button onclick="alter('Thank you')"></button>

3.addEventListener() ,接受三个参数,第一个是字符串,表示要注册处理程序的事件类型,但是不加on,第二个参数是事件函数,第三个是true或者false

      true表示捕获事件,false表示处理。

  removeEventListener(),

事件处理程序的参数如果没有就用全局参数event来传递事件对象

attachEvent()和detachEvent(),只要求两个参数,事件类型和处理程序函数,并且要使用on作为前缀,比如

  var a=document.getElementById("mybutton");

  a.

4.事件处理程序的运行环境:通过设置属性注册处理程序时,像是在文档上定义了新方法,调用处理函数的时候this指定当前对象

但是attachEvent指代的是window对象,可以用下面的方法来处理,但是不能删除,因为传递给attachEvent()包装函数没有保留,传递给detachEvent().

function addEvent(target,,type,handler){

  if(target.addEventListener) target.addEvent(type,handler,false);

  else target.attachEvent("on" +type,function(event){

    return  handler.call(target,event);

});

}

5.事件处理程序的返回值

false表示不要执行事件相关的默认操作。

1.提交按钮的onclick能够告诉程序不要提交,再用户验证错误就可以利用false来返回

2.键盘输入onkeypress事件处理程序能用fasle来过滤键盘输入,过滤键盘输入。

3.window的onbeforunload返回值用来返回一个字符串可以询问用户是否想要离开当前页面。

6.调用顺序

  设置对象属性或者HTML属性注册的处理程序优先

  ·用addEventListener()注册的处理程序按照注册顺序调用

  使用attachEvent()注册的程序按照任何顺序调用

7.事件传播

  文档元素上的大部分事件都会冒泡,到DOM树根,调用目标父元素,祖父,Docuemnt,最后到window对象,冒泡就可以

统一在一个祖先元素上注册一个处理程序。比如再form元素上注册change顺序来取代再每个元素上注册change事件。

focus,blur和scroll事件不会冒泡,load元素冒泡会冒到Document对象,不会传播到Window对象。

  捕获阶段为第一个阶段,把AddEventListener第三个参数设置为true就可以捕获。捕获是反冒泡阶段,从Window对象

来捕获然后是Doucument,接着Body。

  捕获能够再事件为送到目标之前可以查看他们,事件捕获可以调试程序,或者事件取消,多用于处理鼠标拖放

原文地址:https://www.cnblogs.com/1521681359qqcom/p/12120220.html