`

jquery 事件绑定

阅读更多
event:统一事件模型
  "事件沿着对象树传播"这一图景是面向对象界面编程模型的精髓所在。对象的复合构成对界面结构的一个稳定的描述,事件不断在对象树的某个节点发生,并通过冒泡机制向上传播。对象树很自然的成为一个控制结构,我们可以在父节点上监听所有子节点上的事件,而不用明确与每一个子节点建立关联。
  jQuery除了为不同浏览器的事件模型建立了统一抽象之外,主要做了如下增强:
  A. 增加了自定制事件(custom)机制. 事件的传播机制与事件内容本身原则上是无关的, 因此自定制事件完全可以和浏览器内置事件通过同一条处理路径, 采用同样的监听方式. 使用自定制事件可以增强代码的内聚性, 减少代码耦合. 例如如果没有自定制事件, 关联代码往往需要直接操作相关的对象
Java代码 
$('.switch, .clapper').click(function() { 
    var $light = $(this).parent().find('.lightbulb'); 
    if ($light.hasClass('on')) { 
        $light.removeClass('on').addClass('off'); 
    } else { 
        $light.removeClass('off').addClass('on'); 
    } 
  }); 

而如果使用自定制事件,则表达的语义更加内敛明确,
Java代码 
$('.switch, .clapper').click(function() { 
  $(this).parent().find('.lightbulb').trigger('changeState'); 
}); 

  B. 增加了对动态创建节点的事件监听. bind函数只能将监听函数注册到已经存在的DOM节点上. 例如
Java代码 
$('li.trigger').bind('click',function(){}} 

  如果调用bind之后,新建了另一个li节点,则该节点的click事件不会被监听.
  jQuery的delegate机制可以将监听函数注册到父节点上, 子节点上触发的事件会根据selector被自动派发到相应的handlerFn上. 这样一来现在注册就可以监听未来创建的节点.
Java代码 
$('#myList').delegate('li.trigger', 'click', handlerFn); 

  最近jQuery1.7中统一了bind, live和delegate机制, 天下一统, 只有on/off.
Java代码 
$('li.trigger’).on('click', handlerFn);  // 相当于bind 
$('#myList’).on('click', 'li.trigger', handlerFn);  // 相当于delegate 
分享到:
评论

相关推荐

    jquery事件绑定例子

    这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...

    第17周-第16章节-Python3.5-JQuery 事件绑定的方式.avi

    第17周-第16章节-Python3.5-JQuery 事件绑定的方式.avi

    jQuery事件绑定和委托实例

    jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。它们允许开发者响应用户的动作,如点击、鼠标悬浮、键盘输入等。本文将详细解释这些概念,并通过实例展示其用法。 1. `on()` 方法 `on()` ...

    jQuery事件绑定方法学习总结(推荐)

    首先,`bind()`是jQuery早期版本中用于绑定事件处理函数的方法。在上面的例子中,它被用来在按钮元素上绑定点击事件。例如: ```javascript $("#btn").bind("click", function() { $("div").append("这是一个新的p...

    对jQuery的事件绑定的一些思考(补充)

    然而,正如标题和描述所指出的,jQuery的事件绑定有时也会带来一些问题,比如内存消耗过大、动态生成元素需要重新绑定事件以及语法冗余。本文将深入探讨这些问题,并提供相应的解决方案。 首先,让我们看看jQuery中...

    深入理解jQuery事件绑定

    在深入理解jQuery事件绑定的文章中,作者向读者介绍了如何使用jQuery的不同方法来绑定事件,并对它们的适用情况和差异进行了阐述。以下是从文章内容中提取的知识点: 1. jQuery的事件绑定方法主要包括bind()、live...

    jQuery事件绑定用法详解

    jQuery提供了多种方法来绑定事件,包括但不限于: - `bind()` - `live()` - `delegate()` - `on()` 在早期版本的jQuery中,`bind()`是最常用的事件绑定方法,但后来随着jQuery的发展,出现了一些更强大的方法,如`...

    jQuery事件绑定on()与弹窗实现代码

    总的来说,`jQuery.on()`方法是处理动态元素事件的关键,它允许开发者在不关心元素何时或如何被创建的情况下,依然能够有效地绑定事件监听器。在弹窗交互设计中,这种技术尤其有用,因为它确保了即使弹窗内容是动态...

    jQuery事件绑定on()、bind()与delegate() 方法详解

    二是无法为将来可能添加的元素绑定事件。 为了解决这些问题,jQuery引入了`delegate()`方法,利用事件冒泡机制。`delegate()`需要指定一个容器元素(通常是父元素),然后监听在这个容器上发生的特定事件,当事件从...

    jQuery事件绑定用法详解(附bind和live的区别)

    主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下

    jQuery事件绑定与解除绑定实现方法

    在JavaScript的世界里,jQuery库为开发者提供了方便快捷的方式来处理DOM元素的事件,其中包括事件的绑定与解除绑定。本文将深入探讨jQuery中的`bind`和`unbind`方法,以及如何通过它们来实现事件处理。 首先,事件...

    jquer事件绑定

    本文将详细介绍如何使用jQuery进行事件绑定,特别是通过`bind()`方法来实现自定义命名空间事件绑定的具体应用场景及其实现方式。 #### 一、jQuery事件绑定概述 jQuery提供了多种方式来处理DOM元素上的事件绑定,...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

    JQuery调用绑定click事件的3种写法

    `.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....

    JQuery事件Demo

    1. **`$(selector).on(events, handler)`**: 这是jQuery中用于绑定事件的主要方法。`selector`是你想要监听事件的元素选择器,`events`是想要绑定的一组事件(如`'click mouseover'`),`handler`是当事件触发时执行...

    jquery事件绑定解绑机制源码解析

    首先,JQuery的事件绑定使用`on`方法,它接收事件类型、选择器、数据和回调函数作为参数。在内部,`on`方法会创建一个事件数据对象,包含事件类型、原始事件类型、数据、处理函数、全局唯一标识符(guid)以及选择器...

Global site tag (gtag.js) - Google Analytics