click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法
1.click()单击事件方法:
$("a").click(function() {
alert("hello");
});
2.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。
var message = "left";
$("a").bind("click", function() {
alert(message);
return false;
});
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
}); var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。
.bind(eventType[, evnetData], Handler(eventObject))
其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事
件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函
数,eventObject表示事件对象。
.bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventType事件上,如果需要,还可以向事件处理程序传递数据。
3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
如果元素是在调用bind()之后添加的,则不能够执行相应的事件。而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:
$("div.live").live("click", function() {
alert("success");
});
这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。
live()方法的一个不足在于它不支持链式写法:
$("#test").children("a").live("mouseover", function() {
alert("hello");
});
上边这种写法并不会输出
使用delegate()可以写为:
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});
$('body').delegate('a:not([target="_blank"])', 'click', function (e) {
if ($(this).attr('href') == location.hash) {
$(window).trigger('hashchange');
}
});
停止事件传播
$('a').bind('click',function(e){
e.preventDefault()
e.stopPropagation()}
)
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble = true;
e是事件触发后传进来的一堆参数,表示事件对象
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中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- jQuery 中bind(),live(),delegate(),on() 区别(转)
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- 转 jQuery 中bind(),live(),delegate(),on() 区别
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别
复制代码 代码如下: <input id="productName" name="productName" value="" /> ...
- jquery bind、delegate、live、on的区别及联系
jquery bind.delegate.live.on的区别及联系 概述 jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几 ...
- bind() live()和delegate 区别
Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置s ...
- jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate
.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...
随机推荐
- git不能上传空目录和设备文件
git不能上传空目录和设备文件:目录和设备文件不能完成校验. 使用命令校验: sha1sum console
- wireshark教程(一)
按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接 ...
- Java类对象数组声明和初始化
Java是纯面向对象语言.类是其重要构成单位. 然后,在实际编程中,我们会自己定义一些类,如Point <span style="font-size:14px;">pu ...
- windows宿主机ping不通Docker容器的解决办法
网卡上有 docker is not a virtual machine, and you don't get access to the docker host via IP add ...
- 【转】优秀PMP项目经理必备的8个要素
结合本人这几年在项目管理上的总结和得失,本人认为优秀的项目经理要有 责任心.要 善于沟通.能 引导客户.能 预测风险. 善于总结. 随需应变.善于 激励团队.同时也要 懂技术. 责任心 作为项目经理首 ...
- Maven中央仓库——你可能不知道的细节
地址 —— 目前来说,http://repo1.maven.org/maven2/是真正的Maven中央仓库的地址,该地址内置在Maven的源码中,其它地址包括著名的ibiblio.org,都是镜像. ...
- ZooKeeper的架构
ZooKeeper的架构 看看下面的图表.它描述了ZooKeeper的“客户端-服务器架构”. 作为ZooKeeper架构的一部分的每个组件在下表中进行了说明. 部分 描述 Client(客户端) 客 ...
- nodejs基础 -- NPM 使用介绍
npm:是nodejs的包管理工具,随NodeJS一起安装的,能解决NodeJS代码部署上的很多问题,如: 1.允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2.允许用户从NPM服务器下载 ...
- linux -- ubuntu 脚本开机自启动
有一个脚本想在ubuntu 虚拟机开机时,自动运行. 创建脚本文件 在“/opt/lampp/”下新建一个脚本文件:lampp_start.sh #!/bin/bash /opt/lampp/lamp ...
- hunnu--11547--你的组合数学学得怎样?
你的组合数学学得怎样? Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit users: ...