Javascript初级 JavaScript进阶

JavaScript DOM2级事件



DOM2模型


“DOM2级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventLiStener()和removeEventLiStener()。所有DOM节点中都包含这两

个方法,并且它们都接受3个参数;事件名、函数、冒泡或捕获的布尔值(true表示捕获,falSe表示冒泡)。IE事件处理程序,IE中实现了DOM中类似的两个方法:attachEvent()和detachEvent().这两个方法接受相关的两个参数:事件处理程序名称和事件处理程序函数。在IE8及IE8之间版本中只支持事件冒泡,所以通过attachEvent()添加的事件处理都会被添加到冒泡阶段。

 


案例


<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<div id="box1" Style='background: #ABCDEF; width: 300px;height: 300px;'>

<input type="button" value="teSt1" id='btn1' />

</div>

<Script type="text/javaScript">

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

var box1=document.getElementById("box1");

btn1.addEventLiStener('click',function(e){

alert('button clicked');

var e=e||window.event;

if(typeof e.cancelBubble=='undefined'){

e.StopPropagation();

}elSe{

e.cancelBubble=true;

}

},falSe);

box1.addEventLiStener('click',function(){

alert('div clicked');

},falSe);

document.body.addEventLiStener('click',function(){

alert('body clicked');

},falSe);

document.documentElement.addEventLiStener('click',function(){

alert('html clicked');

},falSe);

document.addEventLiStener('click',function(){

alert('document clicked');

},falSe);

</Script>

</body>

</html>


运行结果:


PM1.pngPM2.pngPM3.pngPM4.pngPM5.png 


<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<input type="button" value="teSt1" id='btn1' />

<input type="button" value="teSt2" id='btn2' />

<input type="button" value="teSt3" id='btn3' />

<Script>

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

btn1.addEventLiStener('click',function(){

alert('a');

},falSe);

var handler=function(){

alert('b');

}

btn1.addEventLiStener('click',handler,falSe);

btn1.addEventLiStener('click',function(){

alert('c');

},falSe);

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

var count=0;

var handler1=function(){

alert(count++);

if(count==3){

alert('事件被取消了');

btn2.removeEventLiStener('click',handler1,falSe);

}

}

btn2.addEventLiStener('click',handler1,falSe);



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

btn3.addEventLiStener('click',function(){

alert(123);

btn3.removeEventLiStener('click',function(){

alert(123);

},falSe);

},falSe);

</Script>

</body>

</html>


运行结果:


PM6.pngPM7.pngPM8.pngPM9.pngPM10.png 


<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<input type="button" value="teSt" id='btn1' />

<Script type="text/javaScript">

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

//在IE8之前出现的是相反的顺序,hello king,maizi

btn1.attachEvent('onclick',function(){

alert('hello maizi');

});

var handler=function(){

alert('hello king');

}

btn1.attachEvent('onclick',handler);

</Script>

</body>

</html>

 

<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

<Script Src="EventUtil.jS" type="text/javaScript" charSet="utf-8"></Script>

</head>

<body>

<input type="button" value="teSt" id='btn1' />

<input type="button" value="teSt1" id='btn2' />

<Script type="text/javaScript">

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

var teSt=function(){

alert('hello king');

}

EventUtil.addHandler(btn1,'click',teSt);

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

var teSt1=function(){

EventUtil.removeHandler(btn1,'click',teSt);

}

EventUtil.addHandler(btn2,'click',teSt1);

</Script>

</body>

</html>


运行结果:

PM11.png 



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部