• js中的基础知识点 —— 事件

    整理学习过程中的 js 知识点，防遗忘!!!

    JavaScript 基础知识点

    一、事件

    1、事件流

    1）事件冒泡

    事件冒泡就是事件的向上传导，当后代元素的事件触发时，祖先元素的相同事件也会被触发。
    在开发过程中，大部分情况下冒泡都是有用的，如果不想要使用事件冒泡，可以通过使用 cancelBubble 来取消事件冒泡。

    事件冒泡代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡title>
head>
<style>
  #f {
    width: 300px;
    height: 300px;
    background-color: skyblue;
  }
  #s {
    width: 150px;
    height: 150px;
    background-color: rosybrown;
  }
style>
<script>
  window.onload = function() {
    var f = document.getElementById("f");
    var s = document.getElementById("s");
    var b = document.body;
    f.onclick = function() {
      alert("您点击了f, 父元素");
    }
    s.onclick = function() {
      alert("您点击了s, 子元素");
    }
    b.onclick = function() {
      alert("您点击了body元素呀!!!");
    }
  }
script>
<body>
  <div id="f">
    <div id="s">div>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    效果展示：

    在这里插入图片描述
    当点击最里面的div时，事件会冒泡到和它具有相同事件的祖先级元素中去。

    取消事件冒泡：使用event.cancelBubble = true。

    取消事件冒泡代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡title>
head>
<style>
  #f {
    width: 300px;
    height: 300px;
    background-color: skyblue;
  }
  #s {
    width: 150px;
    height: 150px;
    background-color: rosybrown;
  }
style>
<script>
  window.onload = function() {
    var f = document.getElementById("f");
    var s = document.getElementById("s");
    var b = document.body;
    f.onclick = function(event) {
      alert("您点击了f, 父元素");
      event.cancelBubble = true; //取消事件冒泡
      
    }
    s.onclick = function(event) {
      alert("您点击了s, 子元素"); 
      event.cancelBubble = true; // 取消事件冒泡

    }
    b.onclick = function() {
      alert("您点击了body元素呀!!!");
    }
  }
script>
<body>
  <div id="f">
    <div id="s">div>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    效果展示： 只显示点击元素的事件
    在这里插入图片描述

    2）事件捕获

    事件捕获：事件由外向内传播，当前事件触发时，应该先触发当前元素的最外层祖先元素的事件，然后再向内传播给后代元素。

    注意：一般情况下不使用捕获阶段

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件捕获title>
head>
<style>
  #box1 {
    width: 300px;
    height: 300px;
    background-color: rosybrown;
  }
  #box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  #box3 {
    width: 100px;
    height: 100px;
    background-color: coral;
  }
style>
<script>
  window.onload = function() {
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    box3.addEventListener("click", function(){
      alert("您点击了box3!!!");
    }, true); //在捕获阶段调用事件处理程序
    box2.addEventListener("click", function(){
      alert("您点击了box2!!!");
    }, true);
    box1.addEventListener("click", function(){
      alert("您点击了box1!!!");
    }, true)
  }
script>
<body>
  <div id="box1">box1
    <div id="box2">box2
      <div id="box3">box3div>
    div>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    显示效果：

    在这里插入图片描述

    2、事件委派

    事件委派也叫做事件委托。
    事件委托：就是利用事件冒泡，只使用事件处理程序来管理一种类型的事件
    这里使用一个简单的例子来说明事件委托：动态添加超链接

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件委派title>
head>
<style>
  #ul {
    background-color: cadetblue;
  }
style>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    var ul = document.getElementById("ul");
    btn.onclick = function() {
      var li = document.createElement("li"); //创建li元素
      li.innerHTML = "新添加的超链接"
      ul.appendChild(li); //将创建的元素添加到 ul中
    }
    ul.onclick = function(event) { //给父元素ul添加事件，子元素会冒泡到父元素上，父元素统一处理
      event = event || window.event; //为了兼容性
      if(event.target.className === "link") { //添加判断条件，只有点击了a链接，才会触发事件
        alert("hello,你点击的是我呀!!!");
      } 
    }
  }
