one

作用:只触发一次,并在触发后失效,触发时会产生时间冒泡。

语法:$(selector).one(event,data,function)

例子:

 $(item).one("click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
});

bind

作用:添加时间监听,不监听后续动态添加的dom。

语法:$(selector).bind(event,data,function,map)

例子:

 $(item).bind("click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
},{
"mouseenter": function(){},
"mouseleave": function(){}
});

unbind

作用:移除被选元素的事件处理程序,如果没有指定处理程序,会删除指定元素的所有事件处理程序。

语法:$(selector).unbind(event,function)

例子:

 $(item).unbind("click", showMe)

live

作用:添加时间监听,会监听后续动态添加的dom。

语法:$(selector).live(event,data,function)

例子:

 $(item).live("click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
});

delegate

作用:指定某区域下的元素绑定事件,会监听后续动态添加的dom。

语法:$(selector).delegate(childSelector,event,data,function)

例子:

 $(fatherItem).delegate(item, "click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
});

on

作用:自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的推荐替代品,支持动态绑定。

语法:$(selector).on(event,childSelector,data,function)

例子:

 $(item).on("click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
});
$(fatherItem).on(item, "click", { param1: 1, param2: 2 }, function (event) {
//阻止默认事件
event.preventDefault();
//阻止事件冒泡
event.stopPropagation();
console.log(event.data.param1 + event.data.param2);
});

off

作用:自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的推荐替代品

语法:$(selector).off(event,selector,function(eventObj),map)

例子:

 $(item).off("click", showMe);
$(fatherItem).off(item, "click", showMe, {
"mouseenter": showMe,
"mouseleave": showMe
});

trigger

作用:触发被选元素的指定事件类型,支持事件冒泡。

语法:$(selector).trigger(event,[param1,param2,...])

例子:

 $(item).trigger("click", param1, param2);

triggerHandler

作用:触发指定事件,屏蔽元素默认事件、阻止时间冒泡、返回事件返回值而不是jq对象、只触发匹配的第一个元素。

语法:$(selector).triggerHandler(event,[param1,param2,...])

例子:

 $(item).triggerHandler("click", param1, param2);

JQuery事件绑定bind、live、on、trigger的更多相关文章

  1. JQuery事件绑定,bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  2. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  3. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  4. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  5. jQuery事件:bind、delegate、on的区别

    最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...

  6. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

  7. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  8. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

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

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

随机推荐

  1. sqlalchemy之基础操作

    原文链接:https://www.cnblogs.com/DragonFire/p/10166527.html

  2. Nginx配置文件示例

    Nginx的配置文件示例:(仅供参考) 强烈建议先将默认的配置文件备份再进行操作! 请根据自己项目的实际路径来配置相关路径! uwsgi配置文件请参考:uwsgi配置文件示例 # For more i ...

  3. 给定数字N,输出小于10^N的所有整数

    讲起来比较简单,从0到N遍历输出就行了,但是如果N非常大,就涉及整数溢出问题,很明显是一个全排列问题,也就是输出N,代表N位上所有的数字取值是0-9,做一个全排列,还需要考虑的就是对于0001,006 ...

  4. 让 Python 代码更易维护的七种武器——代码风格(pylint、Flake8、Isort、Autopep8、Yapf、Black)测试覆盖率(Coverage)CI(JK)

    让 Python 代码更易维护的七种武器 2018/09/29 · 基础知识 · 武器 原文出处: Jeff Triplett   译文出处:linux中国-Hank Chow    检查你的代码的质 ...

  5. 安装k8s,单master脚本

    这个以一个普通xxx帐户运行即可. 因为上面root帐号作了sudoer的操作的. 还有,最好将xxx帐号加入docker组,这样xxx也可以执行docker命令了. 可以看到,这个脚本还需要其它目录 ...

  6. idea的基础设置

    1.    在idea.exe.vmoptions文件里,如图进行修改即可,, 优化的原理就是调用更多的运行内存来加载他,所以4G的话本身会不够,就会造成其他应用很卡. 2. 下面是进行一些基本的配置 ...

  7. 零基础python教程—python数组

    在学习Python过程中数组是个逃不过去的一个关,既然逃不过去咱就勇敢面对它,学习一下python中数组如何使用. 1.数组定义和赋值 python定义一个数组很简单,直接 arr = [];就可以了 ...

  8. Machine learning system design---Error analysis

    Error analysis--让我们系统的去判断我们接下来要做什么,而不是随机的,凭直觉地选择一个去做 我们在设计机器学习应用时,刚开始使用简单(简单的features)的算法来很快的完成它,它可能 ...

  9. 【二分答案】Expanding Rods POJ 1905

    题目链接:http://poj.org/problem?id=1905 题目大意:原长度为L的线段因受热膨胀为一段弧,线段L.弧长L'.温度n.膨胀率c满足L' =(1+n/c)*L;求线段的中点移动 ...

  10. Spring Jpa

    一对多 1.application.properties 2.Dao层 3.Controller 3.1级联添加数据 3.2查询数据 3.3删除数据 多对多 1.查询 2.添加