JQuery事件绑定bind、live、on、trigger
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的更多相关文章
- JQuery事件绑定,bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- jQuery事件:bind、delegate、on的区别
最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
- 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对象) ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
随机推荐
- Linux之项目的部署
前期准备 python3解释器 uwsgi wsgi(web服务网关接口,就是一个实现了python web应用的协议) virtualenvwrapper 路飞的代码 vue的代码 nginx (一 ...
- Hadoop 二次排序
需求 求每年的最高气温,年份升序,温度求最高 数据源内容如下 temperature.txt 2004 49 1981 -22 1981 -31 1965 -47 2027 -2 1964 6 203 ...
- USB之基本协议和数据波形1
============= 本系列参考 ============= <圈圈教你玩USB>.<Linux那些事儿之我是USB> 协议文档:https://www.usb.or ...
- Python_Class
1.创建类的关键字:class 2.构造函数__init__(),自动初始化属性值 class Cup: #构造函数,初始化属性值 def __init__(self,capacity,color): ...
- 使用Cloudera Manager搭建Kudu环境
使用Cloudera Manager搭建Kudu环境 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1>.点击添加服务进入CM服务安装向导 2>.选择需要安装的kudu ...
- websocket实现心跳连接
在使用websocket的时候,遇到了一个websocket在连接一段时间就异常断开连接了.第一想法就是重新去连接websocket(websock.onopen),后来发现这种方式是错误的,查阅文档 ...
- mysqldump简单备份
mysqldump简单命令 mysqldump DB_NAME [tb1] [tb2] > /path/back.sql --master-data={0|1|2} 0: 不记录二进制日志 ...
- Windows连接Linux服务器远程开发解决方案
解决方案 vscode+Linux服务器 解决连接问题 vscode商店下载remote-ssh工具,然后进行配置. 这个网上依旧有很多详细的教程了,这里就不过多赘述. 配置免密登录 这一部分是我要重 ...
- Ecshop漏洞通杀0day【最新入侵手法】
昨晚上翻阅一本技术书籍中,找到灵感,发现的ECshop漏洞. 搜索关键字:关键字:powered by ecshop 方法一: 普通代码: user.php?act=order_query&o ...
- destoon7.0后台栏目分类一键获取所有栏目拼音目录
近期研究DT,从DT4.0一直研究到DT7.0,总算也有些心得.最近重新开发设计了一个信息资讯站点:http://www.xuetong365.com/ 废话不多说,上教程 用于DESTOON7.0系 ...