Javascript事件实例详解
网络编程
document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
或者
事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
鼠标移动---在可视区有效
键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
鼠标跟随小尾巴
keycode
ctrlKey---可以通过ctrl+enter组合键来提交内容
<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>
addEventListener()第三个参数useCapture (Boolean)详细解析
举例divid="div1"divid="div2"divid="div3"divid="div4"/div/div/div/div如果在d3上点击鼠标，事件流是这样的：捕获阶段在div1处检测是否有useCapture为true的事件处理程序
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
1、typeof(param)返回param的类型(string)这种方法是JS中的定义的全局方法，也是编译者们最常用的方法，优点就是使用简单、好记，缺点是不能很好的判断obj
js字符串转成JSON
例1在JS中，把json格式的字符串转成JSON对象，关键代码json=eval('('+str+')');方法如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xht
编辑：一起学习网
标签：鼠标,位置,事件,无标题文档,方法