学习笔记JavaScript没事常看看

其他 2018-09-25 16:34:57 阅读次数: 0
  1. js事件  
  2.   
  3. 一、什么是事件，事件的起因  
  4.   
  5. btn.onclick = function(){  
  6.   
  7.    
  8.   
  9. }  
  10.   
  11. 二、事件流  
  12.   
  13. 1》  事件冒泡：从内到外  
  14.   
  15. 2》  事件捕获：从外到内  
  16.   
  17. 三、鼠标类事件  
  18.   
  19. 1》  onclick   ===è单击事件  
  20.   
  21. 2》ondbclick  ==è双击事件  
  22.   
  23. 3》  oncontextmenu ===è右击事件  
  24.   
  25. 4》  onmouseover === >鼠标移入、穿过（一次）  
  26.   
  27. 5》  onmouseout=è鼠标移出  
  28.   
  29. 6》  onmousemove == >鼠标移入（一直会执行的代码）  
  30.   
  31. 7》  onmousedown === >鼠标按下  
  32.   
  33. 8》  onmouseup =è 鼠标释放  
  34.   
  35. 四、键盘类事件  
  36.   
  37. 1》  onkeydown ====è键盘按下  
  38.   
  39. 2》  onkeyup === 》键盘释放（松开）  
  40.   
  41.    
  42.   
  43. ********************属性：keyCode:得到键盘中的值  
  44.   
  45. 五、其他类事件  
  46.   
  47. 1.      》onload ====è加载（dom 加载事件）  
  48.   
  49. 2.      》onfocus === >得到焦点  
  50.   
  51. 3.      》onblue ===è失去焦点  
  52.   
  53. 4.      》onresize ==== >浏览器或者框架尺寸发生变化时触发的事件  
  54.   
  55. 5.      》onscroll  ==è滚动条发送变化时触发  
  56.   
  57. 6.      》onchange ===== >发生变化时触发  
  58.   
  59. 六、事件处理程序===》添加  
  60.   
  61. 1》  html事件处理程序  ：  
  62.   
  63. 语法：把事件写到节点上  
  64.   
  65. 缺点：HTML和js耦合  
  66.   
  67. 2》  dom0级事件处理程序  
  68.   
  69. 语法：box.onclick = function(){}  
  70.   
  71. 缺点：同样一个事件后面的会覆盖前面的  
  72.   
  73. 3》  dom2级事件处理程序  
  74.   
  75. 语法：box.addEventListener(事件名称,函数,false|true)  
  76.   
  77. 参数1：不需要加on  =èclick  
  78.   
  79. 参数3：false 代表冒泡，true 代表捕获  
  80.   
  81. 缺点：在ie8或者8以下中是不兼容的不支持  
  82.   
  83. 4》  ie事件处理程序  
  84.   
  85. 语法：box.attachEvent(事件名称,函数);  
  86.   
  87. 参数1：需要加on  
  88.   
  89. 5》  跨浏览器事件处理程序(兼容)  
  90.   
  91. dom0级  
  92.   
  93. dom2级  
  94.   
  95. ie事件处理程序  
  96.   
  97. //兼容事件  
  98. function setEvent(dom,evt,fn){  
  99.     if(dom.addEventListener){  
  100.            dom.addEventListener(evt,fn,false);//dom 2级事件处理程序  
  101.    
  102.     }else if(dom.attachEvent){  
  103.            dom.attachEvent("on"+evt,fn);//ie 事件处理程序  
  104.    
  105.     }else{ //浏览器比较老以上都不支持  
  106.            dom["on"+evt ]= fn //dom 0级事件处理程序  
  107.         
  108.     }  
  109. }  
  110.    
  111. //测试  
  112. setEvent(box,"click",function(){alert(1)})  
  113. setEvent(box,"click",function(){alert(2)})  
  114.    
  115.   
  116. 七、删除事件处理程序  
  117.   
  118. dom 0级删除 ===》  
  119.   
  120. 语法：DOM对象.事件名称= null;  
  121.   
  122.          dom2级删除 ===》  
  123.   
  124.                    语法：DOM对象.removeEventListener(事件名称,函数,false|true)  
  125.   
  126.        参数1:不需要加on  
  127.   
  128.        参数2：函数用同一个函数  
  129.   
  130.     ie删除  
  131.   
  132.        语法：DOM对象.detachEvent(事件名称,函数);  
  133.   
  134.        参数1：需要加on  
  135.   
  136.        参数2：函数用同一个函数  
  137.   
  138.         
  139.   
  140.     兼容处理  
  141.   
  142. function removeEvent(dom,evt,fn){  
  143.     if(dom.removeEventListener){  
  144.        dom.removeEventListener(evt,fn,false);  
  145.     }else if(box.detachEvent){  
  146.        dom.detachEvent("on"+evt,fn)  
  147.     }else{  
  148.        dom["on"+evt] = null;  
  149.     }  
  150. }  
  151.    
  152.   
  153. 八、事件对象  
  154.   
  155. 非ie事件对象 === 》参数  
  156.   
  157. ie中事件对象======》 window.event  
  158.   
  159. 跨浏览器事件对象，处理兼容 ====》window.event || e;  
  160.   
  161. var evt = window.event  || e ;  
  162.   
  163. 九、事件对象的属性  
  164.   
  165. a)        target （非ie）==è目标（返回对应的dom 节点）  
  166.   
  167. b)        srcElement(ie中)  
  168.   
  169. 处理兼容 ：事件对象.target || 事件对象.srcElement;  
  170.   
  171. //兼容处理  
  172.   
  173. var tar = e.target || e.srcElement;  
  174.   
  175. c)   clientX   ==è返回当前鼠标位置距离流量器左侧距离  
  176.   
  177. d)   clientY  ==è返回当前鼠标位置距离流量器顶部距离  
  178.   
  179. ****************注意：返回结果没有单位的  
  180.   
  181. 十、事件委托  
  182.   
  183. 原理：冒泡的原理  
  184.   
  185. 优点：  
  186.   
  187. 1、性能较好（提高）  
  188.   
  189.          2、即使后添加的也有效  
  190.   
  191. 十一、事件的阻止冒泡  
  192.   
  193.          语法：  
  194.   
  195.                    事件对象.属性名称  
  196.   
  197. 非IE:  e.stopPropagation() ;//非IE 阻止冒泡  谷歌、火狐都可以  
  198.   
  199. IE:  e.cancelBubble =true; // IE 阻止冒泡   谷歌可以火狐不行  
  200.   
  201.    
  202.   
  203. 兼容处理：  
  204.   
  205. if(e.stopPropagation){  
  206.        e.stopPropagation() ;  
  207.     }else{  
  208.        e.cancelBubble =true;  
  209.     }  
  210.    
  211.   
  212. 十二、事件的阻止默认行为  
  213.   
  214.                    语法：  
  215.   
  216.                    事件对象.属性名称  
  217.   
  218.                    非ie :  e.preventDefault();  
  219.   
  220.                    ie  :  e.returnValue = false ;  
  221.   
  222.        兼容处理：  
  223.   
  224.      
  225.   
  226. //兼容处理  
  227.     if(e.preventDefault) {  
  228.        e.preventDefault(); //非IE  
  229.     }else {  
  230.        e.returnValue = false ; //ie  
  231.     }  
  232.    

