js事件操作

1.HTML相关

这都是针对window对象.

onload()

onresize() 窗口移动大小改变

onscroll() 滚动条滚动

2.鼠标键盘事件

   onclick：  鼠标单击

   ondblclick:   鼠标双击

   onmouseover:  鼠标滑过

   onmousemove  :   鼠标移动

一个综合利用

 1 <html>
 2 <head>
 3 <script>
 4 window.onload=function()
 5 {
 6   var obj = 
 7    {
 8    tips:document.getElementById("tips"),
 9    lb:document.getElementsByTagName("label")[0] 
10    };
11    obj.lb.onmouseover=function()
12    {
13      obj.tips.style.display="block";
14    }
15    obj.lb.onmouseout=function()
16    {
17       obj.tips.style.display="none";
18    }
19 }
20 </script>
21 </head>
22 <body>
23 <div id="content">
24 <label><input type="checkbox"/>auto login in two weeks</label> 
25 <div id="tips">for your security please not use in netbar!</div>
26 
27 </div>
28 </body>
29 </html>
View Code

onchange

onclick

在checkbox的value改变的时候将会触发

 checked 对于type是checked的input的输入框

勾选之后弹出来是true，否则是false

 事件流

冒泡形事件

IE9 中阻止冒泡不是方法是属性

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 #box1{width:500px;height:400px;background:#900;}
 5 #box2{width:400px;height:400px;background:#090;}
 6 #box3{width:200px;height:200px;background:#009;}
 7 #box4{width:200px;height:200px;background:#990;}
 8 #box5{width:100px;height:100px;background:#099;}
 9 </style>
10 <script>
11 var divs=document.getElementsByTagName("div");
12 window.onload=function()
13 {
14 var i=0;
15 divs[0].onclick=function()
16 {
17 alert(0);
18 }
19 divs[1].onclick=function()
20 {
21 alert(1);
22 }
23 divs[2].onclick=function()
24 {
25 alert(2);
26 };
27 divs[3].onclick=function()
28 {
29 alert(3);
30 };
31 divs[4].onclick=function()
32 {
33 alert(4);
34 }
35 };
36 </script>
37 </head>
38 <body>
39 <div id="box1">
40     <div id="box2">
41            <div id="box3">
42                  <div id="box4">
43                    <div id="box5">
44 
45                    </div>
46                 </div>
47             </div>
48     </div>
49 </div>
50 </body>
51 </html>
View Code

那么我们如何阻止事件冒泡

divs[4].onclick=function(e)
{
e=window.event||e;
alert(4);
e.stopPropagation();
}
View Code

对于Event阻止事件冒泡

e.stopPropagation

cancelBubble(是属性，而不是方法)

我们可以先判断是否存在方法，或属性

然后进行调用

 

posted @ 2015-08-12 12:58  平何去何  阅读(92)  评论(0)    收藏  举报