js中addEventListener事件监听器参数详解入门知识_事件菜鸟教程网

我们都知道addEventListener() 的参数约定是这样的:addEventListener(type, listener[, useCapture ])useCapture是可选参数,默认值为false,它代表:控制监听器是在捕获阶段执行还是在冒泡阶段执行,通常我们都没传递第三个参数(传 true 的情况太少了)。目前DOM 规范做了修订:addE

js中addEventListener事件监听器参数详解入门知识

我们都知道addEventListener() 的参数约定是这样的:

js中addEventListener事件监听器参数详解入门知识_事件菜鸟教程网

addEventListener(type, listener[, useCapture ])

useCapture是可选参数,默认值为false,它代表:控制监听器是在捕获阶段执行还是在冒泡阶段执行,通常我们都没传递第三个参数(传 true 的情况太少了)。目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了,也就是说第三个参数现在可以是两种类型的值了:

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])

这篇文章主要讲解第三参数为对象值的情况,目前规范中 options 对象可用的属性有三个:

document.addEventListener(type, fn, {
    capture: false,
    passive: false,
    once: false
})

passive就是告诉浏览器我可不可以用stopPropagation【该方法将停止事件的传播】,在执行fn之前就告诉浏览器,让浏览器性能更好。比如有时候你滑动滚轮的时候,你阻止默认行为,那么鼠标就不应该动了呗,但是它也动了。所以说浏览器刚开始是不知道你是否要取消默认行为的执行代码之后就知道了。true 是不可以使用stopPropagation

capture 就是 冒泡阶段或者事件捕获阶段执行事件   true 事件捕获阶段

once  是执行一次fn就清除fn,传true为清除。如果你多次执行,那么就会给documen添加多个事件,特别不好,容易造成事件混乱等一些问题,所以这时候就once就很好了。目前好像就谷歌支持吧

海计划公众号
(0)
上一篇 2020/04/05 01:40
下一篇 2020/04/05 01:40

