JavaScript之DOM事件机制

最新推荐文章于 2021-11-20 14:28:13 发布

Delete.Q

最新推荐文章于 2021-11-20 14:28:13 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_44961514/article/details/120489013

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

事件机制

事件组成三部分

1、事件源：事件触发的对象

2、事件类型：鼠标事件、键盘事件、点击事件…

3、事件处理程序：通过一个函数赋值的方式

//事件触发对象button
<button onclick="fun()">点我</button>
//当点击button时触发事件
<script>
    //事件处理程序
    function fun(){
        console.log("hello world!")
    }
</script>

事件流

事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序

事件流分类：

事件冒泡（IE事件流）

事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播的过程，直至documen。

例如：

<!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>
  <style>
    *{
      color: white;
      font-size: 20px;
    }
    #outer{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #center{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    #inner{
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="outer">outer
    <div id="center">center
      <div id="inner" onclick="myFunc(123,event)">inner</div>
    </div>
  </div>
  <script>
    var inner = document.getElementById('inner');
    var center = document.getElementById('center');
    var outer = document.getElementById('outer');
    // 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
    // 如果事件要传递参数 并且我们还要默认的event对象 
    // 应该这样实现
    // function myFunc(a,event){
    //   console.log(a,event);
    // }
    inner.onclick = function (event) {
      console.log('我是inner点击的');
      // 阻止事件冒泡
      // event.stopPropagation();
      
    }
    // 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
    center.onclick = function () {
      console.log('我是center点击的');
    }
    outer.onclick = function () {
      console.log('我是outer点击的');
    }
  </script>
</body>
</html>

只要我们一点击inner，其他两个元素的事件也会被触发，也就是说click事件会沿着DOM树一路向上，经过的节点上依次触发，直至到达document

在这里插入图片描述

阻止事件冒泡

event.stopPropagation()

直接在对应方法中使用event.stopPropagation()便可阻止事件冒泡。

事件捕获（Netscape事件流）

Netscape Communicator 团队提出了另一种名为事件捕获的事件流。事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。

在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素div

在这里插入图片描述

由于旧版本浏览器不支持，因此实际当中几乎不会使用事件捕获。通常建议使用事件冒泡，特殊情况下可以使用事件捕获。

DOM事件流

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件。

点击div元素会以如图所示的顺序触发事件。

在这里插入图片描述

在DOM事件流中，实际的目标在捕获阶段不会接收到事件。这是因为捕获阶段从document 到html再到body就结束了。下一阶段，即会在div元素上触发事件的“到达目标”阶段，通常在事件处理时被认为是冒泡阶段的一部分。然后，冒泡阶段开始，事件反向传播至文档。

注意:所有现代浏览器都支持 DOM 事件流，只有 IE8 及更早版本不支持。

事件处理程序

事件是用户在浏览器执行某种动作。如鼠标点击（click）、加载（load）、鼠标悬停（mouseover）。响应事件所执行的函数被称为事件处理程序（或事件监听）。事件处理程序的名字以"on"开头，因此 click 事件的处理程序叫作 onclick

HTML事件处理程序

当某个元素绑定某个事件后，并触发该事件

<button onclick="console.log('点击了我')">点击</button>

用户点击该按钮后，控制台会输出相应信息

DOM0事件处理程序

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    console.log('我被点击了');
  }
</script>

上面代码中，先获取到document文档对应的节点，然后用该节点绑定事件处理程序程序，这个事件处理程序赋值给一个函数。像这样使用 DOM0 方式为事件处理程序赋值时，所赋函数被视为元素的方法

通过将事件处理程序属性的值设置为 null，可以移除通过 DOM0 方式添加的事件处理程序，如下面的例子所示：

btn.onclick = null; // 移除事件处理程序

DOM2事件处理程序

DOM2 Events为事件处理程序的赋值和移除定义了两个方法：

addEventListener()和removeEventListener()

这两个方法暴露在所有 DOM 节点上，它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。

addEventListener()

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
</script>

使用 DOM2方式的主要优势是可以为同一个事件添加多个事件处理程序。

例如：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
  btn.addEventListener("click", function () {
    console.log(this.id); // btn
  });
</script>

removeEventListener()

通过removeEventListener()可以移除事件处理程序。但是在ddEventListener()方法中添加的匿名函数是无法被移除的。

例如：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
  // 移除
  btn.removeEventListener("click", function () {
    console.log(this.id); //没有效果
  })
</script>

所以我们要移除事件处理程序传给 removeEventListener()的事件处理函数必须与传给 addEventListener()的是同一个。

例如：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  // 新增一个方法
  var handler = function () {
    console.log(this.id);
  }
  btn.addEventListener("click", handler, false);
  // 移除
  btn.removeEventListener("click", handler, false); // 有效果
</script>

事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作导致的事件会生成与被按下的键有关的信息。所有浏览器都支持这个 event 对象，尽管支持方式不同。

注意：event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。

阻止默认事件发生

preventDefault()方法

