### JQuery详解:jQuery的bind方法 #### 一、概述 jQuery 的 `bind()` 方法是用于在元素上绑定事件处理程序的一种方式。与原生 JavaScript 的事件绑定相比,`bind()` 提供了更多灵活性和便捷性。它允许开发者指定一个或多个事件类型,并为这些事件类型绑定一个或多个处理函数。 #### 二、基本用法 `bind()` 方法的基本语法如下: ```javascript $(selector).bind(event, [data], handler); ``` - **`selector`**:选择符,用来指定要绑定事件的元素。 - **`event`**:事件类型,如 `'click'`、`'mouseover'` 等。 - **`data`**:可选参数,为事件处理函数提供额外的数据。 - **`handler`**:事件处理函数,当事件被触发时执行。 #### 三、事件类型 `bind()` 方法支持多种事件类型,包括但不限于: - **鼠标事件**:如 `'click'`、`'dblclick'`、`'mousedown'`、`'mouseup'`、`'mousemove'`、`'mouseover'`、`'mouseout'`、`'mouseenter'`、`'mouseleave'` 等。 - **键盘事件**:如 `'keydown'`、`'keypress'`、`'keyup'` 等。 - **表单事件**:如 `'change'`、`'select'`、`'submit'` 等。 - **窗口/文档事件**:如 `'load'`、`'resize'`、`'scroll'`、`'unload'` 等。 除了这些标准事件外,jQuery 还提供了一些扩展事件,如 `.trigger()` 和 `.triggerHandler()`,这些方法可以手动触发事件或仅执行事件处理函数而不实际触发事件。 #### 四、命名空间 为了更好地组织和管理事件处理函数,jQuery 引入了命名空间的概念。事件类型可以附加一个点号(`.`)后跟一个字符串来表示命名空间,例如: ```javascript $(selector).bind('click.myCustomRoutine', function() { // 处理函数代码 }); ``` 这里 `'click.myCustomRoutine'` 表示为 `'click'` 事件绑定了一个名为 `'myCustomRoutine'` 的处理函数。这有助于避免命名冲突,并使得解除绑定变得更加灵活。 #### 五、解除绑定 解除绑定是通过 `unbind()` 方法实现的。语法如下: ```javascript $(selector).unbind([event], [selector], handler); ``` - **`event`**:要解除绑定的事件类型,可以包含命名空间。 - **`selector`**:可选参数,用于限定哪些子元素上的事件处理器将被移除。 - **`handler`**:可选参数,如果提供了这个参数,则只移除特定的事件处理函数。 如果希望根据命名空间来解除绑定,可以通过以下方式: ```javascript $(selector).unbind('.myCustomRoutine'); ``` 这会解除所有名称包含 `'myCustomRoutine'` 的事件处理器。 #### 六、注意事项 1. **性能考虑**:虽然 `bind()` 提供了强大的功能,但在大量绑定事件时可能会导致性能问题。因此,在实际开发中应合理使用并注意优化。 2. **兼容性**:尽管 jQuery 旨在提高跨浏览器兼容性,但在某些旧版本浏览器中仍可能遇到问题,特别是在 IE6-8 中。 3. **替代方法**:自 jQuery 1.7 版本起,推荐使用 `.on()` 方法来代替 `bind()` 和 `delegate()`,因为 `.on()` 更加灵活且性能更优。 #### 七、总结 `bind()` 方法是 jQuery 中一个非常有用的工具,用于在 DOM 元素上绑定事件处理函数。通过合理的使用命名空间以及了解如何使用 `unbind()` 来解除绑定,可以帮助开发者更高效地管理和控制页面中的事件行为。然而,随着 jQuery 的发展,现代浏览器提供的原生 API 也变得越来越强大,因此在新项目中考虑使用原生 API 或其他轻量级库也是不错的选择。















在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释?
先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍:
.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象, 比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简 化.bind('click')。一共有以下这 些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
任何作为type参数的字符串都是合法的;如果一个字符串不是原生的JavaScript事件名, 那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发,但可以通过使用.trigger()或 者.triggerHandler()在其他代码中手动触发。
如果type参数的字符串中包含一个点(.)字符, 那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说,如果执 行 .bind('click.name', handler) ,那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。命名空 间允许我们取消绑定或者触发一些特定类型的事件,而不用触发别的事件。参考unbind()来获取更多信息。
当一个事件传到一个元素上,所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件 处理函数,总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后,事件继续沿着普通的事件冒泡途径上浮。
jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候 可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。
但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论 上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有 可能的额外的同一事件绑定逻辑。
这时候如果直接用 .click() / .bind('click') 加 上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素 其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供 function作为第二个参数来指 定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。
对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添 加 .something 来区分自己这部分行为逻辑范围。
比如 用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你 可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可 释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名 空间所绑定的事件行为。
同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通 过 .unbind('.myCustomRoutine') 即可。
要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果 用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别 为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不 是 "myCustomRoutine 下的 myCustomSubone 子空间"。


- 粉丝: 0
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 云计算环境下高校图书馆统计与评估服务体系构建.docx
- 基于51单片机的多点温度控制系统设计文库.doc
- 互联网的社会图谱.docx
- 学生成绩管理系统VB程序.doc
- 融人物联网技术的机电一体化专业改革思考.doc
- 单片机原理与接口技术课程设计.doc
- 区域高新技术产业集群创新网络结构特征研究.docx
- 网络素养与数据伦理.pptx
- 深厚表土冻结法凿井信息化施工管理体系系统的开发与应用.doc
- 基于单片机的电子时钟(毕业设计)doc先用.doc
- 最新深蓝色区块链商业策划书PPT背景ppt模板.pptx
- 电池供电电磁流量计新特点与软件特点.doc
- linux下nagios安装详解.doc
- web高校教师管理.doc
- PLC自动售货机.doc
- 基于英国BTEC模式的卫生类职校计算机课程改革研究.docx