script>
<body>
  <button id="btn">添加超链接button>
  <ul id="ul">
    <li><a href="javaScript:;" class="link">超链接1a>li>
    <li><a href="javaScript:;" class="link">超链接2a>li>
    <li><a href="javaScript:;" class="link">超链接3a>li>
  ul>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    效果显示：

    在这里插入图片描述

    在这里插入图片描述
    注意：小例子中需要注意的细节。
    给ul 绑定事件之后，整个ul 区域都会触发事件，如果想要让指定区域的值触发点击事件，可以获取点击时的目标区域（通过event.target获取），加上判断条件，只有满足event.target的条件才会触发相应的目标事件。

    不要给每一个 a / li 标签绑定对应的点击事件!!! 性能真的真的不怎么好，这种情况适合使用事件委派。

    3、事件处理程序

    1）DOM0事件处理程序：onclick

    DOM0事件处理程序的基本使用类似形式如下：btn.onclick = function() {}
    但是使用这种方式，只能绑定一个事件处理程序，后面绑定的事件会覆盖前面的事件内容。

    代码展示： 设置事件处理程序

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM0事件处理程序title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      alert("one, 您点击了这里!!!");
    }
    btn.onclick = function() {
      alert("two, 您点击了这里!!!");
    }
  }
script>
<body>
  <button id="btn">点击按钮button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    显示效果：

    在这里插入图片描述

    移除事件处理程序：需要将对应的事件的值设置为null
    eg: btn.onclick = null

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM0事件处理程序title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      alert("one, 您点击了这里!!!");
    }
    btn.onclick = function() {
      alert("two, 您点击了这里!!!");
    }
    btn.onclick = null; //移除事件处理程序
  }
script>
<body>
  <button id="btn">点击按钮button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    显示效果：

    在这里插入图片描述

    2）DOM2事件处理程序：addEventListener()

    DOM2事件处理程序的基本使用类似形式如下：addEventListener(事件名，事件处理函数，布尔值)
    eg: btn.addEventListener(“click”, ()=>{}, false)， btn.addEventListener(“click”, function(){}, false)

    参数介绍：
    事件名：事件的类型，例如，click，mousemove…，不要on，不要on，不要on!!!
    事件处理函数：进行相应的事件处理
    布尔值：true 表示在捕获阶段调用事件处理函数；false表示在冒泡阶段调用事件处理函数

    使用addEventListener()，可以绑定多个事件处理程序

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM2事件绑定title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
      alert("one, 您点击了我一下!!!");
    }, false)
    btn.addEventListener("click", function() {
      alert("two, 您点击了我一下!!!");
    }, false)
  }
script>
<body>
  <button id="btn">点击一下button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    显示效果：

    在这里插入图片描述

    移除事件处理程序：使用removeEventListener()，并传入同样的参数
    eg：btn.removeEventListener(“click”, handler, false)
    handler为事件处理函数。

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM2事件绑定title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    var handler = function() {
      alert("one, 您点击了我一下!!!");
    }
    btn.addEventListener("click", handler, false);
    btn.removeEventListener("click", handler, false); //移除事件处理程序
    // 其中，要保证传入和移除的事件处理函数为同一个
  }
script>
<body>
  <button id="btn">点击一下button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    显示效果：

    在这里插入图片描述

    3）IE事件处理程序：attachEvent()

    IE事件处理程序的基本使用类似形式如下：attachEvent(事件名，事件处理函数)
    eg: btn.attachEvent(“onclick”, function(){})

    参数介绍：
    事件名：事件的类型，例如，onclick，onmousemove…，需要加on，需要加on，需要加on!!!
    事件处理函数：进行相应的事件处理

    attachEvent()，可以添加多个事件处理程序

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE事件处理程序title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    //注意IE11不支持attachEvent
    btn.attachEvent("onclick", function(){
      alert("one, 您点击了一下!!!");
    })
    btn.attachEvent("onclick", function(){
      alert("two, 您点击了一下!!!");
    })
  }
script>
<body>
  <button id="btn">点击一下button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    不同IE的显示效果：

    IE11：不支持
    IE9、IE10：
    在这里插入图片描述
    IE8以下：
    在这里插入图片描述
    移除事件处理程序：使用detachEvent()，并传入同样的参数
    eg：btn.detachEvent(“onclick”, handler)
    handler为事件处理函数

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE事件处理程序title>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    var handler = function() {
      alert("one, 您点击了一下!!!");
    }
    btn.attachEvent("onclick", handler);
    btn.detachEvent("onclick", handler);
  }
script>
<body>
  <button id="btn">点击一下button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    显示效果：

    在这里插入图片描述

    4）事件处理程序中的this

    DOM0中的 this为(btn.onclick)： 事件绑定的对象
    DOM2中的 this为(btn.addEventListener())：事件绑定的对象
    IE中的 this为(btn.attachEvent)：window

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件处理程序中的thistitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      alert(this); //this为绑定事件的对象
    }
    btn.addEventListener("click", function(){
      alert(this);
    }, false);
    btn.attachEvent("onclick", function() {
      alert(this);
    })
  }
