JS-事件

事件

HTMl事件可以是浏览器行为，也可以是用户行为。当这一些行为发生时，可以自动触发对应的JS函数的运行，我们称之为事件发生，JS的事件驱动指的就是行为触发代码运行的这种特点

在html中使用事件调用函数时，一定不要忘了()

三种弹窗方式

  • alert()信息提示框
  • prompt()信息输入框
  • confirm()信息确认框
    • 这个函数的返回值为布尔类型，可以利用此返回值选择是否提交表单
//利用onsubmit事件调用这个方法，当点击取消时，不提交表单
function testSubmit(){
    var flag = confirm("确定要提交表单吗");
    if(!flag){
        event.preventDefault();//阻止表单提交的方法
    }
}

//当onsubmit="return testSubmit()"时，当点击取消时，不提交表单
function testSubmit(){
    var flag = confirm("确定要提交表单吗");
    if(!flag){
        return false;
    }
    return true;
}

那么就可以简写成

//当onsubmit="return testSubmit()"时，当点击取消时，不提交表单
function testOnsubmit(){
            return confirm("确定要提交表单吗？");
}

绑定方式

  • 通过元素的属性绑定
  • 通过DOM编程动态绑定

一个事件可以绑定多个函数

一个元素可以绑定多个事件

常见事件

鼠标事件
  • onclick：当用户点击某个对象时调用的事件句柄
  • ondbclick：当用户双击某个对象时调用的事件句柄
  • onmouseover：当鼠标悬停时调用的事件句柄
  • onmousemove：当鼠标移动时调用的事件句柄
  • onmouseleave：当鼠标离开时调用的事件句柄
键盘事件
  • onkeydown：当按键按下时调用的事件句柄
  • onkeyup：当按键抬起时调用的事件句柄
表单事件*

  • onfocus：当表单获得焦点时调用的事件句柄

  • onblur：当表单失去焦点时调用的事件句柄

  • onchange：当内容发生改变时调用的事件句柄（内容改变，失去焦点）

    • onchange之后的事件方法传参为this.value，即可获取到改变的内容

      <input type="text" onchange="testOnchange(this.value)">

  • onsubmit：当表单提交时调用的事件句柄

    • 此事件要绑定在form标签中，而不是input标签中

  • onreset：当表单重置时调用的事件句柄

    • 此事件要绑定在form标签中，而不是input标签中
页面加载事件
  • onload：当页面加载完成时调用的事件句柄
    • 此事件要绑定在body标签中
    • 也可以通过在js代码中window.onload=function(){}完成对页面加载完成时的事件触发

通过DOM编程动态处理事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      //使用dom编程绑定页面加载事件
      window.onload = function () {
        //使用dom编程获取div为对象
        var div1 = document.getElementById("div1");
        div1.onclick = function () {
          div1.style.backgroundColor = "red";
        };
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
          //使用dom编程触发事件
          div1.onclick();
        };
      };
    </script>
    <style>
      #div1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <button id="btn1">按钮</button>
  </body>
</html>