JavaScript之DOM的三大事件及事件模型

最新推荐文章于 2024-06-08 16:17:53 发布

Albert-Wilson

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量3.1k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript dom 事件

本文链接：https://blog.csdn.net/hxwm_8937/article/details/77483416

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
 DOM的三大事件 
 ：1.鼠标事件 

 
 2.键盘事件 

 
 3.HTML事件 

 
 1.鼠标事件 

 
 click 
 ：单击  
 dblclick 
 ：双击 

 
 mousedown：按下鼠标 mousepress：按下到松开鼠标的过程  

 
 mouseup 
 ：松开鼠标

 
 mouseove：鼠标移到什么上 mouseout：鼠标从哪移开 

 
 mousemove：移动鼠标  

 
 mouseenter：鼠标进入 mouseleave：鼠标离开 

 
 <body> 

 
 <button 
   
 onclick 
 ="myClick()">单击显示内容</button> 

 
 <button 
   
 ondblclick 
 ="myDBclick()">双击显示内容</button> 

 
 <button 
   
 onmousedown 
 ="myMousedown()"  
 onmouseup 
 ="myMouseup()">按下和松开鼠标显示内容</button> 

 
 <button  
 onmouseover 
 ="myMouseover()"  
 onmouseout 
 ="myMouseout()">移到和移开button上显示内容</button> 

 
 <button  
 onmousemove 
 ="myMousemove()">移动鼠标显示内容</button> 

 
 <button  
 onmouseente 
 r 
 ="myMouseEnter()"  
 onmouseleave 
 ="myMouseLeave()">鼠标进入和离开</button> 

 
 </body> 

 
 <script> 

 
 function myClick() { 

 
 console.log("你单击了按钮"); 

}

 
 function myDBclick() { 

 
 console.log("你双击了按钮"); 

}

 
 function myMousedown() { 

 
 console.log("你按下了鼠标"); 

}

 
 function myMouseup() { 

 
 console.log("你松开了了鼠标"); 

}

 
 function myMouseover() { 

 
 console.log("你把鼠标移到了按钮上"); 

}

 
 function myMouseout() { 

 
 console.log("你移开了鼠标"); 

}

 
 function myMousemove() { 

 
 console.log("你移动了鼠标"); 

}

 
 function myMouseEnter() { 

 
 console.log("鼠标进入！") 

}

 
 function myMouseLeave() { 

 
 console.log("鼠标离开！") 

}

 
 </script> 

 
 2.键盘事件 

 
 keydown：按下键盘 mousepress：按下到松开按键的过程  keyup：松开按键 

 
 （1）将输入的小写字母转化为大写字母 

 
 <body> 

 
 <input id="name" type="text"  
 onkeydown 
 ="myKeyDown( 
 this.id) 
 "  

 
 onkeyup 
 ="myKeyUp( 
 this.id) 
 "> 

 
 </body> 

 
 <script> 

 
 /*输出输入的字符*/ 

 
 function myKeyDown(id) { 

 
 console.log(document.getElementById(id).value); 

}

 
 /*按键结束，字体转换为大写*/ 

 
 function myKeyUp(id) { 

 
 var text = document.getElementById(id).value; 

 
 document.getElementById(id).value = text.toUpperCase(); 

}

 
 （2）根据键盘按键数字代码如何转化为按键实际意义区分浏览器 

 
 /* 
 onkeydown：不区分大小写 
 */ 

 
 document.onkeydown = function (event) { 

 
 var code = 0; 

 
 if( 
 window.event 
 ){ 

 
 code = event.keyCode; /*IE chrome*/

 
 }else { 

 
 code = event.which; /*W3c标准* 
 /

}

 
 if(code == 37){ 

 
 console.log("左键") 

 
 }else if(code == 38){ 

 
 console.log("上键") 

 
 }else if(code == 39){ 

 
 console.log("右键") 

 
 }else if(code == 40){ 

 
 console.log("下键") 

}

 
 console.log(event.keyCode); 

}

 
 /* 
 onkeypress ：区分大小写 
 */ 

 
 window.onkeypress = function (event) { 

 
 console.log(event.keyCode) 

}

 
 </script> 

 
 3.HTML事件 

 
 load 
 ： 文档加载完毕  
 Select 
 ：选择文本内容  
 Change 
 ：改变内容 

 
 Focus 
 ：获得光标  
 resize 
 ：网页窗口变化  
 scroll 
 ： 滚动条滚动 

  <div style="height: 5000px"> 

  <input id="name" type="text" οnselect="mySelect(this.id)"> 

  <input id="name2" type="text" οnchange="myChange(this.id)"> 

  <input id="name3" type="text" οnfοcus="myFocus(this.id)"> 

  </div> 

  </body> 

  <script> 

 
 window.onload = function () { 

  console.log("文档加载完毕！"); 

};

  function mySelect(id) { 

 
 var text = document.getElementById(id).value; 

  console.log(text); 

}

  function myChange(id) { 

 
 var text = document.getElementById(id).value; 

  console.log(text); 

}

  function myFocus() { 

  console.log("获得光标") 

}

 
 window.onresize = function () { 

  console.log("窗口变化！") 

}

 
 window.onscroll = function () { 

  console.log("滚动条滚动") 

}

  </script> 

 
   DOM之事件模型：脚本模型 
  
   内联模型 
  
   动态绑定 
  
   <body> 
  
   <!--行内绑定：脚本模型--> 
  
   <button  
   οnclick="javascrpt:alert('Hello')" 
   >Hello1</button> 
  
   <!--内联模型--> 
  
   <button  
   οnclick="showHello()" 
   >Hello2</button> 
  
   <!--动态绑定--> 
  
   <button 
     
   id="btn3" 
   >Hello3</button> 
  
   </body> 
  
   <script> 
  
   /* 
   DOM0：同一个元素，同类事件只能添加一个，如果添加多个， 
  
   * 后面添加的会覆盖之前添加的 
   */ 
  
   function shoeHello() { 
  
   alert("Hello"); 
  
   } 
  
   var btn3 = document.getElementById("btn3"); 
  
   btn3.onclick = function () { 
  
   alert("Hello"); 
  
   } 
  
   /* 
   DOM2:可以给同一个元素添加多个同类事件* 
   / 
  
   btn3.addEventListener("click",function () { 
  
   alert("hello1"); 
  
   }); 
  
   btn3.addEventListener("click",function () { 
  
   alert("hello2"); 
  
   }) 
  
   if (btn3.attachEvent){ 
  
   /*IE*/ 
  
   btn3.attachEvent("onclick",function () { 
  
   alert("IE Hello1"); 
  
   }) 
  
   }else { 
  
   /*W3C*/ 
  
   btn3.addEventListener("click",function () { 
  
   alert("W3C Hello"); 
  
   }) 
  
   } 
  
   </script>