`
backspace
  • 浏览: 137143 次
文章分类
社区版块
存档分类
最新评论

jQuery事件绑定.on()

 
阅读更多

前几天在看《jquery基础教程》,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的。

然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意。

看源码发现bind()和delegate()都是由on()实现的。on()的描述如下:

.on( events [, selector ] [, data ], handler(eventObject) )

一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。

在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。比如:

  

如上图,将click事件绑定在document对象上,页面上任何元素发生的click事件都冒泡到document对象上得到处理。

注意到.on()的描述中第二个可选参数:selector。如下图,添加了第二个参数,选择符button:

结果:

当事件冒泡到document对象时,检测事件的target,如果与传入的选择符(这里是button)匹配,就触发事件,否则不触发。

注意.on()也可以接收一个对象参数,该对象的属性是事件类型,属性值为事件处理函数。下面是官方文档的一个例子:

最后有一点,原先的live()方法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法,事件只会绑定到$()函数的选择符表达式匹配的元素上(上面我的例子中,为了简单绑定到了document),因此可以精确地定位到页面中的一部分,而事件冒泡的开销也可以减少。delegate()与on()同理,毕竟是用on()实现的:

 

 

3
0
分享到:
评论

相关推荐

    jquery.page.js下载

    4. **绑定事件**:可以使用`.on()`方法绑定滚动事件,如: ```javascript $(window).on('page:end', function() { console.log('滚动结束'); }); ``` 四、实例应用 在实际项目中,`jquery.page.js`常用于创建...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    - **绑定事件(Event Binding)**:使用 `.on()` 方法绑定事件,如 `.on('click', function() { ... })` 绑定点击事件。 - **事件委托(Event Delegation)**:使用 `.delegate()` 或 `.on()` 的事件委托功能处理...

    最新jquery-2.1.1.js以及jquery-2.1.1.min.js文件

    3. **事件处理**:使用`.on()`、`.off()`等方法可以方便地绑定和解绑事件,同时支持事件冒泡和事件委托。 4. **AJAX**:jQuery的`$.ajax()`和`$.get()`、`$.post()`等函数简化了异步数据请求,让跨域请求变得容易。...

    jquery-3.1.1.js和jquery-3.1.1.min.js

    它提供了丰富的API,包括选择器(如`$()`)、DOM操作(如`append()`、`remove()`)、事件处理(如`on()`、`off()`)、动画(如`animate()`)以及Ajax请求(如`$.ajax()`)等,使得JavaScript编程变得更加简单和高效...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    事件处理是jQuery的另一大亮点,`.click()`、`.hover()`等方法使得绑定和解绑事件变得轻而易举。动画效果是jQuery吸引人的地方,`.fadeIn()`, `.slideUp()`, `.animate()`等方法让动态效果变得简单易行。最后,...

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    2. 使用 jQuery 的 `.on()` 方法绑定 `hashchange` 事件,指定一个回调函数来处理 hash 变化。 3. 在回调函数中,根据新的 hash 值更新页面内容或执行相应的操作。 4. 对于旧版浏览器,`jquery.ba-hashchange.min.js...

    jquery-3.3.1.js和jquery-3.3.1.min.js.zip

    通过`.on()`方法,我们可以绑定各种DOM事件,如点击、鼠标悬浮等,而无需关注浏览器的兼容性问题。例如,`$("#button").on("click", function() {...})`将为ID为"button"的元素添加点击事件监听器。 动画效果也是...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    3. **事件处理**:jQuery简化了事件绑定和解绑,`$(selector).on('click', function() {...})`用于监听点击事件,`$(selector).off('click')`则移除该事件。 4. **动画效果**:`fadeIn()`, `slideUp()`, `animate()...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    - `$(element).on('event', function() {...})`:动态绑定事件,支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut()`:元素淡入淡出效果。 - `$(element).slideToggle()`:元素滑动显示或...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **`.on()`事件绑定**:在2.0.0中,`.on()`成为主要的事件处理函数,可以处理直接绑定和后代元素的事件,简化了事件处理的代码。 - **`.unwrap()`方法**:这个新方法允许开发者删除一个元素的所有父元素,使其...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    2. 事件处理:`.on()`, `.off()`, `.click()`, `.hover()`等方法简化了事件绑定和解绑,使得事件处理更加灵活。 3. 动画效果:`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数,让网页动态效果的实现变得直观且...

    jquery-1.7.1.min.js

    例如,它增强了jQuery的事件系统,引入了`.on()`方法,该方法可以绑定一次性事件、命名空间事件,以及代理事件,使得事件处理更加灵活。此外,还对动画功能进行了优化,使得动画执行更加流畅。 在DOM操作方面,...

    最新版JQuery-jquery-3.2.1.min.js

    - **事件处理**:`on()`, `off()`, `trigger()`, `bind()`, `unbind()`等用于绑定、解绑和触发事件。 - **动画**:`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等提供平滑的动画效果。 - **Ajax**:`$....

    jquery-3.5.1.js/min.js

    在事件处理方面,jQuery提供了`.on()`方法,可以绑定各种类型的事件,如点击事件`'click'`、鼠标悬停事件`'hover'`等。相比于原生JavaScript,jQuery的事件处理更加灵活,支持事件委托,只需在一个父元素上绑定事件...

    jquery.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.10.2.min.js.zip

    3. **事件处理**:jQuery的事件处理方式简洁易用,如`.click(fn)`用于绑定点击事件,`.on('event', fn)`用于动态绑定事件。 4. **动画效果**:jQuery的`.animate()`函数可以创建复杂的动画效果,而`.fadeIn()`, `....

    jquery手册(jquery.cuishifeng.cn网页版)2

    3. **事件处理**: 使用`.on()`方法可以绑定事件,如`$(selector).on('click', function() {...})`表示当点击指定元素时执行函数。`.off()`用来移除事件绑定。 4. **动画效果**: jQuery的`.animate()`方法允许创建...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    - **事件处理**:通过`.on()`, `.click()`, `.change()`等方法,可以轻松地绑定和处理各种事件。 - **动画效果**:`fadeIn()`, `slideUp()`, `animate()`等方法让创建动态效果变得直观。 - **Ajax交互**:`$.ajax...

    jquery-1.1.3.1.js,jquery.linscroll.js

    - **事件处理**:通过`.on()`, `.click()`, `.mouseover()`等方法绑定和触发事件。 - **动画效果**:jQuery的`.animate()`方法可以创建自定义动画,`.fadeIn()`, `.slideUp()`等预定义动画则提供常见效果。 2. **...

    jquery-1.12.4.min.js ZIP包2

    2. **事件处理**:jQuery简化了事件绑定和解绑的过程,例如`.on()`方法可以同时绑定多种事件,`.off()`用于解除事件绑定。同时,`.trigger()`可用于触发已绑定的事件。 3. **Ajax交互**:jQuery的`.ajax()`函数是...

    jquery-3.3.1.js和 jquery-3.3.1.min.js

    `$(element).on('event', callback)`允许开发者在一个元素上绑定事件处理器,而`.trigger('event')`可以触发事件。 3. **动画效果**:jQuery的`.animate()`方法允许开发者创建复杂的动画效果,如淡入淡出、滑动等。...

Global site tag (gtag.js) - Google Analytics