Javascript初级 JavaScript进阶

JavaScript事件对象案例


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

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

<script type="text/javascript">

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

//   btn1.onclick=function(event){

//    alert(event.type);

//   }

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

//    alert(e.type);

//    alert(this.tagName);

alert(e.currentTarget);

alert(this===e.currentTarget);

alert(e.target);

alert(this===e.target);

},false);


document.body.onclick=function(event){

alert(event.currentTarget===this);

alert(event.target===document.getElementById('btn1'));

alert(document.body===this);

}

</script>

</body>

</html>


运行结果:

javascript1.png 

javascript2.png 


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

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

<br />

<a href="http://www.phpfamily.org" id='myBlob'>我的个人博客</a>

<script type="text/javascript">

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

var handler=function(e){

switch(e.type){

case 'click':

alert('cliked!!');

break;

case 'mouseover':

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

break;

case 'mouseout':

event.target.style.backgroundColor='';

break;

}

};

btn1.onclick=handler;

btn1.onmouseover=handler;

btn1.onmouseout=handler;

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

myBlob.onclick=function(e){

alert(e.cancelable);

e.preventDefault();//取消默认行为

}

</script>

</body>

</html>


运行结果:


javascript3.png

javascript4.png 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<input type="button" value="test" id='btn' />

<script type="text/javascript">

//eventPhase属性,如果是在捕获阶段调用的事件处理程序,eventPhase=1;

//如果事件处理程序处于目标对象上,eventPhase=2;

//如果事件冒泡阶段调用事件处理程序,eventPhase=3;

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

btn.onclick=function(e){

alert(e.eventPhase);

}

document.body.addEventListener('click',function(e){

alert(e.eventPhase);

},true);

document.body.onclick=function(e){

alert(e.eventPhase);

}

</script>

</body>

</html>


运行结果:

javascript5.png

javascript6.png

 

javascript7.png 


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<input type="button" value="test" id='btn' />

<br />

<a href="http://www.maiziedu.com" id='maizi'>麦子官网</a>

<div id="box1">

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

</div>

<script type="text/javascript">

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

btn.onclick=function(){

alert(window.event.srcElement===this);

}

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

alert(event.srcElement===this);

});

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

link.onclick=function(){

window.event.returnValue=false;//取消默认行为

}

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

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

box1.onclick=function(){

alert('box1 clicked');

}

btn1.onclick=function(){

alert('button clicked');

window.event.cancelBubble=true;//取消事件冒泡

}

document.body.onclick=function(){

alert('body clicked');

}

</script>

</body>

</html>


运行结果:


javascript8.png 


javascript9.png 


(点击即可进入麦子学院官网)



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

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

您有一个400抵2000现金红包未使用!

客服热线 400-862-8862

回到顶部