JavaScript的事件

LuDongWei 发布于2019-08-21 18:39 / 2406人阅读

摘要：我认为的重点事件，事件监听，事件处理函数，事件流的定义事件流的冒泡和捕获阶段是什么节点有多个事件处理程序，他们的执行顺序怎么确定搜索程序的顺序事件处理函数内添加事件监听阻止默认事件和阻止冒泡的代码结合事件知识点写一个定义对于一个经典的事件监

我认为的重点

事件，事件监听，事件处理函数，事件流的定义

事件流的冒泡和捕获阶段是什么?

DOM 节点有多个事件处理程序，他们的执行顺序怎么确定?搜索程序的顺序

事件处理函数内添加事件监听

阻止默认事件和阻止冒泡的代码

结合事件知识点写一个 demo

定义

对于一个经典的事件监听函数,明确一些概念

btn.addEventListener("click", function(){
  //这个函数就是事件处理函数
  console.log(1)
})

事件 === 用户的动作 ===在上面的代码就是 "click"

事件监听 === 上面的整个代码 === 事件 + 事件处理函数

事件处理函数 === 在上面的代码就是console.log(1)

事件流 === 事件在 DOM 节点树传播的顺序,可以是冒泡或者捕获

冒泡阶段和捕获阶段

冒泡和捕获阶段测试 demo : http://js.jirengu.com/tofisal...

DOM

问题: 点击4区域,解释打印结果

注意点:

div3 有两个函数,注意执行顺序

div3 之后有个×, 他的实现的代码是什么?

问题: 如果我点击3区域,打印什么?

打印冒泡2222, 3 ,33333

事件处理程序顺序测试demo: http://js.jirengu.com/qoyoben...

点击 3 区域,解释打印内容

总结: 一个 DOM 结点事件处理程序的顺序:

先捕获后冒泡

哪个代码在前面, 哪个代码就先执行

一般情况下, 是先看1,如果1相同,再看2

但是当 DOM 结点(如 demo 的 div4 )之后没有 DOM 结点, 那个按照第2条规则处理

事件处理函数内添加事件监听

点击3区域, 解释打印内容

代码如下: http://js.jirengu.com/bonacob...

根据代码画出 DOM

从 div3 开始冒泡, 所以打印3, 2

改变需求: 点击3区域的时候, 只打印3, 第二次点击3区域的时候,打印3, 2

代码: http://js.jirengu.com/jiresoy...

根据代码画出 DOM

总结:

当你给 DOM 节点的事件处理函数内添加了一个事件监听A, 那么事件监听A是马上添加到 DOM 中(也就是说刚添加的事件监听A在第一次点击就能激活, 看第一个例子)

如果你想让添加的事件监听A不是马上添加到 DOM 中(也就是说刚添加的事件监听A在第二次点击才能激活)那么可以使用setTimeout解决. (看第二个例子)

dismissible propover

效果: http://js.jirengu.com/nanepev...

列出所有情况

注意点:

什么时候用事件处理函数内添加事件监听?

第二次与第一次的 DOM 结构函数不同 + 第二次是在第一次的某种情况下(红圈)

GPU云服务器云服务器 javascript的事件 javascript事件 javascript键盘事件 javascript焦点事件

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

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

浏览器下的 Event Loop

摘要：前言是以单线程的形式运行在宿主环境下，采用了回调的形式来解决异步任务。线程中步就是在浏览器下的。前言 javascript 是以单线程的形式运行在宿主环境下，javascript 采用了回调的形式来解决异步任务。为什么是单线程？ javascript 的最开始的出现是为了给 web 页面增添一些动态的效果，那么就避免不了获取页面上的元素信息，如果 javascript 是以多线程的...

forrest23 2019-08-23 16:50 评论0 收藏0
什么是JavaScript 事件循环 ?

摘要：此事件队列的美妙之处在于它只是函数等待被调用和移动到调用栈的一个临时存放区域。在事件循环不断监视调用栈是否为空现在确实是空的时候调用创建一个新的调用栈来执行代码。在执行完之后进入了一个新的状态这个状态调用栈为空事件记录表为空事件队列也为空。这篇文章是对个人认为讲解　JavaScript　事件循环比较清楚的一篇英文文章的简单翻译,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 评论0 收藏0
JavaScript 浏览器事件解析

摘要：原文浏览器事件之间的关系程序采用了异步事件驱动编程模型，维基百科对它的解释是事件驱动程序设计英语是一种电脑程序设计模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、浏览器、事件之间的关系 JavaScript 程序采用了异步事件驱动编程（Event-driven program...

spacewander 2019-08-20 11:26 评论0 收藏0
《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0
初窥JavaScript事件机制的实现（一）—— Node.js事件驱动实现概览

摘要：如果当前没有事件也没有定时器事件，则返回。相关资料关于的架构及设计思路的事件讨论了使用线程池异步运行代码。下一篇初窥事件机制的实现二中定时器的实现在浏览器中，事件作为一个极为重要的机制，给予JavaScript响应用户操作与DOM变化的能力；在Node.js中，事件驱动模型则是其高并发能力的基础。学习JavaScript也需要了解它的运行平台，为了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 评论0 收藏0