码迷，mamicode.com
首页 > 编程语言 > 详细

网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中

时间：2015-08-07 01:46:48      阅读：284      评论：0      收藏：0      [点我收藏+]

标签：

 JS事件

1、js事件通常和函数结合来使用，这样可以通过发生的事件来驱动函数的执行，从而引起html出现不同的效果。

2、属性（当这些事件的属性发生改变时，会触发function{}的函数）：

1）onabort:当图像加载被中断时，会引发function内的函数。

2）onbur:当元素失去焦点；

3）onfocus:当元素获得焦点，获得焦点，就是文本框里面的内容修改

4）onclick:鼠标点击某个对象

技术分享

 

技术分享

5）ondbclick:鼠标双击某个对象

6）onerror:当加载文档或图像时发生某个错误

7）onchange:当用户改变域的内容（onchange事件常结合对输入的字段验证来使用，常用语表单验证身份证、邮箱注册及登录、区号等等的格式是否正确）

技术分享

8）onkeydown:某个键盘的键被按下

9）onkeypress:某个键盘的键被按下或按住

10）onkeyup:某个键盘的键被松开

11）onload:某个页面或图像被完成加载

技术分享

12）onmousedown:某个鼠标按键被按下（onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。）

13）onmousemove:鼠标被移动

14）onmouseout:鼠标从某元素移开

15）onmouseover:鼠标被移动到某元素之上

16）onmouseup:某个鼠标按钮被松开（区别onkeyup）

17）onreset:重置按钮被点击

18）onresize:窗口或框架被调整尺寸

19）onselect:文本被选定

20）onsubmit:提交按钮被点击

21）onunload:用户退出页面

 

二、事件传输（注意与c#的参数传递区别）

1、整型参数：直接写在括号里

eg.

技术分享
 <body>
<div class="t1" onclick="a(0)"></div>   //a(0)
<div class="t1" onclick="a(1)"></div>


</body>

<script type="text/javascript">

var t=new Array();
t[0]="url(05.gif)";
t[1]="url(06.gif)";


function a(m)
{
    n.style.backgroundImage=t[m];
    if(m==8)
    {
        alert("你失败了！");
    }
}

</script>
技术分享

 

2.字符串 参数，双引号嵌套，里面要用单引号（不只是在传参的时候）

eg.

技术分享
<body>
  <div class="t1" onclick="a(‘abc‘)"></div>
<body/>

<script type="text/javascript">

function a(n)
{
    alert(n);
}

</script>

输出结果：
abc
技术分享

 

 3.传自身元素：参数写this，this代表该元素(this是JavaScript中功能最强大的关键字之一。)(形参的传递不止一个)

eg.扫雷游戏

技术分享
 1 <body>
 2 //方式一利用this调用自身
 3 <div id="d1">
 4     <div class="t1" onclick="a(this,0)"></div>
 5     <div class="t1" onclick="a(this,1)"></div>
 6     <div class="t1" onclick="a(this,2)"></div>
 7     <div class="t1" onclick="a(this,3)"></div>
 8     <div class="t1" onclick="a(this,4)"></div>
 9     <div class="t1" onclick="a(this,5)"></div>
