zoukankan      html  css  js  c++  java
  • jQuery事件绑定

    一、静态绑定事件

    如:在执行完bind()方法给所有button添加点击事件的操作后,又往页面动态添加了button元素,那么后来添加的button并没有前面添加的点击事件。

    1.bind()方法 —— 静态绑定事件

    jQuery 3.0中已弃用此方法,使用 on()方法代替。

    $(selector).bind(events,[data],fn)

    events: 含有一个或多个事件类型的字符串,由“空格”分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

    data:作为event.data属性值传递给事件对象的额外数据对象(可省略)。

    fn:绑定到每个匹配元素的事件上面的处理函数。

    代码示例:

    绑定多个事件但是操作一样,事件中间使用“空格”分隔,参数通过事件获得。

    $("form").bind("submit click", "参数", function(event){
    alert(event.data); // 获得参数 // 其他操作 });

    绑定多个事件且操作不同,使用json。

    $("form").bind({
        click:function(){},
        mouseover:function(){}
    });

    2.unbind()方法 —— 解除事件绑定

    $(selector).unbind():解除所有事件

    $(selector).unbind(type):解除特定事件

    $(selector).unbind(type,handler):解除特定事件特定方法

    type:时间类型字符串

    handler:想要接触的方法

    代码示例:

    // 绑定事件
    var
    fn1 = function(){} var fn2 = function(){} var fn3 = function(){} $("form").bind({ click:fn1, click:fn2, click:fn3 });
    // 解除绑定
    $("form").unbind("click",fn2);

    结果:方法fn2被解除绑定,其他两个方法还在。

    二、动态绑定事件

    1.on()方法 —— 动态绑定事件

    如:在执行完on()方法给所有button添加点击事件的操作后,又往页面动态添加了button元素,那么后来添加的button也有前面添加的点击事件,注意第一个selector不能是动态添加的。

    $(selector).on(events,selector,data,fn);

    events: 含有一个或多个事件类型的字符串,由“空格”分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

    selector:一个选择器字符串,用于过滤触发事件的所选元素的后代。

    data:作为event.data属性值传递给事件对象的额外数据对象(可省略)。

    fn:绑定到每个匹配元素的事件上面的处理函数。

    $(document).on("click",":button",function(){});

    2.off()方法 —— 动态解绑事件

    $(selector).off():解绑所有事件

    $(selector).off(events):解绑特定事件(选择器由绑定时是否有决定)

    $(selector).off(events,selector):解绑特定事件(选择器由绑定时是否有决定)

    $(selector).off(events,selector,handler):解绑特定事件的特定方法

  • 相关阅读:
    Django中关于MySQL的bug总结
    css的外边距合并或者外边距塌陷问题
    双十二开篇之作
    浅谈css的行内类型标签和块级标签
    css的padding和border问题
    Django中的bug总结
    css清除浮动的方法
    Ubuntu图标变成问号
    pku1149 PIGS
    sizeof()功能
  • 原文地址:https://www.cnblogs.com/YeHuan/p/10974664.html
Copyright © 2011-2022 走看看