13章

< body >

< button id= "mybtn" value= "hi" ></ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. onclick= function(){ alert( this. id);}

< / script >

btn.οnclick=null;  //删除事件处理程序，再点击按钮不会有任何动作发生

addEventListener()

< body >

< button id= "mybtn" value= "hi" >fvfvfv </ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. addEventListener( "click", function(){ alert( this. id);}, false);

btn. addEventListener( "click", function(){ alert( "hello");}, false); //这两个事件处理程序会按照添加它们的顺序触发，，因此首先显示元

素的ID，其次会显示“hello”的消息。

< body >

< button id= "mybtn" value= "hi" >fvfvfv </ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. addEventListener( "click", function(){ alert( this. id);}, false);

btn. addEventListener( "click", function(){ alert( "hello");}, false);

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除

btn.removeEventListener("click",function(){alert(this.id);},false);//由于第二个参数是匿名函数，所以第二个参数删除无效。

< body >

< button id= "mybtn" value= "hi" >fvfvfv </ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

var handler= function (){ alert ( this . id );}

btn. addEventListener( "click",handler, false); //有效

attachEvent()与DOM0级方法的区别：

1.作用域。前者作用域会在全局作用域中运行，后者作用域会在其所属元素的作用域内运行。

2.执行顺序。前者是以相反的顺序被触发，后者是以添加它们的顺序执行。

3.前者第一个参数click,后者第一个参数onclick.

4.前者2个参数，默认是false(冒泡)，后者三个参数。

< body >

< button id= "mybtn" value= "hi" >fvfvfv </ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. attachEvent( "onclick", function(){ alert( this=== window);});

btn. attachEvent( "onclick", function(){ alert( "hello");}); //这两个事件处理程序会按照添加它们的顺序相反顺序触发，，因此首先显示“hello”，其次会显示 this=== window。

btn.detachEvent("onclick",function(){alert("hello");});

< / script >

detachEvent()移除attachEvent().

var hanlder= function(){ alert( "hello");}

btn. detachEvent( "onclick", hanlder);

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

< body >

< button id= "mybtn1" value= "hi" >11111 </ button >

< button id= "mybtn2" value= "hi" >2222 </ button >

< button id= "mybtn3" value= "hi" >3333 </ button >

</ body >

< script >

function handler(){

alert( "wudagou");

}

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; }

}

}

var btn1 = document. getElementById( "mybtn1");

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

var btn3 = document. getElementById( "mybtn3");

btn2. onclick = function () { EventUtil. addHandler( btn1, "click", handler); }

btn3. onclick= function(){ EventUtil. removeHandler( btn1, "click", handler);}

< / script >

事件类型

< script >

var issupport= document. implementation. hasFeature( "HTMLEvents", "2.0");

alert( issupport); //返回true 确定浏览器是否支持DOM2级事件规定的HTML事件

< / script >

< script >

var issupport= document. implementation. hasFeature( "UIEvent", "3.0");

alert( issupport); //返回true 确定浏览器是否支持DOM3级事件规定的HTML事件

< / script >

scroll事件(会在文档滚动期间重复被触动，所以有必要尽量保持事件处理代码的简单)

< script >

EventUtil. addHandler( window, "scroll", function( event){

if( document. compatMode== "CSS1Compat")

{

alert( document. documentElement. scrollTop);

}

else

{

alert( document. body. scrollTop); //safari3.1

};

});

< / script >

确定浏览器是否支持：获得焦点focus和失去焦点blur事件

< script >

var isSupported= document. implementation. hasFeature( "focusEvent", "3.0");

< / script >

鼠标与滚轮事件

click单击

dbclick双击

mousedown按下鼠标按钮时触发

mouseup释放鼠标按钮时触发

mouseenter 鼠标光标首次移入到一个元素范围内时触发

mouseleave 鼠标光标首次移出一个元素范围外时触发

mousemove鼠标移动到一个元素上方时触发

mouseout  鼠标光标移动到一个元素上方，然后用户将其移入另一个元素（可能是前一个元素的外部也可能是这个元素的子元素）时触发

< script >

var isSupported= document. implementation. hasFeature( "MouseEvent", "2.0"); //检验浏览器是否支持上面鼠标事件（除

dbclick/mouseenter/mouseleave外）

< / script >

< script >

var isSupported= document. implementation. hasFeature( "MouseEvent", "3.0"); //检验浏览器是否支持上面所有鼠标事件

< / script >

一个函数处理多个事件，可以使用type属性，通过检测event.type属性，让函数能够确定发生了什么事件

< body >

< button id= "mybtn" >vvvv </ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

var handler= function( event){

switch( event. type){

case "click":

alert( "clicked");

break;

case "mouseover":

event. target. style. backgroundColor= "red";

break;

case "mouseout":

event. target. style. backgroundColor= "";

break;

}

}

btn. onclick= handler;

btn.on mouseover= handler;

btn.on mouseout= handler;

< / script >

DOM阻止事件的默认行为：preventDefault()或cancelable=true

< body >

< link rel= "stylesheet" href= "http://www.baidu.com" id= "mylink" >

</ body >

< script >

var link= document. getElementById( "mylink");

link. onclick= function( event){

event. preventDefault();

}

< / script >

stopPropagation()立即停止事件在dom层次中的传播

< body >

< button id= "mybtn" ></ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. onclick= function( event){

alert( "clicked");

event. stopPropagation(); //弹出

};

document. body. onclick= function(){

alert( "body clicked"); //不弹出

}

< / script >

事件对象的eventPhase属性，用来确定事件当前位于事件流的哪个阶段。

< body >

< button id= "mybtn" ></ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. onclick= function( event){

alert( event.event phase); //2

};

btn. addEventListener( "click", function(){

alert( event. eventphase); //1

}, true);

document. body. onclick= function(){

alert( event. eventphase); //3

}

< / script >

DOM0中，event对象作为window对象的一个属性存在。

< body >

< button id= "mybtn" ></ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. onclick= function(){

var event= window. event;

alert( event. type); //"click"

}

< / script >

IE中使用attachEvent（）添加的，那么event对象作为参数被传入事件

< body >

< button id= "mybtn" ></ button >

</ body >

< script >

var btn= document. getElementById( "mybtn");

btn. attachEvent( "onclick", function( event){

alert( event. type); //"click"

});

< / script >

IE阻止默认行为returnvalue=false

< script >

var link= document. getElementById( "mylink");

link. onclick= function(){

event. returnValue= false);

}

< / script >

< script >

var EventUtil={

addHandler: function( element, type, handler){

//省略

},

getEvent: function(){

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. canceclBubble= true;

}

}

}

< / script >

< body >

< button id= "mybtn" >dd </ button >

</ body >

< script >

btn. onclick= function(){

event= EventUtil. getEvent( event);

var target= EventUtil. getTarget( event);

}

< / script >

< script >

link. onclick= function(){

event= EventUtil. getEvent( event);

EventUtil. preventDefault( event);

}

< / script >

< body >

< button id= "mybtn" >dd </ button >

</ body >

< script >

btn. onclick= function(){

alert( "gg");

event= EventUtil. getEvent( event);

EventUtil. stopPropagation( event);

}

document. body. onclick= function( event){

alet( "bbbb");

}

< / script >