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. mysql学习之基础篇03

    我们今天来进行建表的基本操作: 首先要建表就要了解列类型,因为建表就是声明列的过程,列声明完成了,表也就建好了. mysql中列分为三大类: 一.数值型 数值型又分为整型和浮点型两种. 先来看整型: ...

  2. Linux磁盘管理——BIOS和UEFI

    参考:BIOS and UEFI - CompTIA A+ 220-901 - 1.1 BIOS and UEFI As Fast As Possible 严格上来说BIOS和UEFI除了在搜索boo ...

  3. 如何使用MCUXpresso IDE创建一个Cortex-M工程

    拿到Cortex-M开发板之后,就可以开始使用MCUXpresso IDE上手入门.在这个教程中,我们将详细介绍如何基于CMSIS(Cortex微控制器软件接口标准)在MCUXpresso IDE中为 ...

  4. python基础之面试常问

    目录 python相对其他语言有什么特点? python内存管理机制,gc机制的了解,gc回收三种算法. lambda函数 高级函数 map.reduce.filter.sorted等. 简述六种基本 ...

  5. mingw控制台中文乱码

    乱码原因 直接先用一段话讲乱码原因,看不懂老老实实就往下看吧 其实我用Sublime或者VSCode等编辑器写代码出现的控制台中文乱码问题是编译器mingw输出的数据使用的是UTF-8编码,而控制台用 ...

  6. Redis 缓存雪崩、穿透、击穿

    缓存雪崩 定义: 同一时间所有 key 大面积失效,比如网站首页的数据基本上都是同一批次去缓存的. 解决方法: ① 存的时候设定随机的失效时间. ② 服务做熔断处理(异常或着慢查询 Hystrix 限 ...

  7. bzoj 4128: Matrix ——BSGS&&矩阵快速幂&&哈希

    题目 给定矩阵A, B和模数p,求最小的正整数x满足 A^x = B(mod p). 分析 与整数的离散对数类似,只不过普通乘法换乘了矩阵乘法. 由于矩阵的求逆麻烦,使用 $A^{km-t} = B( ...

  8. js模拟滚动条滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Kafka消息丢失

    1.Kafka消息丢失的情况: (1)auto.commit.enable=true,消费端自动提交offersets设置为true,当消费者拉到消息之后,还没有处理完 commit interval ...

  10. Node.js安装,多版本管理以及修改npm下载的镜像源

    注意:在操作之前建议先把整个文章看完,在决定要不要配置!!!!! 1.下载    地址:http://nodejs.cn/download/        根据系统对应版本下载文件 2.安装    下 ...