点击事件

1-1.onclick


  1. element.onclick = function(){
  2. //执行code 
  3. }


  1. <body>
  2.     <ul>
  3.         <li>html </li>
  4.         <li>css </li>
  5.         <li>javascript </li>
  6.     </ul>
  7.     <script>
  8.         var lis = document.getElementsByTagName("li");
  9.         // console.log(lis)
  10.         // lis.onclick = function()
  11.         // {
  12.         //     console.log(1)
  13.         // }
  14.         for( var i=0;i<lis.length;i++){
  15.             lis[i].onclick = function(){
  16.                 console.log(this)
  17.                 this.style.display ="none";
  18.             }
  19.         }
  20.     </script>
  21. </body>

1-2 onfocus/onblur（获取/失去焦点）

  1. <body>
  2.     <input type="text" id="test">
  3.     <script>
  4.         var test = document.getElementById("test");
  5.         test.onfocus = function(){
  6.             this.style.backgroundColor ="red"
  7.         }
  8.         test.onblur = function(){
  9.             this.style.backgroundColor ="#fff"
  10.         }
  11.     </script>
  12. </body>

1-3 onmouseover/onmouseout（鼠标悬停/移开）

  1. <body>
  2.     <p id="p">hello world</p>
  3.     <script>
  4.         var p =document.getElementById("p");
  5.         p.onmouseover = function(){
  6.             this.style.backgroundColor = "red"
  7.         }
  8.         p.onmouseout =function(){
  9.         this.style.backgroundColor = "yellow"   
  10.         } 
  12.     </script>
  13. </body>

window相关事件

2-1onload

window.onload 页面在加载完毕之后才会触发 

  1. <script src="js/index.js"></script>
  2. <p id="p">hello world</p>
  5. window.onload = function(){
  6. var p =document.getElementById("p");
  7. console.log(p)
  8. }

2-2onresize 窗口大小改变的时候触发

  1.     <script >
  2.         window.onresize = function(){
  3.             console.log("窗口改变了")
  4.         }
  5.     </script>

2-3onscroll 窗口滚动时触发

  1. <body>
  2.     <div>
  4.     </div>
  5.     <script>
  6.         window.onscroll = function () {
  7.             console.log(1)
  8.         }
  9.     </script>
  10. </body>

onchange 输入框内容改变时触发

4-1

  1.     <input type="text" id="input">
  2.     <script>
  3.         var input = document.getElementById("input");
  4.         input.onchange = function(){
  5.             console.log("hello")
  6.         }
  7.     </script>

键盘事件与KeyCode属性

event.key 获取键盘按下对应的键 event.keyCode 获取按下的键的状态码

4-1onkeydown（用户按下键盘时触发）

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         var app = document.getElementById("app");
  5.         app.onkeydown = function(event){
  6.             console.log(event)
  7.             console.log(event.key)
  8.             console.log(event.keyCode)
  9.         }
  10.     </script>
  11. </body>
  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         var app = document.getElementById("app");
  5.         app.onkeydown = function(event){
  6.             console.log(event.keyCode)
  7.             if(event.keyCode==13){       ----Enter键的keyCode==13
  8.                 console.log(this.value)
  9.             }
  10.         }
  11.     </script>
  12. </body>

4-2 onkeypress 在键盘按键按下并释放一个键时发生

  1. <input type="text" id="app">
  2.     <script>
  3.         var app = document.getElementById("app");
  4.         app.onkeypress = function(event){
  5.             console.log(event)
  7.         }
  8.     </script>

4-3 onkeyup 在键盘按键松开时发生

  1. <input type="text" id="app">
  2.     <script>
  3.         var app = document.getElementById("app");
  4.         app.onkeyup = function(event){
  5.             console.log(event)
  7.         }
  8.     </script>

内联事件

  1. <body>
  2.     <button onclick="go()">btn</button>
  3.     <script>
  4.         function go(){
  5.             console.log("hello world")
  6.         }
  7.     </script>
  8. </body>