暂时有 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的事件绑定的更多相关文章

  1. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  2. jquery 动态事件绑定(0512)

    jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...

  3. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. 对jQuery的事件绑定的一些思考

    jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...

  5. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  6. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  7. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  8. jQuery的事件绑定命名空间

    jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...

  9. 前端 -----jQuery的事件绑定和解绑

    11-jQuery的事件绑定和解绑   1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...

  10. day 55 jQuery 之事件 绑定等

    属性选择器: [attribute] [attribute=value]// 属性等于 列入 $("input[value='male']").prop('chekced') 注意 ...

随机推荐

  1. (转载)完美解决PHP中文乱码问题

    (转载)http://www.souzz.net/html/edu/php/php1/74181.html 一.首先是PHP网页的编码 1.php文件本身的编码与网页的编码应匹配 a.如果欲使用gb2 ...

  2. remove all event handlers from a control

    The sample code below will remove all Click events from button1 public partial class Form1 : Form { ...

  3. HDU5654xiaoxin and his watermelon candy 离线+树状数组

    题意:bc 77div1 d题(中文题面),其实就是询问一个区间有多少不同的三元组,当然这个三元组要符合条件 分析(先奉上官方题解) 首先将数列中所有满足条件的三元组处理出来,数量不会超过 nn个. ...

  4. HTML5/CSS3动画应用

    http://www.html5tricks.com/cool-html5-css3-animation.html

  5. (4)I2C总线的7bit从机地址

    时钟拉伸(Clock stretching)clock stretching通过将SCL线拉低来暂停一个传输.直到释放SCL线为高电平,传输才继续进行.clock stretching是可选的,实际上 ...

  6. POJ 1661 Help Jimmy DP

    思路:Jimmy 跳到一块板上后,可以有两种选择,向左走或向右走.走到左端和走到右端所需的时间,容易算出. n如果我们能知道,以左端为起点到达地面的最短时间,和以右端为起点到达地面的最短时间,那么向左 ...

  7. HW4.12

    public class Solution { public static void main(String[] args) { int n = 0; while(n * n < 12000) ...

  8. 10670 Work Reduction (贪心 + 被题意坑了- -)y

    Problem C: Work Reduction Paperwork is beginning to pile up on your desk, and tensions at the workpl ...

  9. 【转】解决Cannot change version of project facet Dynamic web module to 2.5

    http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...

  10. 正则表达式_matches(Regex)

    [0-9a-zA-Z.%+-] 匹配中括号中的 0-9 或者 a-z 或者 A-Z 或者 . 或者 % 或者 + 或者 - $p = "111,222,333"$p -match ...