您的位置：首页 > Web前端 > JavaScript

Javascript事件实例详解

2015-01-13 10:43 567 查看
本文实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性

document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。

复制代码 代码如下:

<script>

document.onclick=function(){

alert('a');

};

</script>

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置

复制代码 代码如下:

<script>

document.onclick=function(ev){

if(ev)

{

alert(ev.clientX+','+ev.clientY);

}

else{

alert(event.clientX+','+event.clentY);

};

};

</script>

或者

复制代码 代码如下:

<script>

document.onclick=function(ev){

/* if(ev)

{

alert(ev.clientX+','+ev.clientY);

}

else{

alert(event.clientX+','+event.clentY);

};

};*/

var oEvent=ev||event;

alert(oEvent.clientX+','+oEvent.clientY);

};

</script>

事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。

复制代码 代码如下:

<script>

window.onload=function(){

var obtn=document.getElementById('btn1');

var odiv=document.getElementById('div1');

obtn.onclick=function(ev){

var oEvent=ev||event;

odiv.style.display='block';

oEvent.cancelBubble=true;//清除冒泡

};

document.onclick=function(){

odiv.style.display='none';

};

};

</script>

</head>

<body>

<input type="button" value="显示" id="btn1"/>

<div id="div1" style="width:100px;height:150px;background:#ccc;"></div>

</body>

鼠标移动---在可视区有效

复制代码 代码如下:

<title>鼠标移动</title>

<script>

window.onmousemove=function(ev){

var oEvent=ev||event;

var odiv=document.getElementById('div1');

odiv.style.left=oEvent.clientX+'px';

odiv.style.top=oEvent.clientY+'px';

};

</script>

</head>

<body>

<div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>

</body>

键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

#div1 {width:100px; height:100px; background:#CCC; position:absolute;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

document.onkeydown=function (ev)

{

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

//← 37

//右 39

if(oEvent.keyCode==37)

{

oDiv.style.left=oDiv.offsetLeft-10+'px';

}

else if(oEvent.keyCode==39)

{

oDiv.style.left=oDiv.offsetLeft+10+'px';

}

};

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

鼠标跟随小尾巴

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

div {width:10px; height:10px; background:red; position:absolute;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

window.onload=function ()

{

var aDiv=document.getElementsByTagName('div');

var i=0;

document.onmousemove=function (ev)

{

var oEvent=ev||event;

for(i=aDiv.length-1;i>0;i--)

{

aDiv[i].style.left=aDiv[i-1].style.left;

aDiv[i].style.top=aDiv[i-1].style.top;

}

aDiv[0].style.left=oEvent.clientX+'px';

aDiv[0].style.top=oEvent.clientY+'px';

};

};

</script>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

keycode

复制代码 代码如下:

<script>

document.onkeydown=function (ev)

{

var oEvent=ev||event;

alert(oEvent.keyCode);

};

</script>

ctrlKey---可以通过ctrl+enter组合键来提交内容

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

window.onload=function ()

{

var oBtn=document.getElementById('btn1');

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

oBtn.onclick=function ()

{

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

};

oTxt2.onkeydown=function (ev)

{

var oEvent=ev||event;

if(oEvent.ctrlKey && oEvent.keyCode==13)

{

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

};

</script>

</head>

<body>

<textarea id="txt1" rows="10" cols="40"></textarea><br />

<input id="txt2" type="text" />

<input id="btn1" type="button" value="留言" />

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航