event事件知识整理

bug丸

已于 2022-11-23 22:01:46 修改

阅读量1.2k

点赞数 1

分类专栏： js基础文章标签： javascript 前端

于 2022-04-16 21:48:16 首次发布

本文链接：https://blog.csdn.net/weixin_50576800/article/details/124221185

版权

js基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件

事件流

事件冒泡

从最具体的元素（文档树中最深的节点）开始触发，然后上传播

事件捕获

从最不具体的节点最先接收到事件，最具体的节点最后收到事件

dom事件流

事件流分为三个阶段：事件捕获=》到达目标事件=》事件冒泡

事件的目标在捕获阶段捕获接收到事件，因为到达目标元素前就结束捕获了

事件处理程序

    <style>
      .dad {
        background-color: aqua;
        width: 200px;
        height: 200px;
        text-align: right;
      }

      .son {
        background-color: olivedrab;
        width: 100px;
        height: 100px;
        text-align: right;
      }
    </style>

  <body>
    <div class="dad">
      爸
      <div class="son">儿</div>
    </div>
  </body>

在这里插入图片描述

1》DOM0: on+事件名

如果使用的是普通函数，那么函数中的this指向目标元素（触发者）

如果是箭头函数，定义位置所在的作用域的this（函数作用域）是谁，this就指向谁

      dad.onclick = () => {
        console.log("老爸");
        console.log(this);  // 这里window
      };

      son.onclick = function () {
        console.log("孩子");
        console.log(this);   // <div class="son">儿</div>
      };

      //   dad.addEventListener("click", function () {
      //     console.log("我是你爸爸");
      //     console.log(this);
      //   });

      //   son.addEventListener("click", () => {
      //     console.log("我是你的乖乖");
      //   });

2》DOM2: addEventListener()和 removeEventListener()

接收三个参数：事件名、事件处理程序、一个布尔值（true为在捕获阶段调用事件处理程序，false在冒泡阶段调用事件处理程序）

第一个和第二个必传，带三个时可选参数；一般事件默认都是在冒泡阶段调用事件处理程序，布尔值默认为false

通过addEventListener()添加的事件处理程序只能使用removeEventListener()并传入添加时同样的参数才有效；如果想要使用removeEventListener移除事件执行程序，那么addEventListener不能使用匿名函数

      function dadEvent() {
        son.removeEventListener("click", sonEvent);
        console.log("我是你爸爸");
      }
      const sonEvent = () => {
        console.log("我是你的乖乖");
      };

      dad.addEventListener("click", dadEvent, true);
      son.addEventListener("click", sonEvent);

点击儿子，结果只打印了 “我是你爸爸”,因为父元素的事件处理程序实在捕获阶段执行的，而在这是已经将子元素的点击的事件执行程序移除了

*onClick=func与addEventListener(“click”，func)的区比较

onClick一个事件只能添加一个事件处理程序，添加多个时后面的会覆盖前面的；而addEventListener一个事件可以多个事件处理程序

onClick通过等于null来移除；addEventListener通过removeEventListener移除

IE事件处理程序

使用DOM0时，this指向目标元素；在使用attachEvent() 时，事件处理程序实在全局作用域中运行的，所以this指向window

      document.body.attachEvent("onClick", function () {
        console.log(this === window); // true
      });

同个dom同个事件，添加了多个事件处理程序时，会以添加他们的顺序反向触发;下面代码结果：2 1

      const handle1 = () => {
        console.log(1);
      };
      const handle2 = () => {
        console.log(2);
      };
      document.body.attachEvent("onclick", handle1);
      document.body.attachEvent("onclick", handle2);

使用detachEvent()来移除事件处理程序

document.body.detachEvent("onclick",handle2)

事件对象

target:事件目标（只读）

currentTarget:当前事件处理程序所在的元素（只读）

在事件处理程序内部（非箭头函数），this对象始终等于currentTarget的值

如果事件处理程序直接添加在了意图的目标，那么 this / currentTarget / target 的值是一样的

type:被触发的事件类型（只读）

stopPropagation()：取消后续的事件捕获或事件冒泡，如果a标签默认点击跳到对应的url

preventDeafault()：取消事件的默认行为

事件类型

用户界面事件

load:在window对象上，在整个页面（包括所有的外部资源，如图片、js文件、css文件）加载完成后触发；

window/body/img都可以添加load事件

unload：在文档卸载完成后触发；一般是在从一个页面导航到另一个页面时触发，最常用于清理引用

resize:在window上触发，当浏览器窗口发生缩放、最大化、最小化都会触发

scroll：发生滚动触发

error：在window上当js报错触发

select：文本框，用户选择时触发

焦点事件

blur:元素失去焦点时触发

focus:元素获得焦点时触发

blur和focus都不支持冒泡

input中blur、focus与click事件的先后顺序
1、进入到输入框时：fucus事件在click之前触发；
fucus => click

2、离开输入框的时候：先出发触发blur事件才触发外面盒子的click事件
blur =》click

鼠标和滚轮事件

click:单机鼠标触发

dbclick：双击鼠标逐渐触发（通常是左键）

mouseenter：用户把鼠标光标从元素外部一道元素内部时触发一次

mouseleave：用户把鼠标光标从元素内部移到元素外部

mousemove：鼠标光标在元素上移动时触发

mouseout：鼠标移动到元素外部或元素的子元素内触发

mouseover：鼠标光标从元素外部移到元素内部时触发（元素内部或子元素内部）

mousedown：用户按下任意鼠标键时触发

mouseup：用户释放鼠标键时触发

mousewheel：鼠标滚轮滚动

mouseover/mouseout支持冒泡，mouseenter/mouseleave 不支持冒泡

点击事件对象

客户端坐标：event.clientX event.clientY 事件发生时光标在视口中的坐标

页面坐标：event.pageX event.pageY 事件发生时光标在页面中的坐标

屏幕坐标：event.screenX event.screenY 事件发生时光标在屏幕上的坐标

修饰键：Shift/Ctrl/Alt/Meta分别对应event.shiftKey/event.ctrlKey/event.altKey/event.metaKey

键盘与输入事件：

keydown: 用户 按下键盘上某个键 时触发，一直按着会一直触发

keypress: 用户 按下并产生字符 时触发，持续按着会重复触发

keyup: 用户释放按键 时触发

HTML5事件

contentmenu : 单击鼠标右键弹出上下文菜单时触发

beforeunload：在window上触发，页面即将从浏览器中卸载时触发

DOMContentLoad: 在dom树构建完成后触发，不用等其他资源加载完成，这就是与load的区别

readstatechange:模拟DOMContentLoad

pageshow和pagehide:往返缓存，Firefox和Opera开发事件必须添加到window上

hashchange:url#后面的部分发生变化时触发，必须添加给window

没有冒泡的事件

卸载时触发