Javascript 核心技术 第6章 捕捉事件

1.0级DOM上的事件句柄

事件句柄是对象的一个属性,语法为:onevent

A.内联模型(inline model)或内联注册模型(inline registration model)

 将事件作为HTML元素的一个属性来增加的方式。

  <body onload='onclick();'>

B.传统模型(traditional model) 或传统注册模型(traditional registration model)

  这种将函数赋值给作为对象的一个属性的事件句柄的方法。

  window.onload=onclick;

2.Event对象

function myEvent(event){

  var theEvent=event?event:window.event;//获取事件对象

  var target = event.target ? event.target :event.srcElement;//获取触发事件对象

  alert(theEvent.type);

}

注意:1. Dom的事件对象 还定义了currentTarget属性,表示事件流经的对象,IE的事件对象中没有定义对应的属性。

   2. DOM的事件对象中定义了relatedTarget属性,在mouseout或mouseover事件中分别表示鼠标进入或离开的对象。IE事件对象中有两个与relatedTarget属性相对应的属性,即

    fromElement(鼠标离开的对象)和toElement(鼠标进入的对象)。

   3.DOM中实现而IE对象没有的属性:

    a. bubbles:是否冒泡事件

    b. cancelable:事件是否可取消

    c. eventPhase:事件所处的阶段。

    e. detail :事件的详细信息

    f. metaKey:事件发生时,metaKey是否按下

    g.timestamp:事件发生的事件。

function stopEvent(event){

  if(event.stopPropagation){

    event.stopPropagation();//停止事件传播

    event.preventDefault();//阻止默认行为

  }else {

    event.cancelBubble = true;//停止事件传播

    event.returnValue = false;//阻止默认行为

  }

}

3.事件句柄与this

4.2级DOM上的事件句柄

  addEventListener语法:

    object.addEventlistener('event',fnc,boolean);

  removeEventListener语法:

    object.remvoeEventListener('event',fnc,boolean);

  attachEvent语法:

    object.attachEvent("event",fnc);

  detachEvent语法:

    object.detachEvent("event",fnc);