首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么addEventListener不关注输入元素?

addEventListener是JavaScript中用于给元素添加事件监听器的方法。它的作用是在特定事件发生时执行指定的函数。

addEventListener不关注输入元素是因为它是一个通用的方法,可以用于给任何元素添加事件监听器,不仅仅局限于输入元素。它可以用于给按钮、链接、图片等任何元素添加事件监听器。

输入元素通常指的是表单中的输入框、复选框、单选框等元素,这些元素通常需要关注用户的输入行为,比如输入内容的变化、点击复选框的选中状态等。对于这些输入元素,我们通常会使用特定的事件监听器,比如input事件、change事件等来监听用户的输入行为。

所以,虽然addEventListener可以用于给输入元素添加事件监听器,但它并不关注输入元素,而是提供了一种通用的方法来给任何元素添加事件监听器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用神奇的 form 验证 API 来优化你的表单验证

typeMismatch(只读) true / false 当表单元素输入的值与类型匹配时为 true ,否则为 false 。此属性关联伪类 :valid / :invalid 。...rangeOverflow(只读) true / false 当表单元素输入的值大于 max 属性时 为 true ,否则为 false 。...stepMismatch(只读) true / false 当表单元素输入的值与 step 的值匹配 时为 true ,否则为 false 。...搞不懂为啥 W3C 暴露出样式修改的属性。。。 参考资料 『极限版』掺水,用纯 CSS 来实现超飒的表单验证功能 『真香警告』这33个超级好用的CSS选择器,你可能见都没见过。...鱼头的微信号是:krisChans95 也可以扫码关注公众号,订阅更多精彩内容。

1K20

【Vue原理】VModel - 源码版之input详解

Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧...【Vue原理】VModel - 源码版之input详解 上一篇文章,我们大概讲了所有表单元素的双绑原理,但是仍然有两个特殊的表单元素,是要多更多处理的,也不可能放在一篇文章说完,今天,我们说的是...为什么要做预输入延迟更新? 如果不做!..._vModifiers = binding.modifiers; // 如果设置 v-model.lazy,那么处理 预输入的问题 if (!...el.addEventListener('compositionend', onCompositionEnd); el.addEventListener('change', onCompositionEnd

