为了让我们更好的和浏览器交互；
事件一般是定义在元素的节点上的，所以我们一般称之为给元素节点绑定一个事件。

定义事件的三种方式

(1) addEventListener方法

注：事件使用addEventListener方式定义的时候要去掉on

  1. <div style="width: 100px;height: 100px;background-color: pink;"></div>
  2. <script>
  3.     var btn=document.querySelector('div');
  4.     //方法
  5.     btn.addEventListener('click',function(){
  6.     btn.setAttribute('style',"width:200px;height: 200px;background-color: salmon;")
  7.     })
  8. </script>

(2) onclick属性

  1. <div style="width: 100px;height: 100px;background-color: pink;"></div>
  2. <script>
  3.     var btn=document.querySelector('div');
  4.     //方法
  5.     btn.onclick = function(){
  6.       alert("哈哈哈")
  7.     }
  8. </script>
  10. //或者
  11. <div onclick="f(123)" style="width: 100px;height: 100px;background-color: pink;"></div>
  12. <script>
  13.     var btn=document.querySelector('div');
  14.     function f(num){
  15.       alert(num)
  16.     }
  17. </script>

事件分类

(1) 鼠标事件

1.1 onclick

  1.   点击鼠标的时候触发

1.2 ondblclick

  1.   双击鼠标的时候触发


1.3 onmouseover

  1. 鼠标悬停在元素上的时候触发

hello world

1.4 onmouseout

鼠标移开的时候触发

p.onmouseout=function(){

  1.   this.style.backgroundColor="green"

}

(2) 键盘事件

2-1、onkeydown用户按下一个键盘按键时发生

  1. <input type="text" id="in">
  2.     <script>
  3.         /*
  4.          * event.key 获取键盘按的值
  5.          * event.keyCode 回车：13  R：82
  6.          */
  7.         var t = document.getElementById('in');
  8.         t.addEventListener('keydown',function(){
  9.             console.log(event.keyCode)
  10.             if(event.keyCode=='enter'){  //回车
  11.                 console.log("放下")
  12.             }
  13.         })
  14.     </script>


2-2、onkeyup在键盘按键松开时发生

  1. t.addEventListener('keyup',function(){
  2.             console.log('松开')
  3.         })

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

  1. input.onkeypress =  function(){
  2.     console.log("press")
  3. }

(3) 表单事件

焦点事件

3-1、onfocus获取焦点

3-2、onblur遗失焦点

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

输入框

3-3、onchange

当输入框的内容发生改变的时候,触发

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         // 当输入框的内容发生改变的时候,触发
  5.         var input = document.getElementById("input");
  6.         input.onchange =  function(){
  7.             console.log("hello world")
  8.         }
  9.     </script>
  10. </body>

3-4、onsubmit表单中的确认按钮被点击时发生

  1. <body>
  2.     <form id="form"  onsubmit="alert(1)"  >
  3.         <p>
  4.             用户名: <input type="text" name="user">
  5.         </p>
  6.         <p>
  7.             密码: <input type="password" name="pwd">
  8.         </p>
  9.         <input type="submit" id="input">
  10.     </form>
  11.     <script>
  12.     </script>
  13. </body>

(4) 窗口

2-1、onresize

窗口大小改变的时候,会触发

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         // 当输入框的内容发生改变的时候,触发
  5.         var input = document.getElementById("input");
  6.         input.onchange =  function(){
  7.             console.log("hello world")
  8.         }
  9.         // onresize窗口大小改变的时候,会触发
  10.         window.onresize =  function(){
  11.             console.log(1)
  12.         }
  13.         // 窗口滚动的时候会触发
  14.         window.onscroll =  function(){
  15.             console.log(2)
  16.         }
  17.     </script>
  18. </body>

2-2、onscroll

窗口滚动的时候会触发

  1.   window.onscroll =  function(){
  2.             console.log(2)

2-3、onload

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

  1. <p id="p">hello world</p>
  3. window.onload = function(){
  4.   var p = document.getElementById("p")
  5.   p.onclick = function(){
  6.     console.log("hello world");
  7.   }
  8. }