click()、bind()、live()和delegate()方法
我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.
总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">点击</a>
<div class="box" style="cursor:pointer;">live</div>
<div id="test"><a href="#">live支持链式编程吗?</a></div>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
$(function(){
$("<div class='box2' style='cursor:pointer;'>live</div>").appendTo("body");
});
$("a").click(function(){
console.log("click");
});
/***
*click()方法是bind()方法的一种简单方法.
* 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的.
*/
var message = "left";
$("a").bind("click",{ msg: message }, function(e) {
console.log(e.data.msg);
return false;
});
var message = "right";
$("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键
console.log(e.data.msg);
return false;
});
/***
* 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right".
*/ /***
* live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效.
*/
$("div.box").bind("click", function() {
console.log("success bind");
}); /***
* 当点击class="box"为live时, 打印出success.
* 此时,如果有新元素添加进来,该如何操作?
* 这时, 当使用上边方法点击class为live的a标签时, 不会执行.
* 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件.
*/
$("div.box2").live("click", function() {
console.log("success live");
});
/***
* live()方法不支持链式编程
*/
$("#test").children("a").live("mouseover", function() {
console.log("支持链式编程");//报错,不支持链式编程 Error: Syntax error, unrecognized expression: #test.children(a)
}); /***
* 上面这种写法并不会输出, 我们这个时候可以使用delegate()
*/
$("#test").delegate("a", "mouseover", function() {
console.log("delegate");
});
/***
* 这样就可以输出想要的结果.
*/
</script>
</body>
</html>
click()、bind()、live()和delegate()方法的更多相关文章
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- jQuery方法区别(四)click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate
.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...
- Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...
- bind() live()和delegate 区别
Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置s ...
- jQuery 请指出'.bind()','.live()'和'.delegate()'的区别
http://kb.cnblogs.com/page/94469/网上好多类似的 简言之bind可以绑定页面上已有的,live和delegate可以绑定到还未存在于页面中的元素之上.delegate又 ...
- Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...
- Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）
jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...
- jQuery中的bind(), live(), on(), delegate()
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
随机推荐
- c#字符串加载wpf控件模板代码 - 简书
原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...
- GDAL中通过GDALDriver类的Create函数实现图像的保存
GDAL中除了读取各种类型的图像外,也可以实现对各种图像的保存操作,具体实现测试代码如下: int test_gadl_GDALDataset_write() { const char* image_ ...
- SaltStack入门篇（七）之架构部署实战
模块:https://docs.saltstack.com/en/2016.11/ref/states/all/index.html 实战架构图: 实验环境设置: 主机名 IP地址 角色 linux- ...
- Python小白学习之如何添加类属性和类方法，修改类私有属性
如何添加类属性和类方法,修改类私有属性 2018-10-26 11:42:24 类属性.定义类方法.类实例化.属性初始化.self参数.类的私有变量的个人学习笔记 直接上实例: class play ...
- Qt 利用XML文档，写一个程序集合 一
接到领导需求安排,说公司未来的硬件设备会越来越多,与每个设备对应的设备检测和设置程序也会增多.导致软甲太多,不好掌控.所以希望做一个完整的软件,但是呢,每个子程序还得独立,应为每个用户购买的设备不是一 ...
- centos下JDK安装及环境变量配置
由于centos安装自带openjdk,需要将其卸载后安装自己的jdk 卸载centos自带jdk 1.查找java :rpm -qa | grep java 2.卸载时提示权限不够,进入root目录 ...
- 《物质世界 (Outward)》证明不必压缩制作大型角色扮演游戏的时间
<物质世界>是一款雄心勃勃的开放世界角色扮演游戏 (RPG),设计这款游戏的公司规模只有您预期的三分之一.游戏中的一切都是动态的,拥有许多炫酷的系统设计,大家可以分屏合作掌控整个场景.参与 ...
- python数据可视化——matplotlib 用户手册入门：使用指南
参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/usage.html#sphx-glr-tutorials-introd ...
- 技本功丨利用 Atomic 构建 React 项目工作流，so easy!
近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...
- 虹软2.0版本离线人脸识别C#类库分享
目前只封装了人脸检测部分的类库,供大家交流学习,肯定有问题,希望大家在阅读使用的时候及时反馈,谢谢!使用虹软技术开发完成 戳这里下载SDKgithub:https://github.com/dayAn ...