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

在元素上触发JQuery AddEventListener ()时,模糊不起作用

在元素上触发JQuery AddEventListener()时,模糊不起作用是因为JQuery中没有AddEventListener()方法。JQuery使用的是.on()方法来绑定事件。

.on()方法是JQuery提供的事件绑定方法,用于在指定的元素上绑定一个或多个事件处理函数。它可以用于绑定各种事件,如点击事件、鼠标移入移出事件、键盘事件等。

使用.on()方法绑定事件时,可以通过选择器来指定要绑定事件的元素。如果选择器匹配多个元素,那么事件将被绑定到所有匹配的元素上。

下面是一个示例代码,演示如何使用.on()方法来绑定点击事件:

代码语言:txt
复制
$(document).ready(function(){
    $("button").on("click", function(){
        alert("按钮被点击了");
    });
});

在上面的代码中,我们使用.on()方法将点击事件绑定到所有的按钮元素上。当按钮被点击时,会弹出一个提示框显示"按钮被点击了"。

JQuery的事件绑定方法非常灵活,可以通过.on()方法来绑定多个事件,也可以使用命名空间来管理事件,还可以动态地添加和移除事件处理函数。

关于JQuery的事件绑定方法,你可以参考腾讯云的JQuery文档,了解更多详细信息和示例代码:JQuery官方文档

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

相关·内容

事件绑定的几种常见方式

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

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

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

    20710

    触摸事件 touchstart、touchmove、touchend

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

    1.7K20

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

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

    82360

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

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

    1.7K31

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

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

    3.9K20

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

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

    1.1K30

    一次关于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.5K50

    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

    1.8K20

    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 <!

    84300

    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。当此事件触发,表示页面上的所有资源都已加载,包括图像。

    3.7K10

    前端入门6-JavaScript客户端api&jQuery

    文档或资源加载过程中被终止触发 onerror 文档或资源加载发生错误时触发 onhaschange 锚部分发生变化时触发 onload 文档或资源加载完成触发 onresize 在窗口缩放触发...onunload 文档从窗口或浏览器中卸载触发 鼠标事件 click 单击,释放触发 dblclick 双击,释放触发 mousedown 点击鼠标键触发 mouseenter 光标移入元素或某个后代元素所占据的屏幕区域触发...mouseleave 光标移出元素及所有后代元素所占据的屏幕区域触发 mousemove 光标元素移动触发 mouseout 与mouseleave基本相同,除了当光标仍然某个后代元素也会触发...mouseenter 与mouseenter基本相同,除了当光标仍然某个后代元素也会触发 mouseup 当释放鼠标触发 鼠标事件被触发,指定的处理方法都会传入一个 MouseEvent...ctrlKey 事件触发是否有点击ctrl键 键盘焦点事件 blur 元素失去焦点触发 focus 元素获得焦点触发 focusin 元素即将获得焦点触发 focusout 元素即将失去焦点触发

    6K40
    领券