jquery的事件绑定
暂时有 bind(),live(),delegate(),on() 这四个事件监听函数
对应的4个事件解除函数分别是: unbind(),die(),undelegate(),off()
bind:向匹配元素添加一个或者多个事件处理器
$(selector).bind(event,data,function):向匹配元素添加一个或者多个事件
event:必选:
data:可选
function:必选
$(function () {
//单个事件
$("#mybutton").bind("click", null, function () { });
//空格形式设置多个事件
$("#mybutton").bind("mouseout click", null, function () { alert(); });
//大括号方式
$("#mybutton").bind({
click: function () { alert() },
mouseout: function () { alert() }
}); //删除事件
$("#mybutton").unbind("click"); });
live:向当前或者未来匹配元素添加一个或者多个事件处理器
参数和各种方式和bind一样
//单事件方式
$("#mybutton").live("click", null, function () {
alert();
});
//多事件的空格格式
$("#mybutton").live("click mouseout", null, function () {
alert();//缺点是多个事件都绑定相同的事件操作
});
//多事件的大括号形式(优点是:可以给每个不同的事件赋予不同的事件操作)
$("#mybutton").live({
click: function () { alert("click"); },
mouseout: function () { alert("mouseout");}
}); $("#mybutton").die("click mouseout");
on:为当前或者未来的元素添加一个或者多个事件,并规定当这些事件发生时运行的函数
$(selector).on(event,childselector,data,function)
比上面两个多了一个 childselector参数:
作用是:需要添加事件处理程序的元素,一般为selector的子元素
$("#mybutton").on("click",null, null, function () {
alert("on 单击");
});
$("#mybutton").on("click mouseout", null, null, function () {
alert("on 多事件空格");
});
$("#mybutton").on({
click: function () { alert("on 大括号形式:click"); },
mouseout: function () { alert("on 大括号形式:mouseout")}
}); $("#mybutton").off("click");
delegate:
为指定的元素(被选元素的子元素)添加一个或者多个事件处理程序,并规定当这些事件发生时运行的函数
参数和on一样有四个参数
/***********单元素添加单事件***********/ //按钮绑定单击事件 实现button2的显示隐藏
$(".header").delegate("#btn-test1", "click", function () {
$(".container").slideToggle();
}); /***********单元素添加多事件***********/ //空格相隔方式
$(".header").delegate("#btn-test1", "click mouseout", function () {
$(".container").slideToggle();
}); //大括号替代方式
$(".header").delegate("#btn-test1", {
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
jquery的事件绑定的更多相关文章
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery 动态事件绑定(0512)
jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- jQuery的事件绑定命名空间
jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
- day 55 jQuery 之事件 绑定等
属性选择器: [attribute] [attribute=value]// 属性等于 列入 $("input[value='male']").prop('chekced') 注意 ...
随机推荐
- SSL双向认证(高清版)
介绍了SSL双向认证的一些基本问题,以及使用Nginx+PHP基于它搭建https的Webservice. 之前的方式只是实现1:1的模式,昨天同事继续实现了n:1的模式,这里我再整理记录下. 由于n ...
- Eclipse反编译插件: Jodeclipse与JadClipse
Eclipse反编译插件: Jodeclipse与JadClipse Jodeclipse 是Jode的Eclipse插件,JadClipse是Jad的Eclipse插件,它们都是非常好的反编译插件. ...
- HUFFMAN 树
在一般的数据结构的书中,树的那章后面,著者一般都会介绍一下哈夫曼(HUFFMAN) 树和哈夫曼编码.哈夫曼编码是哈夫曼树的一个应用.哈夫曼编码应用广泛,如 JPEG中就应用了哈夫曼编码. 首先介绍什么 ...
- Codeforces294B - Shaass and Bookshelf(贪心)
题目大意 给你N本书,每本书由一个厚度t[i](1或者2),宽度w[i],高度都是一样,把一些书竖着放,然后一些书横着放在同一层,就像下图那样放: 问你把所有的书放好之后竖着的书的总厚度是多少? 题解 ...
- iOS绘图教程 (转,拷贝以记录)
本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,在翻译过程中我加入了一些书中没有涉及到的内容.希望本文能够对你有所帮助. 转自:http://www ...
- HDU5407.CRB and Candies(数论)
官方题解: The problem is just to calculate g(N) = LCM(C(N,0),C(N,1),...,C(N,N)) Introducing function f(n ...
- 在Windows Server 2012服务器上安装可靠多播协议
为什么要安装可靠多播协议? 答:随着因特网的发展,出现了视频点播.电视会议.远程学习.计算机协同工作等新业务.传统的点到点通信方式,不仅浪费大量的网络带宽,而且效率很低.一种有效利用现有带宽的技术 ...
- 使用AFNetworking 报错提示
使用AFNetworking 框架 解析数据 报错提示数据请求失败Error Domain=NSCocoaErrorDomain Code=3840 "The operation could ...
- mac下firefox复制粘贴失效解决办法
现象:复制粘贴只能在firefox上操作,也就是其他应用内的内容无法复制到firefox,firefox的内容也无法复制其他应用,但是firefox自己的内容可以复制本身(比如各个tab页之间复制) ...
- error C2589: “(”: “::”右边的非法标记 error C2059: 语法错误 : “::
1. 错误输出 ./zlibrary/ui/src/win32/w32widgets/W32VBorderBox.cpp(114) : error C2589: “(”: “::”右边的非法标记 ...