[javascript]  view plain  copy
  1. //事件流————--冒泡：从内到外 /捕获：从外到内  
  2. /*var dv1 = document.getElementById("dv1"), 
  3.     dv2 = document.getElementById("dv2"); 
  4.      
  5. dv1.onclick = function(){ 
  6.         alert(1) 
  7. } 
  8. dv2.onclick = function(){ 
  9.         alert(2) 
  10. }*/  
  11. //鼠标事件  
  12. //var box = document.getElementById("box");  
  13. /*box.onclick = function(){ 
  14.     alert(1) 
  15. }*/  
  16. /*box.ondblclick = function(){ 
  17.     alert("双击") 
  18. }*/  
  19. /*box.oncontextmenu = function(){ 
  20.     alert("右击") 
  21. } 
  22. */  
  23. //键盘事件  
  24. /*document.onkeydown = function(){ 
  25.     alert(1) 
  26. } 
  27. document.onkeyup = function(){ 
  28.     alert("释放") 
  29. }*/  
  30. /*document.onkeydown = function(e){ 
  31.     alert(e.keyCode) 
  32. }*/  
  33.   
  34. //事件处理程序  
  35. //html事件处理程序  ：  
  36. /*function fn(num1,num2){ 
  37.     return num1+num2; 
  38. } 
  39. box.onclick = function(){ 
  40.     alert("dom 0级事件处理1") 
  41. } 
  42. box.onclick = function(){ 
  43.     alert("dom 0级事件处理2") 
  44. }//缺点 下边覆盖上面 
  45.  
  46. window.onload = function(){ 
  47.     alert(1) 
  48. } 
  49. window.onload = function(){ 
  50.     alert(2) 
  51. }*/  
  52. //dom0级事件处理程序   缺点 下边覆盖上面  
  53.   
  54. //dom 2级事件处理程序  
  55. //var box = document.getElementById("box");  
  56. //语法：box.addEventListener(事件名称,函数,false|true)  
  57. //box.addEventListener("click",function(){alert(1)},false) ;//false ===冒泡  
  58. //box.addEventListener("click",function(){alert(2)},false) ;//false ===冒泡  
  59.   
  60. //ie中事件处理程序  
  61. //语法：box.attachEvent(事件名称,函数);  
  62. /*box.attachEvent("onclick",function(){ 
  63.     alert(1) 
  64. }) 
  65. box.attachEvent("onclick",function(){ 
  66.     alert(2) 
  67. })*/  
  68.   
  69. //兼容事件  
  70. /*function setEvent(dom,evt,fn){ 
  71.     if(dom.addEventListener){ 
  72.             dom.addEventListener(evt,fn,false);//dom 2级事件处理程序 
  73.  
  74.     }else if(dom.attachEvent){ 
  75.             dom.attachEvent("on"+evt,fn);//ie 事件处理程序 
  76.  
  77.     }else{ //浏览器比较老以上都不支持 
  78.             dom["on"+evt ]= fn //dom 0级事件处理程序 
  79.          
  80.     } 
  81. } 
  82.  
  83. //测试 
  84. setEvent(box,"click",function(){alert(1)}) 
  85. setEvent(box,"click",function(){alert(2)})*/  
  86.   
  87. //删除事件处理程序  
  88. var box = document.getElementById("box");  
  89.   
  90. /*box.onclick = function(){ 
  91.     alert(2); 
  92. } 
  93. box.onclick = null;//dom 0级删除事件 
  94. */  
  95. function fn (){  
  96.     alert(1)  
  97. }  
  98. /*box.addEventListener("click",fn (), 
  99.     false 
  100. ); 
  101. //语法：box.removeEventListener(事件名称,函数,false|true) 
  102. box.removeEventListener("click",fn (), //添加删除用同一个函数 
  103.     false 
  104. );*/  
  105.   
  106. //ie删除  
  107. //box.attachEvent("onclick",fn);  
  108. //box.detachEvent("onclick",fn)  
  109.   
  110. //兼容删除处理  
  111. //可以删除dom 0级 dom 2级 ie  
  112. /*function removeEvent(dom,evt,fn){ 
  113.     if(dom.removeEventListener){ 
  114.         dom.removeEventListener(evt,fn,false); 
  115.     }else if(box.detachEvent){ 
  116.         dom.detachEvent("on"+evt,fn) 
  117.     }else{ 
  118.         dom["on"+evt] = null; 
  119.     } 
  120. }*/  
  121.   
  122. //事件对象  
  123. /*var box = document.getElementById("box"); 
  124.  
  125. box.onclick = function(e){ //mouseEvent 
  126. //  alert(e)    ;//非ie事件对象 === 》参数 
  127. //  alert(arguments.length) ;//只有一个实参 就是事件对象 
  128. //  alert(window.event);//ie中 
  129.     //1>非ie认识的是参数e  ie认识的是window.event 
  130.     var evt = window.event  || e ; 
  131.     alert(evt); 
  132. } 
  133.  
  134. function fn(){ 
  135.     alert(arguments[0]) 
  136. } 
  137.  
  138. fn(5,6) 
  139. */  
  140.   
  141. //  事件对象的属性  
  142. /*var box = document.getElementById("box"); 
  143. box.onclick = function(e){ 
  144.     var e = window.event || e; 
  145. //  alert(e.target);//非ie 中对象属性 
  146. //  alert(e.srcElement)//ie中对象属性 
  147.      
  148.     //兼容处理 
  149.     var tar = e.target || e.srcElement; 
  150.     alert(tar) 
  151. } 
  152. */  
  153.   
  154. //  事件委托  
  155. var btn = document.getElementById("btn"),  
  156.     uls = document.getElementById("uls"),  
  157.     lis = document.getElementsByTagName("li");  
  158.       
  159. /*for(var i  = 0 ;  i < lis.length ;  i++){ 
  160.     lis[i].onclick = function(){ 
  161.         this.style.background = "red"; 
  162.     } 
  163. } 
  164. */  
  165. /* 
  166. btn.onclick = function(){ 
  167.     var oli = document.createElement("li"); 
  168.     uls.appendChild(oli); 
  169. } 
  170. */  
  171. /** 
  172.  * 本身是li 加事件 现在然uls 加事件 
  173.  */  
  174. /*uls.onclick = function(e){ 
  175.      
  176.     var e = window.event || e; //兼容 
  177.     var tar = e.target || e.srcElement ; // 对象属性 ===》目标  
  178.     if(tar.nodeName == "LI"){ 
  179.         tar.style.background = "red"; 
  180.     } 
  181. } 
  182. btn.onclick = function(){ 
  183.     var oli = document.createElement("li"); 
  184.     uls.appendChild(oli); 
  185. } 
  186. * */  
  187. //clientX   clientY   
  188. /*document.onclick = function(e){ 
  189.     var e  = window.event || e ; 
  190.     alert(e.clientX);//当前鼠标距离浏览器位置 
  191. }*/  
  192.   
  193.   
  194. //事件的阻止冒泡  
  195. /*var dv1 = document.getElementById("dv1"), 
  196.     dv2 = document.getElementById("dv2"); 
  197. dv1.onclick = function(){ 
  198.     alert("dv1") 
  199. } 
  200. dv2.onclick = function(e){ 
  201.  
  202.     var e = window.event || e; 
  203. //  e.stopPropagation() ;//非IE 阻止冒泡 
  204. //  e.cancelBubble =true; // IE 阻止冒泡 
  205.  
  206. //兼容 
  207.  
  208.     if(e.stopPropagation){ 
  209.         e.stopPropagation() ; 
  210.     }else{ 
  211.         e.cancelBubble =true; 
  212.     } 
  213.     alert("dv2"); 
  214. }*/  
  215.   
  216. //事件阻止默认行为  
  217. var oA = document.getElementById("oA");  
  218.   
  219. oA.onclick = function(e){  
  220.     var e  = window.event || e ;   
  221.     e.preventDefault();  
  222. }  
  223.   
  224. var box = document.getElementById("box");  
  225. box.oncontextmenu = function(e){ //右击  
  226.     var e  = window.event || e ;   
  227. //  e.preventDefault(); //非IE  
  228. //  e.returnValue = false ; //ie  
  229.   
  230. //兼容处理  
  231.     if(e.preventDefault) {  
  232.         e.preventDefault(); //非IE  
  233.     }else {  
  234.         e.returnValue = false ; //ie  
  235.     }  
  236.     alert(1);  
  237. }  
  238.   
  239. document.oncontextmenu = function(e){ //屏蔽右键默认  
  240. //  var e  = window.event || e ;   
  241. //兼容处理  
  242.     if(e.preventDefault) {  
  243.         e.preventDefault(); //非IE  
  244.     }else {  
  245.         e.returnValue = false ; //ie  
  246.     }  
  247.     e.preventDefault();  
  248. }  
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <link rel="stylesheet" href="style.css" />  
  7.           
  8.     </head>  
  9.     <body>  
  10.         <!--鼠标事件-->  
  11.         <!--<div id="box" onclick="alert(fn(5,1))">我是box</div>--><!--html事件处理程序  ：-->     
  12.         <!-- 事件属性-->  
  13.         <!--<div id="box">  
  14.             <p> 我是box </p>  
  15.             <span> 1111 </span>  
  16.         </div>-->  
  17.         <!--  事件委托-->  
  18.         <!--<input type="button" id="btn" value="添加"/>  
  19.         <ul id="uls">  
  20.             <li>1</li>  
  21.             <li>2</li>  
  22.             <li>3</li>  
  23.         </ul>-->  
  24.         <!--事件阻止冒泡-->  
  25.         <!--<div id="dv1">  
  26.             <div id="dv2"></div>  
  27.         </div>-->  
  28.         <!--事件阻止默认行为-->  
  29.         <a href="http://www.baidu.com" id="oA">跳转页面</a>  
  30.         <form action="a.html"><input type="submit" /></form>  
  31.         <div id="box" style="width:300px;height:300px;background:#ADFF2F"></div>  
  32.           
  33.         <script src="script.js"></script>  
  34.     </body>  
  35. </html>  
  36. <!--事件流  
  37.     <div id="dv1">  
  38.             <div id="dv2"></div>  
  39.         </div>-->  

猜你喜欢

转载自blog.csdn.net/rootzcl/article/details/80715329
今日推荐
周排行
8种防盗链的方法
php的序列化和反序列化
Java 8：CompletableFuture
Android版本差异适配方案(5.0-9.0)
makedownpad使用
Spring Boot 使用AOP切面实现后台日志管理模块
实战SSM_O2O商铺_44【DES加密】 关键配置信息进行DES加密
ACM排行榜说明
【转】SQL重复记录查询
板球和秃子威力那个大
每日归档
更多
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022