事件详解1

一、event事件对象

1. 什么是event事件对象

•用来获取事件的详细信息：鼠标位置、键盘按键

–例子：获取鼠标位置：clientX

–document的本质：document.childNodes[0].tagName

2. document对象范围
3. event事件对象兼容性问题及解决方案

获取event对象(兼容性写法)

•var oEvent=ev||event;

ev写法兼容火狐event兼容ie

<script>
document.onclick=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.clientX+', '+oEvent.clientY);
    //IE
    //alert(event.clientX+', '+event.clientY);
    
    //FF
    //alert(ev.clientX+', '+ev.clientY);
    
    /*if(ev)
    {
        alert(ev.clientX+', '+ev.clientY);
    }
    else
    {
        alert(event.clientX+', '+event.clientY);
    }*/
};
</script>

•Event对象下的获取鼠标位置：clientX clientY

–例子：方块跟着鼠标移动

事件流

•事件冒泡---- 简单来说就是子节点发生事件以后不断向父节点传递

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html onclick="alert('html');" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body onclick="alert('body');">
<div style="300px; height:300px; background:red;" onclick="alert(this.style.background);">
    <div style="200px; height:200px; background:green;" onclick="alert(this.style.background);">
        <div style="100px; height:100px; background:#CCC;" onclick="alert(this.style.background);">
        </div>
    </div>
</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>
#div1 {width:100px; height:150px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function ()
    {
        
        oDiv.style.display='block';
        alert('按钮被点了');
        
        
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

View Code

当用上面的写法时发现页面点击按钮毫无反应，当注释掉

//oDiv.style.display='none';

页面可以弹出菜单，但是菜单无法收回，去掉注释，加个alert来查看一下是怎么被执行的

<!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 {100px; height:150px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function ()
    {
        
        oDiv.style.display='block';
        alert('按钮被点了');
        
        
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        alert('页面被点了');
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

View Code

点击菜单可以出现，alert按钮被点了，确定alert('页面被点了')

这是因为按钮也是在页面里面的，所以点击按钮会冒泡到document，这就是冒泡带来的困扰。

要想解决这个问题，就要用到取消冒泡。

取消冒泡：ev.cancelBubble=true

<!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:150px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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';
        //alert('按钮被点了');
        
        oEvent.cancelBubble=true;//取消冒泡
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('页面被点了');
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

View Code

一般自定义的下拉列表都是需要用到取消冒泡的。

4.鼠标位置

•可视区位置：clientX、clientY

–例子1：跟随鼠标的Div（应用：更随鼠标的提示符）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:red; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script>
10 document.onmousemove=function (ev)
11 {
12     var oEvent=ev||event;
13     var oDiv=document.getElementById('div1');
14     
15     oDiv.style.left=oEvent.clientX+'px';
16     oDiv.style.top=oEvent.clientY+'px';
17 };
18 </script>
19 </head>
20 
21 <body>
22 <div id="div1">
23 </div>
24 </body>
25 </html>

View Code

»消除滚动条的影响

<script>
document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    oDiv.style.left=oEvent.clientX+scrollLeft+'px';
    oDiv.style.top=oEvent.clientY+scrollTop+'px';
};
</script>

•滚动条的意义——可视区与页面顶部的距离

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

–例子2：一串跟随鼠标的Div

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 div {width:10px; height:10px; background:red; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script>
10 window.onload=function ()
11 {
12     var aDiv=document.getElementsByTagName('div');
13     var i=0;
14     
15     document.onmousemove=function (ev)
16     {
17         var oEvent=ev||event;
18         
19         for(i=aDiv.length-1;i>0;i--)
20         {
21             aDiv[i].style.left=aDiv[i-1].style.left;
22             aDiv[i].style.top=aDiv[i-1].style.top;
23         }
24         
25         aDiv[0].style.left=oEvent.clientX+'px';
26         aDiv[0].style.top=oEvent.clientY+'px';
27     };
28 };
29 </script>
30 </head>
31 
32 <body>
33 <div></div>
34 <div></div>
35 <div></div>
36 <div></div>
37 <div></div>
38 <div></div>
39 <div></div>
40 <div></div>
41 <div></div>
42 <div></div>
43 <div></div>
44 <div></div>
45 <div></div>
46 <div></div>
47 <div></div>
48 <div></div>
49 <div></div>
50 <div></div>
51 <div></div>
52 <div></div>
53 <div></div>
54 <div></div>
55 <div></div>
56 <div></div>
57 <div></div>
58 <div></div>
59 <div></div>
60 <div></div>
61 <div></div>
62 <div></div>
63 <div></div>
64 <div></div>
65 <div></div>
66 <div></div>
67 <div></div>
68 <div></div>
69 <div></div>
70 <div></div>
71 <div></div>
72 <div></div>
73 </body>
74 </html>

View Code

二、键盘事件 onkeydown、keyCode

keyCode

•获取用户按下键盘的哪个按键

<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.keyCode);
};
</script>

•例子：键盘控制Div移动（左右移动）

<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>

其他属性

•ctrlKey、shiftKey、altKey

•例子：提交留言

–回车提交

<!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+'
';
        oTxt2.value='';
    };
    
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+'
';
            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>

View Code

–ctrl+回车提交留言

<!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+'
';
        oTxt2.value='';
    };
    
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+'
';
            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>

View Code

ctrlKey 布尔值按住TRUE 不按住false

总结知识点：

获取事件对象

冒泡、取消冒泡

DOM事件流

鼠标事件

键盘事件