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");
  });
相关文章
N..
|
25天前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
30天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
20 1
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
29天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
30天前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
7月前
|
存储 JSON JavaScript
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
37 0