JavaScript事件

Xufc 发布于2019-08-22 15:04 / 1934人阅读

摘要：最后这个布尔值参数如果是，表示再捕获阶段就调用事件处理程序如果是，则是再冒泡阶段调用事件处理程序好处可以添加多个事件处理程序

概述

JavaScript与HTML之间的交互通过事件实现。事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间.

事件流

当单击页面上的按钮时，你也单击了按钮的容器元素，甚至也单击了整个页面，那这几个元素的接收到事件的顺序是如何呢？
事件流就是指从页面中接收事件的顺序。事件流有以下两种：

事件冒泡

事件开始时从最具体的元素接收，然后逐级向上传播，也就是说如果点击一个元素，该元素的点击事件先发生再传播至上一级

事件捕获

事件从最不具体的元素开始，到你真正接收事件的节点逐级向下传播，也就是说点击一个元素，若document有点击事件，则先发生document事件，再发生至你点击的元素

DOM事件流

‘DOM2级事件’规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡阶段。
先后顺序：
事件捕获，为截获事件提供机会-->实际的目标接收到事件-->事件冒泡，在这个阶段对事件做出响应。

事件处理程序

事件是用户或者浏览器自身执行的某种动作，那么事件处理程序就是响应某个事件的处理函数，事件处理程序的名字以‘on’开头

HTML事件处理程序

DOM0级事件处理程序

var btn = document.querySelector("#clickMe")
btn.onclick = function() {
    alert("我被点击了")
}

DOM2级事件处理程序

btn.addEventListener("click", function() {
    alert("我被点击了")
}, true)

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListerner和removeEventListener，它们接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是true，表示再捕获阶段就调用事件处理程序；如果是false，则是再冒泡阶段调用事件处理程序
好处：可以添加多个事件处理程序

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/93148.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