script>
<body>
  <button id="btn">点击按钮button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    显示效果：

    在这里插入图片描述

    5）事件处理程序总结

    使用简单的例子来说明：

    事件处理程序添加事件移除事件事件处理程序中的this
    DOM0btn.onclick = function(){}btn.onclick = null绑定的事件对象
    DOM2btn.addEventListener(“click”, handler, false)btn.removeEventListener(“click”, handler, false)绑定的事件对象
    IEattachEvent(“onclick”, handler)detachEvent(“onclick”, handler)window

    6）跨浏览器的事件处理程序

    为了兼容不同浏览器的事件处理程序，可以编写一个封装事件处理程序的函数。
    具体代码如下：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兼容的事件处理程序title>
head>
<script>
  window.onload = function () {
    //封装一个对象，用来完成添加事件处理程序和移除事件处理程序的作用
    var eventUtil = {
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      }
    };

    var btn = document.getElementById("btn");
    var handler = function() {
      alert("您点击了我一下呀!!!");
    }
    eventUtil.addHandler(btn, "click", handler);
  }
script>
<body>
  <button id="btn">点击一下button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    显示效果：
    在这里插入图片描述

    4、事件对象

    1）DOM事件对象：preventDefault()、stopPropagation

    preventDefault()方法：只读，用于取消事件的默认行为。只有cancelable为true才可以调用这个方法。
    eg：可以取消链接默认的跳转行为

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM事件对象title>
head>
<script>
  window.onload = function() {
    let link = document.getElementById("link");
    link.onclick = function(event) {
      event.preventDefault(); //取消链接跳转的默认行为
    }
  }
script>
<body>
  <a href="https://www.baidu.com/" id="link">百度一下a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    显示效果：

    在这里插入图片描述

    stopPropagation()方法：只读，用于立即组织事件流在DOM结构中传播，用于取消所有后续事件捕获或事件冒泡。只有bubbles为true才可以调用这个方法。

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM中的stopPropagation()title>
head>
<style>
  #box1 {
    width: 200px;
    height: 200px;
    background-color: cadetblue;
  }
  #box2 {
    width: 100px;
    height: 100px;
    background-color: darkgoldenrod;
  }
style>
<script>
  window.onload = function() {
    let box1 = document.getElementById("box1");
    let box2 = document.getElementById("box2");
    box1.onclick = function() {
      alert("box1!!!");
    }
    box2.onclick = function(event) {
      alert("box2!!!");
      event.stopPropagation(); //阻止事件冒泡
    }
  }
script>
<body>
  <div id="box1">
    <div id="box2">div>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    显示效果：

    在这里插入图片描述

    2）IE事件对象：returnValue、cancelBubble、srcElement

    returnValue：布尔值，可读/写。默认设置为true，设置为false可以取消事件的默认行为 （与DOM中的preventDefault()方法相同）

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE中的returnValue属性title>
head>
<script>
  window.onload = function() {
    let link = document.getElementById("link");
    link.onclick = function(event) {
      event = window.event;
      event.returnValue = false; //取消事件的默认行为
    }
  }
script>
<body>
  <a href="https://www.baidu.com/" id="link">百度一下a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    显示效果：

    在这里插入图片描述

    cancelBubble：布尔值，可读/写。默认值为false，设置为true可以取消冒泡（与DOM中的stopPropagation()方法相同）

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE中的cancelBubble属性title>
head>
<style>
  #box1 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  #box2 {
    width: 100px;
    height: 100px;
    background-color: salmon;
  }
style>
<script>
  window.onload = function() {
    let box1 = document.getElementById("box1");
    let box2 = document.getElementById("box2");
    box1.onclick = function() {
      alert("box1!!!");
    }
    box2.onclick = function(event) {
      event = window.event;
      alert("box2!!!");
      event.cancelBubble = true; //设置cancelBubble属性为true,可以取消事件冒泡
    }
  }
script>
<body>
  <div id="box1">box1
    <div id="box2">box2div>
  div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    展示效果：

    在这里插入图片描述

    srcElement：元素，只读。事件目标（与DOM中的target属性相同）
    注意：IE中的this指向的是window，无法通过this获得当前目标对象，可以通过srcElement属性获得当前目标对象。

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE中的srcElement属性title>
head>
<script type="text/javaScript">
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.attachEvent("onclick", function(event) {
      alert(this);
      console.log(window.event.srcElement); //为事件的目标对象
    });
  };