用于阻止特定事件的默认动作。比如点击a标签链接跳转

<a href="http://www.baidu.com">跳转</a>
<form action="./1-HTML事件处理程序.html">
  <button id="btn">提交按钮</button>
</form>
<script>
  var a = document.getElementsByTagName('a')[0];
  var btn = document.getElementById('btn');
  a.onclick = function (event) {
    // alert(1);
    // 阻止事件默认行为
    event.preventDefault();
  }
  btn.onclick = function (event) {
    // 阻止事件默认行为
    event.preventDefault();
  }
</script>

事件委托(事件代理)

在JavaScript中，页面中事件处理程序的数量会影响网页的性能，因为每个函数都是对象，会占用内存，对象越多，性能越差。其次，为指定事件处理程序所需访问 DOM 的次数会先期造成整个页面交互的延迟。

事件委托就是当事件触发时，把父元素中的子元素所触发的事件全都交给父元素处理。利用事件冒泡的原理，把事件交给父级处理，通过判断事件来源的子集，执行相应的操作。

例如：

<ul id="myLinks">
  <li id="li1">今天星期三</li>
  <li id="li2">天气晴</li>
  <li id="li3">温度28°</li>
</ul>

<script>
  var list = document.getElementById("myLinks");
  list.addEventListener("click", function (event) {
    var target = event.target;
    console.log(target);
    switch (target.id) {
      case "li1":
        target.innerHTML = '周末去玩';
        break;
      case "li2":
        target.innerHTML = '去吃烤肉';
        break;
      case "li3":
        target.innerHTML = '看电影';
        break;
    }
  });
</script>

上面代码中，我们可以通过event 对象可以拿到对应元素触发事件的id，再根据id判断事件的来源，最后执行操作。

事件类型

用户界面事件

onload页面加载完成触发

<script>
  window.onload = function () {
    console.log('onload');
  }
</script>

onselect在文本框（或 textarea）上当用户选择了一个或多个字符时触发。

<input type="text" id="inp">
<script>
  var inp = document.getElementById('inp');
  inp.onselect = function (event) {
    console.log(event);
    // 可以通过window.getSelection()获取到选中的部分
    console.log(window.getSelection().toString());
  }
</script>

onscroll 当用户滚动页面包含滚动条的元素时触发

<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">
11111111111111111111111111111111111111111111111</div>
<script>
  var d1 = document.getElementById('d1');
  d1.onscroll = function () {
    console.log('onscroll');
  }
</script>

焦点事件

onblur 当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持

onfocus元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。

<input type="text" id="inp1">
<script>
  var inp1 = document.getElementById('inp1');
  // 失去焦点触发
  inp1.onblur = function () {
    console.log('失去焦点');
    console.log(this.value);
  }
  // 获得焦点触发
  inp1.onfocus = function () {
    console.log('获得焦点');
  }
</script>

鼠标事件

onclick

鼠标点击事件

onmouseenter

在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。

onmouseleave

在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。

onmousemove

在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。

onmouseout

在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。

onmouseover

在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发

<!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>Document</title>
  <style>
    #d1{
      width: 300px;
      height: 300px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div id="d1"></div>
  <script>
    var d1 = document.getElementById('d1');
    // 单击事件
    d1.onclick = function (event) {
      console.log('click');
      console.log(event);
    }
    // 鼠标移入事件
    d1.onmouseenter = function () {
      console.log('mouseenter');
    }
    // 鼠标移出事件
    d1.onmouseleave = function () {
      console.log('mouseleave');
    }
    // 鼠标在元素内部移动时触发
    d1.onmousemove = function () {
      console.log('mousemove');
    }
  </script>
</body>
</html>

键盘事件

keydown，用户按下键盘上某个键时触发，而且持续按住会重复触发。
keypress，用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。
keyup，用户释放键盘上某个键时触发。

<!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>Document</title>
</head>
<body>
  <input type="text" id="inp1">
  <script>
    var inp1 = document.getElementById('inp1');
    // 按下某个按键是触发
    inp1.onkeydown = function (event) {
      if (event.keyCode == 13) {
        console.log('确认');
        console.log(this.value);
      }
    }
    // 按下键盘上某个键并产生字符时触发，而且持续按住会重复触发
    inp1.onkeypress = function (event) {
      console.log(event.keyCode);
    }
    // 用户释放键盘上某个键时触发
    inp1.onkeyup = function (event) {
      console.log(event.keyCode);
    }
    // 键盘输入事件 必须使用DOM2级事件
    inp1.addEventListener('textInput', function (event) {
      console.log(event.data);
    })
  </script>
</body>
</html>

Delete.Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM事件机制

事件机制事件组成三部分1、事件源：事件触发的对象2、事件类型：鼠标事件、键盘事件、点击事件…3、事件处理程序：通过一个函数赋值的方式//事件触发对象button<button onclick="fun()">点我</button>//当点击button时触发事件<script> //事件处理程序 function fun(){ console.log("hello world!") }</script>
复制链接

扫一扫