on事件

最新推荐文章于 2025-03-07 01:07:38 发布

原创最新推荐文章于 2025-03-07 01:07:38 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

在jquery1.7以后才出现像的on事件。在此之后对未来事件的绑定不能再用bind.

on的使用方式为 on(events,[selector],[data],fn)

也可以用$("").on(events,fn).但这样就失去了他对未来元素的控制。如果在文档中，已经存在的元素，可以用先找到元素，然后再添加事件，

但是对于文档中未来的元素，只能用

$(document).on(events,selector,function(){

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yijiak

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

on和off事件

kids_fan的博客

12-27

1093

一、介绍 On事件，是用来绑定事件的事件处理函数，在选择元素上绑定一个或多个事件。 On事件语法形式：On(events,[selector],[data],fn)。可以传递四个参数： 1.events：一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin”。 2.selectorz：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的<null或省略，当它到达选定的元素，事件总是触发。 3.data：当一个事件被触发时要传递even.d

jQuery on注册事件

夏沐的博客

03-20

1514

在jQuery中，使用on统一所有事件的处理方式，主要有两种类型：（1）on注册简单事件（2）on注册委托事件（1）on注册简单事件 /* * selector：表示执行事件的后代元素，若没有后代，则自己执行 * click:传触发方式 * function：传事件处理函数 */ $(selector).on( "click", function() {}); （2）on注...

参与评论您还未登录，请先登录后发表或查看评论

Javascript鼠标事件大全

一个老码农

11-13

413

一般事件事件浏览器支持描述onClick IE3|N2|O 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件onMouseOver IE3|N2|O 当鼠标移动到某对象范围的上方时触发的事件onMous...

Jquery 【on事件】

annao6693的博客

06-15

459

一.on事件的定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元...

javascript中的页面事件

weixin_38166686的博客

11-17

287

onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。 onb...

关于vue3默认把所有onSomething当作v-on事件绑定的思考

11-20

根据描述，如果一个prop以`on`开头，且该prop未在组件内部被声明，Vue3会将其视为v-on事件绑定，将`on`后的部分转换为小写作为事件名称。例如，`onInputChange`会被解析为监听`inputchange`事件。这一改动的主要...

javascript实现简单的on事件绑定

11-26

实现一个简单的on和off方法介绍: Event对象: funcList: {}, //保存delegate所绑定的方法 ieFuncList :{} //保存ie下的绑定方法 Event 对象中的 on, off 方法,主要调用 Event.addEvent, Event....

jQuery的三种bind/One/Live/On事件绑定使用方法

10-20

然而，随着jQuery的发展，为了提供更高效和灵活的事件处理，出现了`one()`、`live()`以及后来的`on()`方法。 1. `bind()` `bind()`是jQuery中最早用于绑定事件的方法，它可以将一个或多个事件处理函数附加到指定...

详解vue中v-on事件监听指令的基本用法

11-20

Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的功能，其中`v-on`指令就是用于事件监听的关键特性。本文将详细解析Vue中`v-on`事件监听指令的基本用法。一、事件监听的重要性在Web应用开发中，事件...

javascript中的on事件

05-20

677

在网上查到得，记录一下 onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立

JQuery中的on事件

DavidZhao的博客

01-31

2081

on(events,[selector],[data],fn) 概述在选择元素上绑定一个或多个事件的事件处理函数。 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.o...

jquery中on事件

weixin_46002223的博客

08-23

1458

jquery中on事件多个事件处理语法 element.on(events,[selector],fn) 1、events：一个或多个用空格分隔的事件类型，如“click”或“keydown”。 2、selector：元素的子元素选择器 3、fn：回调函数绑定在元素身上的侦听函数第二种方法把原来给子元素身上的事件绑定在父元素身 ul父元素 li子元素触发的对象是ul里面的小li，绑定事件是给ul绑定的 $("ul").on("click","li",function(){ alert(

jquery on（）事件

qq_33352505的博客

07-20

516

jquery的绑定事件是会遍历已经存在的元素，然后对其进行事件绑定。因此这样就导致了一个问题，对于动态添加的元素原本写好的jquery的事件无法对其进行绑定。那么解决方案就是on（）事件，它分为多种状态，下面罗列了其支持的事件委托： blur focus focusin focusout load resize scroll unload click dblclick mou

on(events,[selector],[data],fn)中events的可选命名空间，例'click.ui.dropdown'

似水流年，举重若轻

04-12

367

上代码很奇怪，click后面怎么还带了2个类似class的后缀，在html中没有定义，经过查找发现，这其实是这个click事件的命名空间，用于移除方便等作用。具体请看http://www.365mini.com/page/jquery-event-namespace.htm关于on():http://jquery.cuishifeng.cn/on.html...

Jquery中的.on事件的使用

ITxiaobaibai的博客

06-05

334

HTML页面的代码<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(".add").click(function(){ $(".li").append('&lt

javaScript的on方法，动态触发事件

haibiaoye的专栏

11-05

3612

$('#select-tracker').on('input',function () {}); 当input框内容发生变化时，动态触发function()，这个方法与keyup和keydown的区别在与，keyup和keydown只有在键盘操作有效，而通过复制粘贴到文本框中则无法触发function，on则不一样，键盘操作、复制粘贴都有能动态触发

JavaScript基础——94 事件初始【on事件】

weixin_63215361的博客

03-07

592

【on有附着的意思：对象.on事件】load 页面或图像被完成加载-------------------常用click 鼠标点击某个对象-------------------常用mousedown 鼠标按键被按下-------------------常用mouseup 鼠标按键被松开mouseout 鼠标从某元素移开mouseover 鼠标被移到某元素之上abort 图像加载被中断blur 元素失去焦点change 用户改变域的内容dblclick 鼠标双击某个对象。

jquery on事件无效

最新发布

04-25

### jQuery `on()` 事件无效的原因分析 `on()` 是 jQuery 中用于绑定事件的核心方法之一，尤其适用于动态生成的 DOM 元素。然而，在某些情况下可能会遇到 `on()` 绑定事件无效的情况。以下是可能的原因及其对应的解决方案： #### 1. **目标元素不存在于初始 DOM** 如果作为事件代理的目标容器（即第一个参数中的静态父级元素）在页面加载时并不存在，则 `on()` 的事件监听无法正常工作[^2]。 - 解决方案：确保所选的父级元素在文档加载完成时已经存在。通常可以选择更高级别的静态节点，比如 `document` 或者某个固定的父容器。 ```javascript // 使用 document 作为静态父级元素 $(document).on('click', '.dynamic-element', function() { console.log('Event triggered'); }); ``` --- #### 2. **选择器错误或不匹配** 即使绑定了 `on()` 方法，但如果第二个参数的选择器未能正确匹配到实际触发事件的子元素，也会导致事件无效[^3]。 - 解决方案：仔细检查选择器语法以及它是否能够准确指向预期的动态元素。 ```javascript // 正确示例 $('#static-parent').on('click', '.child-class', function() { console.log('Child clicked!'); }); // 错误示例 (假设 .wrong-class 并未应用于任何子项) $('#static-parent').on('click', '.wrong-class', function() {}); ``` --- #### 3. **DOM 结构变化影响事件冒泡路径** 当动态添加的内容改变了原有的 DOM 层次结构，可能导致原本设置好的事件委托机制失效[^4]。 - 解决方案：重新评估整个 HTML 构造过程，并确认新加入的部分仍然处于原先定义的有效范围内；必要时调整事件挂载位置至更高层次不变动区域之上。 --- #### 4. **重复绑定覆盖原有行为** 多次调用相同类型的 `on()` 可能会意外地重写之前的处理逻辑，从而掩盖掉想要的效果[^1]。 - 解决方案：通过先移除旧有绑定再新增的方式规避冲突问题。 ```javascript $('.target-selector').off('event-type'); // 移除已有事件 $('.target-selector').on('event-type', handlerFunction); // 添加新的事件处理器 ``` --- #### 5. **JavaScript 执行顺序不当** 假如相关脚本文件被放置到了 `<head>` 部分而没有等待 DOM 完全准备好就开始运行的话，那么此时尝试操作尚未渲染出来的部分自然不会成功[^2]。 - 解决方案：利用 `$(document).ready()` 来延迟执行直到所有必要的组件都已构建完毕后再启动初始化动作。 ```javascript $(document).ready(function(){ $('#container-id').on('click', '.item-class', function(event){ alert("Item was clicked!"); }); }); ``` --- ### 总结建议为了防止以上提到的各种潜在陷阱发生，请遵循如下最佳实践： - 始终选取可靠的、始终存在的上级标签来充当事件捕获起点； - 准确编写 CSS 类名或其他标识符以限定作用范围； - 考虑好整体布局规划避免不必要的重构干扰既有功能实现； - 合理安排资源加载时机保障各环节衔接顺畅无阻塞现象出现。 ```javascript // 推荐的最佳实践案例 $(document).ready(function(){ $(document.body).on('click', '[data-action]', function(e){ e.preventDefault(); const action = $(this).data('action'); switch(action){ case 'submit': submitForm(); break; default: console.warn(`Unknown action: ${action}`); } }); function submitForm(){} }); ```