jQuery高级事件---on、off、one和事件委托

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335871 on、off、onejQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335871

on、off、one

jQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委托等方法

on替代bind方法

on可以替代bind方法,使用方法和bind一致

// 绑定单个事件
    $(":button").on("click",function(){
        alert("on");
    });

// 传递数据
    $(":button").on("click",{name:"tom"},function(e){
        alert(e.data.name);
    });

// 绑定多个事件
    $(":button").on("mouseover mouseout",function(e){
        alert("移入移出");
    });

// 使用对象绑定多个事件
    $(":button").on({
        mouseover:function(){
            alert("移入");
        },
        mouseout:function(){
            alert("移出");
        }
    });

// 阻止冒泡和默认行为
    $(":submit").on("click",function(e){
        e.preventDefault();
        e.stopPropagation();
        alert("取消默认行为和冒泡");
    });

off替代unbind方法

off可以替代unbind方法,使用方法不变

    function test(){
        alert("test");
    }

    $(":button").on("click.on",test);  //根据函数解除绑定
    $(":button").off("click");     // 根据事件解除绑定
    $(":button").off("click.on");  // 根据命名空间解除绑定

事件委托

实际上是给祖先绑定一个事件。子元素通过冒泡将事传递到祖先元素,祖先元素再判断点击的是不是button,如果是,就执行相同的事件。因此,当有很多个相同的按钮需要绑定相同的事件时,可以用事件委托将事件委托给祖先节点,有祖先节点判断子节点是否执行某事件。如果不适用事假委托,那个每一个节点都需要绑定一个事件。
使用方法是:
祖先节点.on(“事件”,”子元素”,”绑定的函数”);

on的第二个参数需要写成所有相同元素通用的写法,不能写成:button:eq(0)这样的选择不具有通用性,祖先节点在判断的时候会无法达到预期的效果。

    $("div:eq(0)").on("click",":button",function(){
        $(this).clone(true).appendTo("div:eq(0)");
    });

// 换成document也可:
    $(document).on("click",":button",function(){
        $(this).clone(true).appendTo("div:eq(0)");
    });

取消委托

off函数还可以取消委托,取消委托必须由祖先节点调用调用方法是:
祖先节点.off(“事件”,”子元素”);

$("div:eq(0)").off('click', '.button');

one()

绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件。

    $(":button").one("click",function(){
        alert("one");
    });

用到的方法

clone()

生成被选元素的副本,包含子节点、文本和属性。
$(selector).clone(includeEvents)
- includeEvents 规定是否复制元素的所有事件处理。true/false,默认是false

appendTo()

在被选元素的结尾(仍然在内部)插入指定内容。

  $("button").click(function(){
    $("<b>sss</b>").appendTo("p");
  });
相关文章
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
133 1
|
JavaScript
jQuery 事件
jQuery 事件
105 10
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
88 3
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
194 0
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
107 0
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
415 0
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
156 0