93220
  • 现代浏览器内部机制(四): 换个角度看事件

    因为事件的冒泡机制,开发者可以在最顶层的元素挂载一个事件处理函数,并且基于 event target 分发不同的处理逻辑。...当合成器线程向主线程发送了一个输入事件后,第一件事情就是通过 hit test(点击测试) 找到对应的 event target(事件目标,还是翻译这个词比较正宗)。...Hit test 利用渲染进程产生的绘制记录来找出在触发本次输入事件的坐标底下的真实元素。...如果你之前从来没有想过为什么官方推荐在你的事件处理函数中添加 passive 参数,或者不知道为什么在 script 标签上添加 async 属性,我希望这个系列能为你阐明为什么浏览器需要这些东西来提供更快...总结 当我在构建网站时,我通常只关注怎么写代码以及怎样才能让自己的效率变得更高。这些事确实很重要,但我们也需要关注浏览器究竟会怎样处理我们的代码。现代浏览器在持续地为用户提供更好的 Web 体验。

    1K20

    从编程小白到全栈开发:响应用户的操作

    好,那么问题来了: 为什么是点击了这个“计算”按钮,而不是页面上别的地方,才会执行运算并出结果呢? 因为...我们只给了这个按钮这样的能力啊!...不同的输入设备,可能会产生不同的事件(如键盘操作,会产生KeyboardEvent事件)。不同类型的输入设备产生的事件,携带着不太一样的信息,进入事件处理函数,为我们下一步的处理提供了条件。...随着在输入框里的输入,可以看到我们在键盘上按下的键的内容以及键的标识代码被一一打印了出来。 这些例子看下来,是不是觉得获取用户的操作挺简单的?确实很简单。...那HTML的标签元素那么多,哪些上面可以用事件监听呢?答案是所有元素。只是有些事件是通用的,有些事件是某些特定元素上才有的,具体用到的时候,去网上查一下手册就行了。...欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

    1.7K40

    【前端 · 面试 】JavaScript 之你不一定会的基础题(二)

    最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正、交流。 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火。...[JavaScript 之你不一定会的基础题] 前言 在上一篇文章【前端 · 面试 】JavaScript 之你不一定会的基础题(一)中,有同学产生了这样一个疑惑:为什么 click 事件的监听函数中,...对于这个答案中的第二次输出结果,有人生出了疑惑:为什么 parent 事件触发时,e.target.id 的结果为 child呢?不应该是 parent 吗?...元素addEventListener 方法中的第三个参数是 true 或者 false,对元素自己触发的事件流程都没有任何影响,只有在它的父元素或者子元素在触发相同的事件后才有影响。...大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教! 你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

    55110

    【兼容性】H5滚动穿透解决方案

    小东西快快学快快记,大知识按计划学,不拖延 滚动穿透相信大家平常开发的时候也经常遇到,网上也有很多解决办法 今天我就谈下我对 滚动穿透的理解 和 总结下我们大佬写的一个比较完美的解决方案 废话,本文分为...3部分 1、什么是滚动穿透 2、为什么会滚动穿透 3、怎么解决滚动穿透 4、碰到的问题 什么是滚动穿透 大家肯定陌生了,做移动端开发的,肯定都碰到过,比如 我明明滚动的是弹窗,但是底下的 document...那么就让 document 不可滚动 1body overflow hidden html, body { overflow: hidden; } PC 可以,但是对移动端无效 那么我们限制body超过一屏...,我们就放开限制 这个白名单的设置就是 给元素加上 can-scroll 类名,这样就可以放开滚动 document.addEventListener( "touchmove", (e) =>...,当元素滚动到顶部和底部的时候,再滚动,仍然会触发document 滚动 为什么呢?

    5.8K20

    一篇文章搞懂前端事件监听

    事实上还有一种需要和浏览器经常交互的事情就是事件监听: 浏览器在某个时刻可能会发生一些事件,比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列 的事件; 我们需要以某种方式(代码)来对其进行响应...", () => { console.log("div元素被点击4") }) divEl.addEventListener("click", () => { console.log("div元素被点击...,为什么会产生事件流呢?...事实上,还有另外一种监听事件流的方式就是从外层到内层(body -> span),这种称之为事件捕获(Event Capture); 为什么会产生两种不同的处理流呢?...("事件冒泡:div元素被点击了") }) document.body.addEventListener("click", () => { console.log("事件冒泡:body元素被点击了

    96310

    【前端 · 面试 】JavaScript 之你不一定会的基础题(一)

    最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正、交流。 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火。...而筹码的增加往往依赖于我们日积月累的输入。 哪怕再小的一个问题,只要你愿意沉下心来往下钻,最后得到的可能是一片森林。 今天我要记录的这个问题,虽然比较基础,但是,内涵却是一点都不少!...DOM 元素事件执行顺序 HTML 页面上 DOM 元素的事件执行顺序一般有三个阶段: 事件捕获 事件触发 事件冒泡 借用网上的一张图来说明一下这个过程: [image-20210812202737932...通常来说 this 的值是触发事件的元素的引用,当使用 addEventListener() 为一个元素注册事件的时候,句柄里的 this 值是该元素的引用。...大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教! 你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

    55010

    webAPIs03-属性选择器、环境对象this、事件、页面对象

    }) // body 元素添加事件 document.body.addEventListener('click', function () { console.log(...('child...') }) 执行上述代码后发现,当单击事件触发时,其祖先元素的单击事件也【相继触发】,这是为什么呢?...再来关注一个细节就是事件相继触发的【执行顺序】,事件的执行顺序是可控制的,即可以在捕获阶段被执行,也可以在冒泡阶段被执行。...// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table const parents = document.querySelector('table') parents.addEventListener...('load', function() { // xxxxx }) 元素滚动事件 滚动条在滚动的时候持续触发的事件 window.addEventListener('scroll', function

    76910

    【JS】328- 8个你不知道的DOM功能

    最近一直在关注工具,从 React 和 npm-install-everything 中休息一下,看看一些原生的 DOM 和 Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行。...你肯定习惯于使用 addEventListener() 将事件添加到Web中的元素,一般情况下, addEventListener() 调用起来是这样的: element.addEventListener...浏览器中对 options 对象支持的非常好:除了IE11及更早的版本外,所有浏览器都支持它,因此如果你担心微软浏览器,那就可以使用它。...afterend: 插入元素之后 事件详细信息 如前所述,事件使用熟悉的 addEventListener() 方法添加到网页上的元素。...正如MDN指出的那样,这个接口上的许多特性被弃用或标准化。但最有趣和最有用的是 detail 属性,它是官方规范的一部分。

    1.4K10

    学会一行CSS即可提升页面滚动性能

    一般情况下 CSS 并不会影响 JS 事件,但有一个 CSS 属性则比较特殊,那就是 pointer-events,它可以用来规避鼠标事件,其中大部分属性值只适用于 SVG(可缩放矢量图形)操作,而我们只需要关注其...none 属性值,该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。...所以从 chrome56 开始,如果你在全局 touch 事件中声明这是"非被动"操作,那么chrome浏览器会默认执行并报错。...window.addEventListener('touchmove', e => e.preventDefault()) // 无效,并报错window.addEventListener('touchmove...如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~

    3.2K30

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    对应的移除事件是mouseoutmouseenter(鼠标进入):当鼠标移入元素本身(包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleavemouseenter/mouseover...:mouseover和mouseenter的异同体现在两个方面:是否支持冒泡事件的触发时机可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们希望如此,可以使用mouseenter...'))    test.addEventListener('mouseenter',()=>console.log('mouseenter'))    test.addEventListener('mouseup...test.addEventListener('mouseleave',()=>console.log('mouseleave'))    test.addEventListener('mouseout'...需要注意的是:移动端,普通元素是不会触发 focus 与blur的,只有表单元素才会触发,如input输入框执行顺序是 tochstart -》touchend-》-》mousedown-》focus-

    3.5K21

    深入理解 DOM 事件机制

    合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart 变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified 同时 DOM3 级事件也允许使用者自定义一些事件...2.如何实现 接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上: // 给父层元素绑定事件 document.getElementById('list').addEventListener...test.onclick = function(e){ e = e || window.event; e.preventDefault(); } 接下来我们看个例子:输入框最多只能输入六个字符...function(ev) { ev = ev || window.event; let val = this.value.trim() //trim去除字符串首位空格(兼容...body click'); }); // btn click 1 如上所示,使用 stopImmediatePropagation后,点击按钮时,不仅body绑定事件不会触发,与此同时按钮的另一个点击事件也触发

    2.8K50

    js 事件笔记

    如果事件传播,我们无法确定我们点击的对象是什么? 2、事件流三种模型 2.1事件冒泡模型 事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素。...默认时false,没有特殊需求,第三个参数可以写 3.3举个栗子 ...1、事件代理的原理: 利用事件模型的传播性质,将子元素的监听函数绑定到父元素上,通过事件传播去执行监听函数。...六、常见的事件类型 常见事件类型 解析 click 单击 dblclick 双击 focus 焦点,比如表单input把光标放上去开始输入的时刻 blur 失去焦点,比如输入完成切换到下一个输入框时,就失去了焦点...mouseout 鼠标拿出去触发,注意离开元素的子元素会重复触发 mouseenter 鼠标进入触发,进入子元素不会触发,比较常用 mouseleave 鼠标离开触发,离开子元素不会触发,比较常用

    11K21
    领券