1. 1.绑定所有的<p>元素
    // 为所有P元素分别绑定click事件处理函数handler
    $("p").on("click", handler);
  1. 2.div中所有的P元素绑定click事件
    // 为div中的所有p元素绑定click事件处理程序,对后面append添加的p也有用
    $("div").on("click", "p", function(){
        // 这里的this指向触发点击事件的p元素(Element)
        alert( $(this).text() );
    });
  1. // 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler
    $(document.body).on("click", "p", handler);
    注意:"focus""blur"等部分事件不支持冒泡,使用事件委托机制将无效。不过,他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin",与"blur"对应的"focusout"。此外,我们也可以使用event.stopPropagation()方法,让当前触发的事件停止冒泡。
  1. 3.为元素绑定多个事件并为其传入附件数据
    <p id="n5">Google</p>
  1. var data = { id: 5, name: "张三" };
  2.  
  3. var events = {
        "mouseenter": function(event){
            $(this).html( "你好," + event.data.name + "!");      
        },
       
        "mouseleave": function(event){
            $(this).html( "再见!");
        }      
    };
  4.  
  5. //为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data
    $("body").on(events, "#n5", data);
  1.  
  1.  

jQuery.on() 函数的更多相关文章

  1. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  2. jquery each函数 break和continue功能

    jquery each函数 break和continue功能幸运的是另一个突破,持续一个jQuery循环方式.你可以打破在函数返回一个jQuery参数虚假循环.一个可以继续执行只是在做不指定返回值或返 ...

  3. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  4. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  5. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  6. jQuery.noConflict() 函数

    jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权. 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQue ...

  7. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  8. Jquery核心函数

    在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对 ...

  9. jQuery.makeArray() 函数详解

    jQuery.makeArray()函数用于将一个类数组对象转换为真正的数组对象. 所谓"类数组对象"就是一个常规的Object对象,但它和数组对象非常相似:具备length属性, ...

  10. jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突

    1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似t ...

随机推荐

  1. EJB、RMI、XMLRPC、Hessian、Thrift 、Protobuf

    Java中实现分布式的方式有:EJB.RMI.XMLRPC.Web Service.Hessian.Thrift .Protobuf.NIO(Netty.Mina) EJB 优势:可扩展性好,安全性强 ...

  2. Java核心编程快速学习(转载)

    http://www.cnblogs.com/wanliwang01/p/java_core.html Java核心编程部分的基础学习内容就不一一介绍了,本文的重点是JAVA中相对复杂的一些概念,主体 ...

  3. C#存储过程调用的三个方法

    //带参数的SQL语句 private void sql_param() { SqlConnection conn = new SqlConnection("server=WIN-OUD59 ...

  4. C# 图像自动切换

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  5. A Tool to Clip Images

    using Microsoft.Win32; using System; using System.IO; using System.Text.RegularExpressions; using Sy ...

  6. Code Chef DARTSEGM(计算几何+凸包)

    题面 传送门 题解 好眼熟丫-- 一月月赛最后一题--,代码都不用改-- //minamoto #include<bits/stdc++.h> #define R register #de ...

  7. js代码上的优化

    例1  if ( config.url === '/web/teacher/classes'  || config.url === '/web/teacher/students || config.u ...

  8. Mac OSX sublime text2 各种快捷键

    Mac 快捷键 https://support.apple.com/zh-cn/HT201236 Preferences -> Key Bindings - User [ { "key ...

  9. Smarty的原理_面试

    Smarty是一个模板引擎,使用smarty主要是为了实现逻辑和外在内容的分离,如果不使用模板的话,通常的做法就是php代码和html代码混编.使用了模板后,则可以将业务逻辑放到php文件中,而负责显 ...

  10. ReentrantLock总体概括

    一.锁的实现原理: JAVA concurrent包下面的锁是通过AbstractQueuedSynchronizer内的Node类下面的state属性来实现的,并且锁的可重入属性也是通过state实 ...