在元素上触发JQuery AddEventListener ()时，模糊不起作用 - 腾讯云开发者社区

文章/答案/技术大牛

发布

在元素上写事件和addEventListener()的区别

在元素上写事件和addEventListener()的区别 onclick添加事件不能绑定多个事件，后面绑定的会覆盖前面的。而addEventListener能添加多个事件绑定，按顺序执行。...onclick只能冒泡，addEventListener()可以得到捕获or冒泡。 addEventListener方式，不支持低版本的IE。（attachEvent 支持IE）。...不传递时，默认为false，表示不使用事件捕获（使用事件冒泡），如果需要显示事件捕获，则显示传递true。...) => { console.log(event) }, false ) addEventListener 第三个参数：为 true 时，浏览器采用Capture（捕捉）为 false...时，浏览器采用bubbing（冒泡）– 建议使用！

2K2 0

事件绑定的几种常见方式

在项目开发中，经常遇到绑定事件不起作用，或者事件绑定多次，导致重复触发。...bind方法　　会给每一个符合selector的元素添加click执行函数，即：将click事件绑定到所有设置了的selector元素上,如果动态添加了元素，之前绑定事件也起作用 live方法　　...将事件绑定在document上，所有事件触发冒泡到根节点document的时候，判断是否为click事件、并且是否为selector元素都符合则执行事件函数 delegate方法　　原理上delegate....); } 　　在大量使用ajax时，为了触发事件会在success里调用clickEvent方法，然后由于其他地方需要触发同样的事件又会调用clickEvent，这样很容易导致多次触发。　　...; } 1、直接在元素上绑定回调函数 click me 2、JS获取DOM元素对象后，对onclick属性赋值

2.1K8 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端系列第1集-什么是Dom事件流?

当一个事件在一个元素上触发时，它会在该元素上被处理，然后逐级向上冒泡直到文档根节点，这就是事件冒泡。在事件冒泡的过程中，每个处理函数都可以阻止事件继续向上冒泡，也可以停止事件默认行为。...在 DOM 事件流中，每个元素都有自己的事件处理程序，它们被称为事件监听器或事件处理函数。当事件发生时，这些处理程序会被触发。...语法和语义在DOM事件流中，事件首先进入捕获阶段。在捕获阶段中，事件从根元素开始向下传递，直到到达触发事件的元素。接下来是目标阶段，事件到达目标元素，执行绑定在该元素上的事件处理程序。...事件委托是一种优化事件处理程序的方式，通过将事件处理程序绑定到父元素上，可以减少事件处理程序的数量，提高页面性能。当一个子元素上的事件被触发时，该事件会冒泡到父元素，由父元素上的事件处理程序处理。...在使用事件委托时，需要注意事件的目标元素可能不是绑定事件处理程序的元素，需要在事件处理程序中使用事件对象来获取目标元素。调试技巧当事件处理程序不起作用时，可以使用浏览器的开发工具来调试。

4241 0

触摸事件 touchstart、touchmove、touchend

2、移动端浏览器触摸事件：事件名称描述是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发是 touchmove 接触点改变，滑动时是 touchend...{'color': '#f00'}); console.log("用户手指触摸到屏幕..."); }); //手指在屏幕上移动时触发...3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。元素添加事件句柄 * useCapture：true - 事件句柄在捕获阶段执行；false(默认) - 事件句柄在冒泡阶段执行 */...3、tSize 是当前位于屏幕上的所有手指的列表个数、targetTSize 是位于当前绑定事件的 DOM 元素上手指的列表个数、changedTSize 是涉及当前事件手指的列表个数。

2.4K2 0

移除jQuery好像也没那么难

我最近从我的博客中移除了 jQuery，并发现自己不断地在谷歌上搜索一些模式。...或者选择所有 .box 的实例 document.querySelectorAll(".box"); 在选择中的所有元素上运行函数 querySelectorAll() 返回一个包含所有匹配查询元素的...要在没有 jQuery 的情况下实现类似功能，你可以在将元素添加到 DOM 时附加事件处理程序。...// jQuery // 在 document 和 .box 上触发 myEvent $(document).trigger("myEvent"); $(".box").trigger("myEvent...如果您只想在元素具有某个类时执行某些操作，可以使用 .classList.contains() 来代替 jQuery 的 .hasClass()： // 使用 jQuery if ($(".box")

1.8K1 0

JavaScript 事件委托以及jQuery对事件委托的支持

jquery 对事件委托的支持在jQuery里对事件委托的支持，有以下几个函数： ?...与live() 相对应，取消绑定，则用下列代码： $("p").die(); 在事件绑定上，jQuery 提供了一种更通用的函数： on(events,[selector],[data],fn)...selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的元素，事件总是触发。...data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。...."); }); }) off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。

