微信扫一扫打赏支持

js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

js课程 5-13  js事件绑定和鼠标事件注意事项有哪些

一、总结

一句话总结：js代码的灵魂就是改变标签的属性和样式，就这两种。

 

1、js触发改的东西是哪两样？

属性和样式

 

2、js如何让页面用标题显示测试的数据？

document.title

 

3、循环单击怎么实现（代码优化的思想：灵活）？

如果判断是this.src是a.png就让它变成b.png并不是最好的方式，最好的方式是让i++，来判断i的奇偶，而且前一种在图片发生改变的时候就失效了，后一种并不会，所以第二种方法更加灵活，值得推荐，其实第二种就是代码优化的思想

18 <script>
19 //js特效
20 
21 imgobj=document.getElementById('imgid');
22 
23 i=0;
24 imgobj.onclick=function(){
25     if(i%2==0){
26         this.src='b.png';
27     }else{
28         this.src='a.png';
29     }
30     i++;
31 }
32 </script>

 

 

二、js事件绑定和鼠标事件注意事项有哪些

1、相关知识

js特效:
1.触发事件
2.属性改变
3.样式改变

绑定事件:
1.标签身上
2.js代码中

鼠标事件:
• onclick
• ondblclick
• onmouseenter
• onmouseleave
• onmousemove

实例:循环单击!
 

 

2、代码

鼠标循环单击

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         img{
 8             cursor:pointer;
 9             position: absolute;
10             top:0px;
11             left:0px;
12         }
13     </style>
14 </head>
15 <body>
16     <img src="a.png" id="imgid">    
17 </body>
18 <script>
19 //js特效
20 
21 imgobj=document.getElementById('imgid');
22 
23 i=0;
24 imgobj.onclick=function(){
25     if(i%2==0){
26         this.src='b.png';
27     }else{
28         this.src='a.png';
29     }
30     i++;
31 }
32 </script>
33 </html>

 

 

 

 
posted @ 2018-07-12 22:55  范仁义  阅读(484)  评论(0)  编辑  收藏  举报