资讯专栏INFORMATION COLUMN

前端培训-中级阶段(2) - 事件(event) 事件冒泡、捕获 - (2019-06-20期)

FrozenMap / 378人阅读

摘要:事件监听器可以被添加到节点上并在给定事件发生时触发。可以选择触发阶段冒泡捕获事件机制标准事件标准规定事件流包含三个阶段,分别为事件捕获阶段,目标阶段,事件冒泡阶段。返回其事件监听器触发该事件的元素。清理事务设置检查点的标志为。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

今天我们要讲什么?

事件机制

事件对象(Event)

event loop

DOM (与事件的关系,看不看无所谓)
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的 API。DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分(例如:页面元素、字符串或注释等等)。
DOM 是万维网上使用最为广泛的 API 之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发
DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在, WHATWG 维护DOM现存标准。
-- MDN

既然 DOM 有版本,那么在他的环境上事件的支持也是有版本的。文档

DOM 事件(0 级)

body.onclick 这种定义方式的。

不可以多次监听事件,因为是赋值的方式,下次赋值会覆盖。

只可以在冒泡阶段触发

DOM 事件(2 级)

addEventListener 方式定义的。

可以多次监听,切按监听顺序执行回调(有序)

取消监听需要同一引用的函数。举个栗子

    // 错误案例,两个方法不是同一引用,导致清除不掉
    document.addEventListener("click", function(){})
    document.removeEventListener("click", function(){})
    
    // 正确案例,同一引用,可以清除。
    function documentClick(){}
    document.addEventListener("click", documentClick)
    document.removeEventListener("click", documentClick)    

可以选择触发阶段(冒泡&捕获) capture

事件机制

标准事件:EMCAScript 标准规定事件流包含三个阶段,分别为事件捕获阶段目标阶段事件冒泡阶段
先存个代码,之后的例子我们用这个例子。测试看我这里的 DEMO


    
        click
    
事件捕获阶段

捕获阶段:由外到内,触发规律为 html > body > a
如果想在捕获阶段就触发,需要传入参数 {capture: true}

事件冒泡阶段

冒泡阶段:由内到外,触发规律为 a > body > html
这个阶段执行是 W3C 默认的,等价于 {capture: false}

事件执行顺序


图片来源-https://www.w3.org/TR/DOM-Lev...
事件的捕获阶段 > 处于目标阶段 > 事件的冒泡阶段 > 事件的默认行为
这里为什么要强调这个顺序呢?

因为默认行为是在最后面,所以我们都可以用 e.preventDefault() 来阻止。

基于上条的阻止默认事件。在移动端滑动时,阻止默认事件需要手动设置 passivefalse
passive: Boolean,设置为 true 时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。

我们真正单击的元素事件触发不在冒泡和捕获阶段,而在目标阶段触发。 DEMO-冒泡&捕获阶段触发事件,可以看到,他是通过定义时的先后顺序来触发的。

事件对象(Event)

Event 对象--mdn

事件对象(属性&方法)
key 类型 描述
bubbles boolean 是否冒泡
cancelable boolean 是否可以取消的默认动作。
currentTarget Element 返回其事件监听器触发该事件的元素。(this 的真实指向)
eventPhase Intenger 返回事件传播的当前阶段
target Element 返回触发此事件的元素。(事件的目标节点)
timeStamp Date 触发的时间戳
type String 事件名称。
isTrusted boolean 该事件是否是浏览器生成(true 代表是,false 代表是开发人员创建
preventDefault Function 取消事件的默认行为在 cancelable=true 时有效
stopPropagation Function 取消事件的捕获或者冒泡行为在 bubbles=true 时有效

IE: event.cancelBubble=true; //阻止事件冒泡

IE: event.returnValue=false; //阻止事件的默认行为

获取事件 window.event

事件类型(分类、Event对象之类)

DOM event 子类,根据不同的事件类型,返回的对象会有些许不同,比如 Mouse 类型的,就会有单击坐标之类的。 KeyboardEvent 之类的就会有按键之类的。

new 一个事件对象

CustomEvent() --mdn

document.body.onclick=function(e){console.log(e)}
var btn=document.body;
var event= new CustomEvent("click");
btn.dispatchEvent(event);

其实这里我们可以自定义事件的名称,然后我们就可以实现一个发布订阅的功能

document.addEventListener("bus", function(e) { console.log(e, e.detail) });
var event = new CustomEvent("bus", {detail: {LN_type: "lilnong.top"}});
document.dispatchEvent(event);
event loop (事件循环)

首先,我们要牢记一件事情 js 是单线程
Event Loop 中文叫事件循环。是浏览器内部的一种机制,javaScript 单线程运行时如何不阻塞 UI
Javascript 有一个 main thread 主线程call-stack 调用栈(执行栈),所有的任务都会被放到调用栈(栈采用的是后进先出的规则)等待主线程执行。

任务类别&任务队列(Task Queue)

JavaScript 中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)

MacroTask(宏任务)

异步事件(消息)

DOM 事件

setTimeout

XHR

Promise

总结

事件机制

当前执行块

当前执行块的微任务队列

宏任务队列

Event 事件级别

addEventListener 要主要保存 function 的引用,用于解绑

队列,先进先出(想起了梗,吃多了拉)

堆栈,先进后出(想起了梗,吃多了吐)

触发阶段 捕获>目标>冒泡

Event 对象,针对不同的类型,有自己独特的属性。

微信公众号:前端linong

初级阶段文章目录

前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)

前端培训-初级阶段(13) - 正则表达式

前端培训-初级阶段(13) - 类、模块、继承

前端培训-初级阶段(13) - ECMAScript (内置对象、函数)

前端培训-初级阶段(13) - ECMAScript (语法、变量、值、类型、运算符、语句)

前端培训-初级阶段(13、18)

前端培训-初级阶段(9 -12)

前端培训-初级阶段(5 - 8)

前端培训-初级阶段(1 - 4)

资料

前端培训目录、前端培训规划、前端培训计划

JavaScript系列----事件机制

事件参考--mdn

tasks-microtasks-queues-and-schedules

一次弄懂Event Loop(彻底解决此类面试问题) --光光同学-juejin

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

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

相关文章

  • 前端培训-中级阶段2) - 事件(event) 事件冒泡捕获 - (2019-06-20

    摘要:事件监听器可以被添加到节点上并在给定事件发生时触发。可以选择触发阶段冒泡捕获事件机制标准事件标准规定事件流包含三个阶段,分别为事件捕获阶段,目标阶段,事件冒泡阶段。返回其事件监听器触发该事件的元素。清理事务设置检查点的标志为。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/C...

    zhaochunqi 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery的事件绑定链式操作及原理(2019-07-25

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    sutaking 评论0 收藏0
  • 前端培训-中级阶段(6)- jQuery的事件绑定链式操作及原理(2019-07-25

    摘要:前端最基础的就是。帮助从旧的事件方法转换,和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称,命名空间,处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS)...

    Airy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<