1.3K6 0

jQuery之事件绑定到触发全过程及知识点补充

addEventListener的话，调用绑定click事件 //eventHandle就绑定到addEventListener上 if ( elem.addEventListener...、jQuery的事件绑定为何不直接绑定在目标元素身上，而是元素和事件分离？...可以看到 jQuery的事件和触发事件的handler是分离的，事件集合存在事件缓存dataPriv的events上， //获取数据缓存 elemData = dataPriv.get( elem...click事件，但是click是原生事件，它是靠 addEventListener绑定来触发事件的。...trigger的机制去触发click事件，正是因为jQuery没有直接把事件相关的handler与元素直接绑定，而是采用了分离处理，所以我们通过trigger触发click事件与addEventListener

1K1 0

jquery $(document).ready()与window.onload的区别

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。...另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。...要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。...原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。

2.9K3 1

解决blur与click冲突

在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。...一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。...click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。...mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。...当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

3.6K3 1

解决blur与click冲突

2.4K2 0

XSS攻击在新花样

XSS攻击是一种传统的攻击方式，但随着这么多年的技术发现，尤其是在新的技术环境下，有人已经玩出了很多新花样。...function(event) { console.log('Key released:', event.which); }); // keypress 事件在按下并释放键时触发...keydown事件在用户按下键时触发，keyup事件在用户释放键时触发，而keypress事件则在按下键并输入字符时触发。...这种方式，要比原生的javascript简洁得多，不同的是，要依赖网页的jQuery类库，或者直接引用云端的jQuery类库。...三、HTML5截图在HTML5中，可以使用canvas元素和toDataURL方法来实现截图功能。