10     <div class="t1" onclick="a(this,6)"></div>
11     <div class="t1" onclick="a(this,7)"></div>
12     <div class="t1" onclick="a(this,8)"></div>
13     <div class="t1" onclick="a(this,9)"></div>
14     <div class="t1" onclick="a(this,10)"></div>
15     <div class="t1" onclick="a(this,11)"></div>
16     <div class="t1" onclick="a(this,12)"></div>
17     <div class="t1" onclick="a(this,13)"></div>
18     <div class="t1" onclick="a(this,14)"></div>
19     <div class="t1" onclick="a(this,15)"></div>
20     <div class="t1" onclick="a(this,16)"></div>
21     <div class="t1" onclick="a(this,17)"></div>
22     <div class="t1" onclick="a(this,18)"></div>
23     <div class="t1" onclick="a(this,19)"></div>
24 </div>
25 
26 </body>
27 
28 <script type="text/javascript">
29 
30 var t=new Array();//数组
31 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)";
32 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)";
33 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)";
34 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)";
35 
36 
37 function a(n,m)
38 {
39     /*var s=new Array();
40     s=document.getElementsByClassName("t1");*/
41     n.style.backgroundImage=t[m];
42     if(m==8)
43     {
44         alert("你失败了！");
45     }
46 }
47 
48 </script>
49 
50 方式二 利用document.getElementsByClassName（）返回数组特性
51 利用class数组
52 <div id="d1">
53     <div class="t1" onclick="a(0)"></div>
54     <div class="t1" onclick="a(1)"></div>
55     <div class="t1" onclick="a(2)"></div>
56     <div class="t1" onclick="a(3)"></div>
57     <div class="t1" onclick="a(4)"></div>
58     <div class="t1" onclick="a(5)"></div>
59     <div class="t1" onclick="a(6)"></div>
60     <div class="t1" onclick="a(7)"></div>
61     <div class="t1" onclick="a(8)"></div>
62     <div class="t1" onclick="a(9)"></div>
63     <div class="t1" onclick="a(10)"></div>
64     <div class="t1" onclick="a(11)"></div>
65     <div class="t1" onclick="a(12)"></div>
66     <div class="t1" onclick="a(13)"></div>
67     <div class="t1" onclick="a(14)"></div>
68     <div class="t1" onclick="a(15)"></div>
69     <div class="t1" onclick="a(16)"></div>
70     <div class="t1" onclick="a(17)"></div>
71     <div class="t1" onclick="a(18)"></div>
72     <div class="t1" onclick="a(19)"></div>
73 </div>
74 
75 </body>
76 
77 <script type="text/javascript">
78 
79 var t=new Array();//数组
80 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)";
81 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)";
82 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)";
83 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)";
84 
85 
86 function a(m)
87 {
88     var s=new Array();
89     s=document.getElementsByClassName("t1");
90         s[m].style.backgroundImage=t[m];
91     if(m==8)
92     {
93         alert("你失败了！");
94     }
95 }
96 
97 </script>
技术分享

 

三、练习题部分

 eg1.图片轮播

（注意

window.setInterval("a()",1000);与window.setTimeout("a()",1000);应用时，一定要注意放的位置。先执行延时再执行代码（如果放在这两句后面的代码就不会执行了）

）

技术分享
<div id="d" style="background-image:url(328477.jpg)"></div>

<input type="button" value="按钮" onclick="b()"/>
<input type="button" value="暂停" onclick="c()"/>
</body>
<script type="text/javascript">

var t= new Array();
t[0]="url(328477.jpg)";
t[1]="url(330527.jpg)";
t[2]="url(343107.jpg)";
var n=0;

function a()
{
    if(n==2)
    {
        n=0;
    }
    else
    {
        n++;
    }
    document.getElementById("d").style.backgroundImage=t[n];//用
    /*window.setTimeout("a()",1000);*/
}

/*window.setTimeout("a()",1000);*/
var r= new Array();
function b()
{
    r[0]=window.setInterval("a()",1000);//用数组存储，因为不清楚window.setInterval("a()",1000)类型
}

function c()
{
    window.clearInterval(r[0]);
}
</script>
技术分享

 

 eg2、广告弹窗

技术分享
方法一：比较简便
<body>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<div id="gg" style="display:none"></div>
</body>
<script type="text/javascript">
function showg()
{
    document.getElementById("gg").style.display="block";
    window.setTimeout("hideg()",5000);
}
function hideg()
{
    document.getElementById("gg").style.display="none";
}
window.setTimeout("showg()",5000);

</script>
方式二 （自己做的）
<div id="d1"></div>
<div id="d2" style="display:none"></div>

</body>
<script type="text/javascript">
var n=9;
function a()
{
    n--;
    if(n>=0)
    {
        window.setTimeout("a()",1000);
        if(n==5)
        {
            document.getElementById("d2").style.display="block";
        }
        if(n==0)
        {
            document.getElementById("d2").style.display="none";
        }
    }
    
}
window.setTimeout("a()",1000);
</script>
技术分享

 

eg3.关灯效果

