DOM事件

robin 发布于2019-08-22 18:11 / 1278人阅读

摘要：同一个元素可以绑定多个统一行为事件对象执行某一行为时，不仅执行了绑定方法，而且浏览器还会默认的给这个方法传递一个参数，这个参数就是事件对象。

1.理解事件

事件行为本身：没有给事件绑定方法事件也是一直存在的，当触发行为的时候，也对触发对应的行为，只不过由于没有绑定事件，导致没有任何事件发生；

事件绑定：给元素绑定一个方法；触发行为，执行方法；

2.DOM事件

DOM0级事件：1️⃣(onclick)属于元素的私有属性；2️⃣使用DOM0级方法指定的事件处理程序被认为是元素的方法，这也就解释为什么事件处理程序的this指向当前元素；3️⃣事件处理程序只会在事件冒泡阶段处理；4️⃣优势：简单；跨浏览器；5️⃣删除事件：设置为null；btn.onclick=null;6️⃣一个元素只能绑定一个同一类型的行为，否则后面的会覆盖前面的行为。

DOM1：没有升级事件相关的方法；

DOM2级事件：1️⃣属于公有方法，在eventTarget这个类的原型上—>所有的DOM节点都包含这两种方法：addEventListener和removeEventlistener；2️⃣三个参数：（事件名，回调函数，布尔值）；布尔值：true—>捕获阶段调用回调函数；false—>冒泡阶段调用回调函数；3️⃣addEventListener和removeEventlistener传入的回调函数必须相同，不能使用匿名函数；4️⃣一般将事件添加到冒泡阶段，这样可以最大限度的兼容浏览器。5️⃣同一个元素可以绑定多个统一行为；

3.事件对象

执行某一行为时，不仅执行了绑定方法，而且浏览器还会默认的给这个方法传递一个参数，这个参数就是—>event,事件对象。

事件对象的特点：
1️⃣对象数据类型，包含有很多的属性名和属性值，用来记录行为的相关信息；
2️⃣MouseEvent——UIEvent——Event——Object 原型
3️⃣MouseEvent记录的是页面中唯一一个鼠标每次触发的相关信息，和到底在哪个元素上触发没有关系。

4.事件对象的兼容性问题

事件对象本身的兼容性问题：e=e||window.event;

e.type:当前行为类型，兼容；

e.clientX/Y:距离可视窗口左上角x,y值，兼容；

e.pageX/Y:距离body(第一屏)左上角x,y值，IE678不兼容；

e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;

e.target:事件源，当前行为触发元素，存储的就是那个元素IE678不兼容 e.target=e.target||e.srcElement;

e.preventDafault:阻止浏览器的默认行为，IE678不兼容；e.preventDafault?e.preventDafault:e.returnvalue=false;

e.stopPropagation:阻止事件冒泡传播，IE678不兼容；e.stopPropagation? e.stopPropagation:e.cancelBubble=true;

5.事件的传播机制

捕获：从外向内依次查找元素，event capturing；

目标：当前述事件源本省的操作；

冒泡：从内到外依次触发的相关行为，event bubbing;

云服务器 GPU云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95587.html

DOM 事件深入浅出（一）

摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

macg0406 2019-08-20 11:31 评论0 收藏0
原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 评论0 收藏0