4111 0

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？...第二种是通过事件委托的原理进行处理，事件委托将一个事件监听器实际上绑定到整个容器，然后每个列表项被点击就可以访问，这样效率更高。...： document.getElementById('joblist').addEventListener('click', function (ev) { var target = ev.target...该事件附加到staticAncestors应处理的元素的静态父级 ( )。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。...然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时，您的自定义处理程序函数将被执行。

5.5K2 0

一次关于js事件出发机制反常的解决记录

起因：正常情况下我点击s2时是先弹出我是children，再弹出我是father，但是却出现了先弹出我是father，后弹出我是children的情况，这种情况是在和安卓app交互的h5页面中出现的，本地测试没有问题...// useCapture ：是否使用捕捉，一般用 false,事件触发时，会将一个 Event 对象传递给事件处理程序。...elem.removeEventListener) { elem.removeEventListener(type, fn, false); } } 获取事件对象和事件源(触发事件的元素...IE中阻止函数器默认动作的方式 } return false; } 最后的解决方法：让我们回顾一下最初的问题，可能部分浏览器把事件的useCapture默认为true，导致点击子元素时父元素的事件先响应了...，于是我的办法是在父元素的事件里进行判断比如容器为#a，动态插入的元素为#b，在#a上监听click事件，判断event.target.id是不是等于b即可，如果.bclass这种，以此类推。

1.8K5 0

浏览器 DOM 元素的事件代理指的是什么

事件监听我们可以在想要监听事件的 DOM 元素上通过 addEventListener[3] 注册监听器。...如图所示，当使用者触发一个DOM 元素的事件时，首先会进入捕获阶段（Capture Phase），从根结点逐步向事件目标传递；到达目标后则进入目标阶段（Target Phase），接着就开始折返，进入向根结点传递的冒泡阶段...在使用 addEventListener 注册事件监听器时，可以通过传递第三个参数，指定此事件监听要在什么阶段触发： elem.addEventListener('click', eventHandler...在没有事件代理的版本中每一个 li 上都注册了事件监听器，当数量越来越多时浏览器也就建立了越来越多的监听器，无形中对性能有很大的影响；反之在有事件代理的版本中，将事件监听器注册在了外层的 ul 上，无论内容有多少...库和框架中的事件处理在 DOM 事件处理的这部分，jQuery 和 Vue 都将原生的事件监听器做了封装，方便我们快速设定、使用，甚至会自动帮你移除无用的事件监听。

1.4K3 0

jQuery源码解析之click()的事件绑定

一、事件委托 DOM有个事件流特性，所以触发DOM节点的时候，会经历3个阶段：（1）阶段一：Capturing 事件捕获（从祖到目标）在事件自上（document->html->body->xxx）...) { xxx } 如果有参数，则是绑定事件，调用 on() 方法；没有参数，则是调用事件，调用 trigger() 方法（ trigger() 放到下篇讲）三、$().on() 作用：在被选元素及子元素上添加一个或多个事件处理程序...源码： //绑定事件的方法 //源码5812行 jQuery.fn.extend( { //在被选元素及子元素上添加一个或多个事件处理程序 //$().on('click'...[ type ] = true; } }, ... ... } 解析：可以看到，很多的 if 判断，都是在初始化对象，最后通过 while 循环，调用目标元素的 addEventListener...(); 在 jQuery 对象中，有唯一id的属性 $("#one") elemData = dataPriv.get( elem ) ① Data() //目标元素的jQuery id

2.3K2 0

一些原生写法可以替代Jquery方法

一、选取DOM元素 jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。　　...完全可以用addEventListener模拟。　　...Element.prototype.on = Element.prototype.addEventListener; 为了使用方便，可以在NodeList对象上也部署这个方法。　　...对象上也部署这个方法。　　...六、attr方法 jQuery使用attr方法，读写网页元素的属性。

2.4K2 0

koa+socket.io尝试简单的web动作同步

socket.io是我们需要的通讯库原理 1、前端捕获正在发生的动作action，和触发动作的元素target，通过客户端socket传输到服务器socket; 2、服务器socket接收到信息，...再将信息广播到其他所有客户端socket; 3、其他客户端socket接收到广播信息，使特定的元素target触发特定的动作action 服务端准备服务器的准备很简单：搭起服务器，接入socket.io...上 io.listen(server); //......在一个html的内写入以下代码，改造addEventListener,为调用过addEventListener的元素加入标识。...看来JQuery的trigger是直接操作元素触发的，于是改用原生的dispatchEvent。完成效果图合并源代码到io.js. 编写简单的html，完成一个demo <!

9970 0

window的onload事件和domcontentloaded执行顺序

script>; 支持该事件的 JavaScript 对象：image, layer, window 对于这些标签比如iframe 、img 、script标签，image对象等等，我们用的很多，都是在相应的元素加载完成之后执行的事件...当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。...当通过对此方法的连续调用添加多个函数时，它们在DOM按照添加顺序准备就绪时运行。从jQuery 3.0开始，jQuery确保在一个处理程序中发生的异常不会阻止随后添加的处理程序执行。...但是，jQuery的.ready()方法以一种重要且有用的方式不同：如果DOM准备就绪并且DOMContentLoaded在代码调用之前浏览器触发.ready( handler )，则该函数handler...相反，DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。浏览器还在对象load上提供事件window。当此事件触发时，表示页面上的所有资源都已加载，包括图像。

4.3K1 0

【博客同步】onload与ready对比

的 (document).ready 方法和 (window).load 方法 ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件） onload / load 事件的触发，...表示页面包含图片等文件在内的所有元素都加载完成 2 区别 2.1 执行时间 window.onload 在页面的DOM加载完成，所有的图片、子frame等所有元素加载完才触发 window.onload...= function () { alert('window onload event'); }; $(document).ready 方法发生在DOM树构造完成（在onload之前发生），不必等图片等资源加载完...).ready(function(){}) 可以简写成 (function(){}); 3 原生JS实现 jQuery 的 ready 方法 function ready(fn){ if(document.addEventListener...){ //标准浏览器 document.addEventListener('DOMContentLoaded',function(){

3480 0

你知道 Chrome 专门为调试提供的这些函数吗？

当我在第一次看到这些函数时非常兴奋，把它们直接写到了自己的代码中，结果当然是跳出了各种 Uncaught ReferenceError：xxx is not defined 错误。...❝不过如果已经把 JQuery 引入为 $ 的话，还是会正常执行 JQuery 的。...getEventListeners getEventListeners(element) 输出已注册在元素上的监听器，就拿刚才的例子来说，输入 monitorEvents(element) 后再输入 getEventListeners...如 scroll type：监听事件类型 useCapture：监听器会在 Capture 阶段拦截事件以上属性都是在执行 addEventListener 时所能够提供的参数，别忘了在 removeEventListener...时也要填入相同的参数才能除监听器。

1.8K1 1

点击加载更多

在元素上写事件和addEventListener()的区别

事件绑定的几种常见方式

前端系列第1集-什么是Dom事件流?

触摸事件 touchstart、touchmove、touchend

移除jQuery好像也没那么难

JavaScript 事件委托以及jQuery对事件委托的支持

jQuery之事件绑定到触发全过程及知识点补充

jquery $(document).ready()与window.onload的区别

解决blur与click冲突

解决blur与click冲突

XSS攻击在新花样

如何实现动态添加的元素添加点击事件

一次关于js事件出发机制反常的解决记录

浏览器 DOM 元素的事件代理指的是什么

jQuery源码解析之click()的事件绑定

一些原生写法可以替代Jquery方法

koa+socket.io尝试简单的web动作同步

window的onload事件和domcontentloaded执行顺序

【博客同步】onload与ready对比

你知道 Chrome 专门为调试提供的这些函数吗？

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