addEventListener和JavaScript的事件机制
JavaScript的事件处理分为两个阶段:
- 捕获阶段:从根节点向event.target层层传递
- 冒泡阶段:从event.target向根节点层层传递
addEventListener(eventName,eventHandler,useCapture)这个函数的第三个参数表示是否使用捕获阶段,默认值为false。
useCapture默认值为false表示优先把事件的处理权交给子元素去处理。如果祖先结点在捕获阶段就把事件给处理掉了,子孙结点可能会感到一脸懵逼。
useCapture=false,所表达的含义就是:如果一件事孩子们能处理好,那就让孩子们去处理吧。
参考资料
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
addEventListener和JavaScript的事件机制的更多相关文章
- JavaScript的事件机制
JavaScript的事件机制 摘要 事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详 ...
- 深入研究JavaScript的事件机制
本篇开始将回顾下Javascript的事件机制.同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块.为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件 ...
- JavaScript系列----事件机制
1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...
- 从八道面试题看JavaScript DOM事件机制
As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px ...
- javascript的事件机制(百度文库)
http://wenku.baidu.com/view/9c8761e1524de518964b7d65.html http://wenku.baidu.com/view/1c3d7228bd6478 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
- JavaScript——事件机制
事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细介绍JavaScript的事件机制, ...
- 对JavaScript事件机制的一点理解
JavaScript通过事件机制实现了异步操作,这种异步操作可以使CPU可以在IO任务的等待中被释放出来处理其他任务,等待IO结束再去处理这个任务.这个是一个基本的事件机制. 那么是不是说事件从监听到 ...
随机推荐
- 仅用StoryBoard布局实现按钮的均匀分布
今天在做登录界面时设计的需求是,登录和取消按钮左右对称均匀分布,按钮大小不变如图 屏幕宽度变化时按钮宽度不变,三个间距相等并且随屏幕变化而变化,简单的说就是按钮均匀分布,在网上查了一些资料,弄得比较乱 ...
- DevOps 工程师成长日记系列五:部署
原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-part-5-deploy ...
- emacs 帮助相关命令
emacs 帮助相关命令 如下表: No. 键盘操作 键盘操作对应的函数 回答的问题 01 ctrl-h c describe-key-briefly 这个按键组合将运行哪个函数 02 ctrl-h ...
- arm-linux-gcc-4.5.1安装方法
写在前面 之前写了一篇arm-linux-gcc-5.4.0的安装方法,但是后来发现5.4.0这个版本可能有些太新了,所以又找了这个4.5.1版本(低版本),由FriendlyARM(友善之臂)提供, ...
- 无法打开“Visual Studio Code”,因为Apple无法检查其是否包含恶意软件。”的问题解决
解决方法: 1.系统偏好设置==> 安全性与隐私 ===> 在下方允许就可以了. 2.一劳永逸 但是注意安全性 打开terminal 命令行工具输入命令:sudo spctl --mast ...
- 4-9 Panadas与sklearn结合实例
1.显示百分比的柱状图 In [1]: import pandas as pd import numpy as np import matplotlib.pyplot as plt %matplo ...
- cannot resolve symbol 'XXX'
原因:出现这种情况的原因是在IDEA或者myeclipse编译器中没有导入相关的jar包(jar包相当于类的集合,可以使用其中的类): 针对IDEA出现cannot resolve symbol 'X ...
- SpringCloud微服务常见组件理解
概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...
- Docker入门之安装与使用
1. 安装(windows) win7.win8以及win10家庭版 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliy ...
- java程序 cpu占用过高分析
linux终端下用 top命令看到cpu占用超过100%.之所以超过100%.说明cpu是多核.默认top显示的是cpu加起来的使用率,运行top后按大键盘1看看,可以显示每个cpu的使用率,top里 ...