script>
<body>
  <button id="btn">按钮button>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    显示效果：
    在这里插入图片描述

    5、事件类型

    1）滚轮事件：onmousewheel

    滚轮事件：
    onmousewheel：IE、chrome支持，firefox不支持（DOMMouseScroll）
    onwhell：IE不支持，chrome、firefix支持
    下面以一个案例来说明滚轮事件：
    滚轮向下滚动，增大长度；滚轮向上滚动，减小长度。

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚轮事件title>
head>
<script>
  window.onload = function () {
    //封装一个对象，用来完成添加事件处理程序和移除事件处理程序的作用
    var eventUtil = {
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      }
    };

    var box1 = document.getElementById("box1");
    //onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持
    box1.onmousewheel = function (event) {
      //判断滚轮滚动的方向
      event = event || window.event;
      //event.wheelDelta可以获取滚轮滚动的方向,向上滚为正值，向下滚为负值
      //但是火狐中不支持，在火狐中使用event.detail，向上滚为负值，向下滚为正值
      /**
       * 当鼠标滚轮向下滚动时，box1变长，向上滚动时，box1变短
       */
      if(event.wheelDelta > 0 || event.detail < 0) {
        box1.style.height = box1.clientHeight - 10 + "px";
        // alert("向上滚");
      } else {
        // alert("向下滚");
        box1.style.height = box1.clientHeight + 10 + "px";
      }
      // alert(event.detail);
      return false; //取消浏览器的默认行为，鼠标滚动时，滚动条不动
    }

    /**在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
     * 注意：该事件需要使用addEventListener()函数来绑定
     */
    //为火狐绑定滚轮事件
    eventUtil.addHandler(box1, "DOMMouseScroll", box1.onmousewheel);
  }
script>
<style>
  #box1 {
    width: 100px;
    height: 100px;
    background-color: crimson;
  }
style>
<body>
  <div id="box1" style="height: 2000px;">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71

    展示效果：

    在这里插入图片描述

    注意：此案例中不能够向上滚动时将目标元素减小为0，一旦这样做之后，就无法获得目标对象了。

    2）键盘事件：onkeyup、onkeydown、keyCode

    键盘事件一般绑定给可以获得焦点的对象或者document
    onkeydown：某个键盘按键被按下。如果一直按着某个按键不松手，则事件会一直触发；当连续触发时，第一次和第二次之间的间隔会稍微长一点
    onkeyup：某个键盘按键被松开

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标按键事件title>
head>
<script>
  window.onload = function() {
    document.onkeydown = function() {
      console.log("被按下了!!!");
    }
    document.onkeyup = function() {
      console.log("被松开了!!!");
    }
  }
script>
<body>
  <input type="text">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    显示效果：

    在这里插入图片描述

    keyCode：键盘编码
    ctrlKey：返回当事件被触发时，"ctrl"键是否被按下
    此外，还有shiftKey、altKey等

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标按键事件title>
head>
<script>
  window.onload = function() {
    document.onkeydown = function(event) {
      if(event.keyCode == 65 && event.ctrlKey) {
        console.log("a按键和ctrl按键同时被按下了!!!");
      }
    }
    document.onkeyup = function() {
      console.log("被松开了!!!");
    }
  }
script>
<body>
  <input type="text">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    效果展示：

    在这里插入图片描述

    小案例：保证文本框中输入的非数字内容

    代码展示：

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本框中输入非数字title>
head>
<script>
  window.onload = function(){
    var input = document.getElementById("input");
    input.onkeydown = function(event){
      if(event.keyCode >= 48 && event.keyCode <= 57) {
        return false; //取消默认行为
      }
    }
  }
script>
<body>
  <input type="text" id="input">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    显示效果：
    在这里插入图片描述

  • 相关阅读:
    RNN经典案例（人名分类器）
    求臻医学官网焕新升级
    【校招VIP】java开源框架之Zookeeper
    NodeJS 入门笔记
    在爬虫的时候发现request 中的from data 是一串数据格式
    2022安洵杯babyphp
    大三程序员实习面试经历（Java）
    HTML+CSS+JS大作业：生态环境网站设计——环境保护主题
    模板匹配与像素统计
    Go语言入门(一)
  • 原文地址：https://blog.csdn.net/Matcha_ice_cream/article/details/126033609