给某个DOM对象绑定一个函数，当该DOM对象发生相应的操作时触发函数。

事件绑定的三种方式

  • html标签事件绑定
  • js属性绑定

  • js事件监听

    html标签事件绑定

    1. <button onclick = "show()"><button>
    2. <script>
    3.   function show(){
    4.     console.log('show');
    5.   }
    6. </script>

    js属性绑定

    js属性绑定只可以绑定一个函数，如果要实现多个功能，则需要把代码进行多次封装。

    1. function show(){
    2.     console.log('show');
    3. }
    4. function print(){
    5. 　　console.log('print');
    6. }
    7. var btn = document.querySelector(".btn");
    8. btn.onclick = show;                //这次绑定被下面的绑定覆盖，这次绑定不生效
    9. btn.onclick = print;

    js事件监听

    1. function show(){
    2.     console.log('show');
    3. }
    4. function print(){
    5. 　　console.log('print');
    6. }
    7. var btn = document.querySelector(".btn");
    8. btn.addEventListener("click",show);                
    9. btn.addEventListener("click",print);
    10. //上述两个监听全部生效
    11. btn.removeEventListener("click",show)
    12. //移除show函数的点击监听事件。

    js事件类型

  • 窗口事件

  • 鼠标事件

  • 键盘事件

    窗口事件

  • window.onload //页面资源加载完成

  • window.onscroll //页面滚动

  • window.onresize //窗口大小发生变化

    鼠标事件

  • onclick //鼠标单击时

  • ondblclick //鼠标双击时
  • onmousedown //鼠标按下时
  • onmouseleave //鼠标移开时
  • onmouseenter //鼠标进入时
  • onmousemove //鼠标移动时
  • onmouseup //鼠标松开时

    键盘事件