您可能感兴趣的内容

  • js的类型菜鸟教程_类型入门知识

    基本类型按值访问,可以操作保存在变量中实际的值基本类型存在栈内存当基本类型调用对象的方法时,不会起效,底层会有一个叫包装对象酷炫操作,效果是…不报错引用类型复制:操作的是对象的引用添加属性:操作的是实际的对象引用类型数据存在堆内存,而引用存在栈区,也就是说引用类型同时保存在栈区和堆区引用类型的比较是比较引用==的类型转换关于==的执行机制,ECMASri

    2020/04/05
  • CaaS菜鸟教程_内容基础设施的云上版本

    CaaS菜鸟教程 官方网址:https://authing.cn/ GitHub:https://github.com/authing 简介描述:内容基础设施的云上版本 什么是 C…

    2020/03/11
  • css实现input file上传按钮自定义样式小白入门_按钮小白指南

    input file的样式不能直接用css来美化,我们可以曲线救国,把input file的透明度降低为0,相当于把这个控件隐藏了,实际上只是透明度为0,还是存在的,然后把div套上去,让div充当file的按钮。所以这个办法很简单,但是,把input file的透明度降低,连选择文件后的文件名也被隐藏了,这下可怎么办?那就只能用jquery获取file的文

    2020/03/29
  • 12个问题讲明白什么是区块链技术?菜鸟指南_区块链入门基础教程

    为什么要使用区块链技术? 虽然分布式账本肯定有很多优点,但它可能不适用于每个人或所有公司,至少目前还不适用。人们在听到区块链时,通常会产生疑问:区块链是什么?为什么要使用区块链?为什么要使用分布式账本? 在数字技术如此发达的今天,为什么不使用常规数据库或遗留系统来记录数据?毕竟,在许多情况下,对于企业主来说,使用区块链技术来更新现有基础设施,可能成本高昂,或

    2020/03/30
  • javascript的基本特点有哪些?小白帮助_特点使用指南

    JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言;它是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。javascript的基本特点1、javascript是一种解释性执行的脚本语言同其他脚本语言一样,JavaScript也是一种解释性语言,其提供了一个非常方便的开发过程。JavaScri

    2020/03/20
  • Headroom.js入门基础教程用来隐藏和展示页面元素,从而为页面留下更多空间,如下滚时消失,当页面上滚时候又出现

    Headroom.js基础入门 官方网址:http://wicky.nillia.ms/headroom.js/ GitHub:https://github.com/WickyNi…

    2020/03/05
  • Hyper.js基础指南_一款 JS / HTML/ CSS 终端工具

    Hyper.js基础指南 官方网址:https://hyper.is GitHub:https://github.com/zeit/hyper 简介描述:一款 JS / HTML/…

    2020/03/06
  • html转义特殊字符代码大全零基础入门_转义符基础指南

    注意:使用数字代码或英文代码需要在代码后面加一个英文的分号「;」第二列转义符号为使用数字代码或英文代码后得的的符号html转义特殊字符代码大全原符号转义符号数字代码英文代码解释制表符&#09/t Horizontal tab换行&#10/n Line feed回车&#13/r Carriage Return空格&#32&nbsp’ ‘ Space!!&#33

    2020/03/24
  • 如何修复Vue中的 “this is undefined” 问题入门攻略_this使用帮助

    如何修复Vue中的 “this is undefined” 问题入门攻略 当我们使用 Vue 在愉快的开发项目的时候,突然报了一个错误: this is undefined 别担心…

    2020/03/20
  • jExcel指南攻略_创建基于 Web 的电子表格应用

    jExcel指南攻略 官方网址:https://www.oschina.net/p/jexcel 简介描述:创建基于 Web 的电子表格应用 jExcel CE是一个非常简单,完全…

    2020/03/11
  • Typescript 严格模式有多严格?基础教程_模式小白常识

    前言”use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。至今,前端 er 们基本都默认开启严格模式敲代码。那么,你知道 Typescript 其实也有属于自己的严格模式吗?1. Typescript 严格模式规则当 Typescript 严格模式设置为 on 时,它将使用 strict 族下的严格类型规则对

    2020/03/23
  • 达内Web培训菜鸟教程_Web开发、前端培训

    达内Web培训菜鸟教程 官方网址:http://web.tedu.cn/ 简介描述:Web开发、前端培训 Web开发培训到达内Web前端培训机构-达内Web培训,涵盖大前端内容的W…

    2020/03/07
  • JS动画与CSS动画使用帮助_动画小白攻略

    一、JS动画优点:1)过程控制能力强。可以对动画工程进行精准的控制,暂停、取消、开始、终止都可以。2)动画效果多、炫酷。有一些效果是CSS动画所不能实现的3)兼容性比较高缺点:1)由于JS是通过不断的操作DOM和CSS的属性来实现动画效果的,这需要不断的重排(reflow)和重绘(repaint),非常消耗浏览器的内存。(在PC端有浏览器可以分配的内存比较大

    2020/03/26
  • 验证码的分类小白入门 网页验证码有哪些方式?_验证小白基础

    早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。于是验证码这种验证是否是人工操作的检验机制便产生了。随着验证码的出现,它可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试等等,给互联网带来了一定的安全性。

    2020/04/03
  • js操作DOM对象小白攻略_dom菜鸟知识

    1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。var div = document.createElement(“div”);使用createEleme

    2020/03/24
  • 输入框失去焦点事件和按钮点击事件冲突零基础入门_冲突小白帮助

    场景是这样的:点击输入框失去焦点会触发验证方法,点击提交按钮的时候也会触发验证方法,如果用户点击输入框后点击提交按钮就会同时触发失去焦点方法和提交按钮方法,这样就会触发两次验证。我想写成只触发一次验证,在开发过程中我发现:在移动端当失去焦点和点击事件同时发生的时候,会先执行失去焦点事件,然后再执行点击事件,也就是说失去焦点事件的执行时间比点击事件快。当我按这

    2020/03/20