JavaScript Class 7

Posted Observer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript Class 7相关的知识,希望对你有一定的参考价值。

学习内容:

1.事件监听

 1 <body>
 2         <input type="button" onclick="show1()" value="按钮1">
 3     <input type="button" id="bt2" value="按钮2">
 4     <input type="button" id="bt" value="按钮3">
 5         <input type="button" id="re" value="按钮4">
 6     <script>
 7         function show1(){
 8         alert("这是第一种监听方式:绑定html");
 9     }
10     function show2(){
11         alert("这是第二种监听方式:绑定DOM");
12     }
13     document.getElementById("bt2").onclick=show2;
14         
15     var bt = document.getElementById("bt");
16     bt.addEventListener("click",show);//可添加多个事件监听器
17     function show(){
18         alert("添加了监听事件");
19     }
20          document.getElemengtById("re").removeEventListener("click",show)//移除监听器
21     </script>
22 
23 </body>        

2.事件冒泡

事件会从子元素到父元素顺序执行

 1 <body onClick="show(‘body<br>‘)">
 2     <div onClick="show(‘div<br>‘);">
 3         <p onClick="show(‘p<br>‘);">click me</p>
 4     </div>
 5     <div id="display"></div>
 6         <script>
 7         function show(sText){
 8             var oDiv=document.getElementById("display");
 9             oDiv.innerHTML+=sText;
10             }
11      </script>
12 </body>    

 3.动图

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6     <style>
 7         #content {
 8             margin: 80px 330px;
 9         }
10         input {
11             height: 20px;
12             width: 20px;
13             border-radius: 50%;
14             margin-left: 30px;
15             border: none;
16             background-color: cornflowerblue;
17             color: azure;
18         }
19         input:hover {
20             opacity: 0.6;
21         }
22     </style>
23     <script>
24         var img = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"];
25         var a = document.getElementsByTagName("input");//将所有input存为数组
26         function cImg(va){
27             var v = va.value-1;
28             document.getElementById("img").src=img[v];
29         }
30         var n=0;
31         function pre(){
32             if(n==0){
33                 n=7;    
34             }else{
35                 n--;
36             }
37             document.getElementById("img").src=img[n];
38         }
39         function ne(){
40             if(n==7){
41                 n=0;
42             }else{
43                 n++;
44             }
45             document.getElementById("img").src=img[n];
46         }
47         
48         timer = setInterval("ne()",2000);
49         function s(){    
50             clearInterval(timer);
51         }
52         function t(){
53             timer = setInterval("ne()",2000);
54         }
55         window.onload=function(){
56             
57             for(i=0;i<a.length;i++){
58                 a[i].addEventListener("mouseover",s);
59                 a[i].addEventListener("mouseout",t);
60             }
61         }
62     </script>
63 </head>
64 
65 <body>
66     <div id="content">
67         <img src="1.jpg" alt="" id="img">
68         <br/>
69         <input type="button" value="U" onClick="pre()">
70         <input type="button" value="1" onClick="cImg(this)">
71         <input type="button" value="2" onClick="cImg(this)">
72         <input type="button" value="3" onClick="cImg(this)">
73         <input type="button" value="4" onClick="cImg(this)">
74         <input type="button" value="5" onClick="cImg(this)">
75         <input type="button" value="6" onClick="cImg(this)">
76         <input type="button" value="7" onClick="cImg(this)">
77         <input type="button" value="8" onClick="cImg(this)">
78         <input type="button" value="D" onClick="ne()">
79     </div>
80 </body>
81 </html>

 

以上是关于JavaScript Class 7的主要内容,如果未能解决你的问题,请参考以下文章

React 函数组件与class组件的区别

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

组件&Props

常用Javascript代码片段集锦