JQ高级事件之on、off、one

╰半橙微兮° 2022-08-01 13:52 158阅读 0赞

看了李炎恢老师的视频，这三个方法是可以代替之前的绑定和事件委托的，之前的笔记是用来作为铺垫，方便这次的学习！  
我现在前面记录下我们原先的事件绑定  
普通的绑定 .bind  
普通的解绑.unbind

事件委托 .delegate  
解除委托.undelegate

现在呢，我们可以用新方法来代替之前地方法~ .on方法 .off方法（解绑）one（仅执行一次的绑定）  
我们举下列子看看

$('.button').on('click',function(){ 
        alert('1');
    });
    //可以添加额外的数据
    $('.button').on('click',{name:'xiaofeng'}function(e){ 
        alert('1'+e.data.name);
    });
    //执行多个事件
    $('.button').on('mouseover mouseout',function(){ 
        alert('1');
    });
    //也可以通过对象来绑定多个事件
    $('.button').on({
        mouseover:function(){ 
            alert('1');
        }
        mouseout:function(){ 
            alert('2')
        }
    })
    //当然可以阻止冒泡和默认行为，笔记在前面，在这里不详细写了
    $('.button').off('click')//取消绑定
    $('.button').off('click'，fn)//函数
    $('.button').off('click',abc)//命名空间
    
    
    ----------
    //事件委托如何代替呢
    $('#btn').on('click','.button',function(){ 
            $(this).clone().appendTo('#box');
        });
    //移除事件委托
    $('#btn').off('click','button')
    //关于one的用法和上面一模一样，只不过只能触发一次，就不做详细介绍了

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq鼠标滚动事件

JQ鼠标滚动事件 $(document).on("mousewheel", function (e, delta) { var wheel =

拼搏现实的明天。/ 2022年09月04日 04:50/ 0 赞/ 171 阅读

相关 JQ高级事件之on、off、one

看了李炎恢老师的视频，这三个方法是可以代替之前的绑定和事件委托的，之前的笔记是用来作为铺垫，方便这次的学习！我现在前面记录下我们原先的事件绑定普通的绑定 .bind

╰半橙微兮°/ 2022年08月01日 13:52/ 0 赞/ 159 阅读

相关 JQ高级事件之事件委托

事件委托跟字面意思一样，需要找一个东西来帮助一起完成某个东西。用我们JQ的语言来说就是，我有2000个按钮，但我们不能一个一个绑定，这样太过于浪费操作，那我们怎么做呢，事

╰+攻爆jí腚メ/ 2022年08月01日 13:52/ 0 赞/ 232 阅读

相关 JQ高级事件之模拟与命名空间

今天学习李炎恢老师所讲的JQ高级事件，~再此记下笔记来方便以后复习！那什么是高级事件，模拟操作，命名空间，事件委托，on，off，one 那什么是模拟操作！模拟用户操作

冷不防/ 2022年08月01日 13:52/ 0 赞/ 183 阅读

相关 JQ事件对象

这次跟着李炎恢老师学习事件对象，和冒泡和默认行为！！再此记下笔记以便日后学习首先是接收事件对象 <input type="button" value="小疯疯"/

迷南。/ 2022年08月01日 13:41/ 0 赞/ 202 阅读

相关 JQ基础事件

最近终于学到了事件，也是最常用到的地方，李炎恢老师详细的介绍了各种方法，我也是把李炎恢老师所讲的总结一下学过JS肯定知道DOM2级的绑定事件方法addEventListen

旧城等待，/ 2022年08月01日 12:24/ 0 赞/ 201 阅读

相关 jq基础8——事件

<table> 事件 <thead> <tr> <th>事件</th> <th>简介</th> <th>实例</th> </tr>

红太狼/ 2022年01月15日 04:27/ 0 赞/ 296 阅读

相关 jq trigger()事件

1、该事件触发由bind制作的自定义函数事件，在页面加载时自动执行语法:('选择器').trigger('自定义函数名'); 代码示例:

清疚/ 2021年07月24日 23:45/ 0 赞/ 384 阅读

相关 jq 事件机制

绑定事件法一: 数组对象.bind("去掉on的事件名",绑定内容) 追加模式,一个事件增加多个操作,js是覆盖，可配合js追加绑定 fun

旧城等待，/ 2021年07月24日 23:44/ 0 赞/ 422 阅读

相关 jq 事件监听on

事件监听语法 $(selector).on(event,childSelector(可选),data(可选),function)

旧城等待，/ 2021年07月24日 17:48/ 0 赞/ 481 阅读