管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Javascript事件实例详解

　　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>

教程首页 更多教程