技术分享
 1 <style type="text/css">
 2 #gd
 3 {
 4     width:100%;
 5     height:100%;
 6     background-color:#333;
 7     filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;
 8     position:fixed;
 9     top:0px;
10     left:0px;
11     z-index:1;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <div style="z-index:2; height:30px; position:absolute;"><input type="button" value="开关灯" onclick="deng()" /></div>
18 <img src="1-2.jpg"/>
19 <img src="1-2.jpg"/>
20 <img src="1-2.jpg"/>
21 <div id="gd" style="display:none"></div>
22 </body>
23 <script type="text/javascript">
24 function deng()
25 {
26     //alert("ss");
27     var s = document.getElementById("gd").style.display;
28     if(s=="block")
29     {
30         document.getElementById("gd").style.display="none";
31     }
32     else
33     {
34         document.getElementById("gd").style.display="block";
35     }
36 }
37 </script>
技术分享

 

 eg4、光棒效果

技术分享
<body>
<table width="600" border="1" cellpadding="0" cellspacing="0">
  <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style=" padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style=" padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style=" padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style=" padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style=" padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<select>
    <option>11</option>
    <option>11</option>
    <option>11</option>
</select>
</body>
<script type="text/javascript">
function showcolor(a)
{
    a.style.backgroundColor="white";
}
function huifu(b)
{
    b.style.backgroundColor="#3F0";
}
</script>
技术分享

 事件冒泡：

当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的也会触发。

技术分享
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> New Document </TITLE>
 5   <META NAME="Generator" CONTENT="EditPlus">
 6   <META NAME="Author" CONTENT="">
 7   <META NAME="Keywords" CONTENT="">
 8   <META NAME="Description" CONTENT="">
 9  </HEAD>
10 
11  <BODY>
12   <div onclick="test()">
13     <div onclick="test()">
14         <div onclick="test()">阻止事件冒泡</div>
15     </div>
16 </div>
17  </BODY>
18 </HTML>
19 <SCRIPT LANGUAGE="JavaScript">
20 <!--
21     //阻止事件冒泡
22     function stopEventBubble(event){
23         var e=event || window.event;
24 
25         if (e && e.stopPropagation){
26             e.stopPropagation();    
27         }
28         else{
29             e.cancelBubble=true;
30         }
31     }
32 
33     //测试方法，调用时，直接调用test()或者test(event)，前者默认在调用最后一个未对应的参数传递事件
34     function test(evt){
35         alert(‘hahaha‘);
36         stopEventBubble(evt);
37     }
38 //-->
39 </SCRIPT>
技术分享

 

 eg.5做一个漂亮的下拉菜单选择框

技术分享
 1 <style type="text/css">
 2 *{margin:0px auto;
 3 padding:0px;}
 4 .m
 5 {
 6     width:200px;
 7     height:30px;
 8      padding: 0px; line-height: 1.8; color: rgb(128, 0, 128);">339;
 9     color:white;
10     font-weight:bold;
11     text-align:center;
12     line-height:30px;
13     vertical-align:middle;
14 }
15 #txt
16 {
17     font-size:14px;
18     text-align:center;
19 }
20 </style>
21 </head>
22 
23 <body>
24 <div style="width:100%; height:600px;" onclick="hidemenu()">
25     <div style="width:200px">
26         <input id="txt" type="text" value="" style="width:196px; height:28px;" onclick="showmenu()" />
27         <div id="menu" style="display:none">
28             <div class="m" onmouseover="change(this)" onclick="selectme(this)">家电</div>
29             <div class="m" onmouseover="change(this)" onclick="selectme(this)">服装</div>
30             <div class="m" onmouseover="change(this)" onclick="selectme(this)">数码</div>
31             <div class="m" onmouseover="change(this)" onclick="selectme(this)">食品</div>
32             <div class="m" onmouseover="change(this)" onclick="selectme(this)">玩具</div>
33         </div>
34     </div>
35 </div>
36 </body>
37 <script type="text/javascript">
38 
39     //第1步、如何显示下拉列表
40     function showmenu()
41     {
42         var d = document.getElementById("menu");
43         d.style.display="block";
44         stopEventBubble(event);//由于受外层div嵌套影响，加上阻止事件冒泡
45     }
46 
47     //第2步、如何隐藏下拉列表
48     function hidemenu()
49     {
50         var d = document.getElementById("menu");
51         d.style.display="none";
52     }
53 
54     //第3步、下拉菜单的变色效果
55     function change(a)
56     {
57         huifu();//让他恢复默认的颜色效果，目的只让this本身变色
58         a.style.backgroundColor="#60F";
59     }
60     //恢复默认 下拉菜单的原本 背景颜色
61     function huifu()
62     {
63         var s = document.getElementsByClassName("m");
64         for(var i=0; i<s.length;i++)
65         {
66             s[i].style.backgroundColor="#339";
67         }
68     }
69     
70     
71     //第4步、点击下拉列表，改变输入框中的value
72     function selectme(a)
73     {
74         document.getElementById("txt").value=a.innerText;
75     }
76     
77     
78     //阻止事件冒泡函数
79     function stopEventBubble(event){
80         var e=event || window.event;
81 
82         if (e && e.stopPropagation){
83             e.stopPropagation();    
84         }
85         else{
86             e.cancelBubble=true;
87         }
88     }
89 </script>
90 </html>
技术分享

eg6、”踩雷游戏“

技术分享
 1 <style type="text/css">
 2 .d
 3 {
 4     width:200px;
 5     height:200px;
 6     float:left;
 7      padding: 0px; line-height: 1.8; color: rgb(128, 0, 128);">039;
 8     border:1px solid white;
 9 }
10 </style>
11 </head>
12 
13 <body>
14 <div id="wai">
15    
16 </div>
17 </body>
18 <script type="text/javascript">
19 var img = new  Array();
20 img[0]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
21 img[1]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
22 img[2]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
23 img[3]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
24 img[4]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
25 img[5]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
26 img[6]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
27 img[7]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
28 img[8]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
29 jiazai();
30 
31 //利用函数进行div的布局，简单
32 function jiazai()
33 {
34     var s = "";
35     for(var i=0;i<9;i++)
36     {
37         if(i==2 || i==5)
38         {
39             s=s+" <div class=‘d‘ onclick=‘showimg(this,"+i+")‘></div><div style=‘clear:both‘></div>";
40         }
41         else
42         {
43             s = s+" <div class=‘d‘ onclick=‘showimg(this,"+i+")‘></div>";
44         }
45     }
46     
47     var d = document.getElementById("wai");
48     d.innerHTML=s;
49 }
50 
51 function showimg(a,b)
52 {
53     a.style.backgroundImage=img[b];
54     if(b==6)
55     {
56         alert("踩到雷了！");
57         window.close();
58     }
59 }
技术分享

 

 

方式二、利用透明度效果（将大DIV设背景图片，小DIV设背景颜色并设置触发的事件（当点击小DIV时它的背景颜色变为透明））

技术分享
 1 <head>
 2 <title>无标题文档</title>
 3 <style type="text/css">
 4 *
 5 {
 6     margin:0px auto;
 7     padding:0px;
 8 }
 9 #a1 div
10 {
11     width:100px;
12     height:100px;
13     background-color:#09F;
14     border:1px solid black;
15     float:left;
16 }
17 #a1
18 {
19     width:410px;
20     height:410px;
21     background-image:url(../../../Pictures/1437459768106.jpg);
22 }
23 </style>
24 </head>
25 
26 <body>
27 <div id="a1">
28     <div id="aa1" onclick="pic(this)"></div>
29     <div id="aa2" onclick="pic(this)"></div>
30     <div id="aa3" onclick="pic(this)"></div>
31     <div id="aa4" onclick="pic(this)"></div>
32     <div id="bb1" onclick="pic(this)"></div>
33     <div id="bb2" onclick="pic(this)"></div>
34     <div id="bb3" onclick="pic(this)"></div>
35     <div id="bb4" onclick="pic(this)"></div>
36     <div id="cc1" onclick="pic(this)"></div>
37     <div id="cc2" onclick="pic(this)"></div>
38     <div id="cc3" onclick="pic(this)"></div>
39     <div id="cc4" onclick="pic(this)"></div>
40     <div id="dd1" onclick="pic(this)"></div>
41     <div id="dd2" onclick="pic(this)"></div>
42     <div id="dd3" onclick="pic(this)"></div>
43     <div id="dd4" onclick="pic(this)"></div>
44 </div>
45 </body>
46 <script type="text/javascript">
47 function pic(a)
48 {
49     a.style.opacity="0";
50 }
51 </script>

 

技术分享

 eg7、文字的渐入效果（逐渐出现）

技术分享
 1 <style type="text/css">
 2 #shi
 3 {
 4     font-family:"Times New Roman", Times, serif;
 5     font-size:40px;
 6     font-weight:bold;
 7     color:#60F;
 8     height:50px;
 9     width:500px;
10 }
11 </style>
12 </head>
13 
14 <body>
15     <div id="wai" style="width:0px; height:50px; overflow:hidden;">
16         <div id="shi">床前明月光</div>
17     </div>
18 </body>
19 <script type="text/javascript">
20 showshi();
21 function showshi()
22 {
23     var d = document.getElementById("wai");
24     if(parseInt(d.style.width)<500)
25     {
26         var w = parseInt(d.style.width)+1;
27         d.style.width= w+"px";
28         window.setTimeout("showshi()",20);
29     }
30     
31 }
32 </script>
技术分享

网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中

标签：

原文地址：http://www.cnblogs.com/xtxtx/p/4709577.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！