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

冷不防 2022-08-01 13:52 176阅读 0赞

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

那什么是模拟操作！模拟用户操作，类似于按钮，浏览器自动点击按钮

//这是一个通常的点击事件
    $('input').click(function(){ 
        alert('1');
    })
    //模拟
    $('input').trigger('click');//和上面的代码一起，就会再刷新浏览器时自动弹出1
    //或者直接简写成
    $('input').click(function(){ 
        alert('1');
    }).trigger('click');
    
    
    //trigger可以传数据的，下面举个例子，数据的类型可以有很多
    $('input').click(function(e,data1,data2,data3,data4){ //传入e，和数据
    
        alert(data1+'|'+data2+'|'+data3[1]+'|'+data4);
    
    }).trigger('click',['123','abc',['a','b','c'],{name:'xiaofengfeng'}]);//第三个是数组，第四个是对象
    
    
    //还有一个功能是使用自定义函数的时候用到，在原生JS中有这种自定义函数，但没怎么使用过
    $('input').bind('myEvent',function(){ 
    
        alert('1');//但并不会有这个弹窗，因为我们自定义的事件并没有绑定硬件，例如click绑定了鼠标左键
    
    }).trigger('myEvent');//自动弹窗我们就需要考虑是否绑定硬件啦
    
    //还有一种更为简单的写法，但还是建议标准写吧！
    $('input').click(function(){ 
        alert('1');
    }).click();
    
    
    ----------
    //在trigger方法的基础上，多了一种方法为triggerHandler(),他与trigger有什么不同么，下面看些例子
    1.$('form').trigger('submit');//这样会直接提交，也就是说有默认行为的
    
    $('form').triggerHandler('submit');//这样就不会跳转，但他提交了，也就是取消了默认行为
    2.$('input').click(function(){ 
        alert('1');
    }).trigger('click');
    如果有三个按钮，那么点一下就会有3个弹窗，而如果是triggerHandler就只有一个弹窗
    
    3//这个区别有点大，关于返回值的问题，看下面代码
    $('input').click(function(){ 
        alert('1');
    }).trigger('click');//返回的是一个对象而triggerHandler的话就可以这么写
    $('input').click(function(){ 
        alert('1');
        retrun 123;
    }).trigger('click');//又返回时就显示返回值，没有return时就返回undefined
    
    4//第4个区别就是是否支持冒泡，关于冒泡，我上一篇有写过冒泡，这里就不详细说了
    //trigger支持冒泡而triggerHandler不支持冒泡

**命名空间**命名空间是怎么回事呢，其实有点像加了一个识别的标志，方便进行一些操作，类似于匿名函数的删除

$('input').bind('click',function(){ 
        alert('1');
    })
    $('input').bind('click',function(){ 
        alert('12');
    })
    //我们想删除其中的一个点击事件，没法下手，这时候就可以使用命名空间
    $('input').bind('click.abc',function(){ 
        alert('1');
    })
    $('input').bind('click.zxc',function(){ 
        alert('12');
    })
    $('input').unbind('click.abc');//这样就可以移除了
    //如果我有多个abc的命名空间怎么办呢，那么直接
    $('input').unbind('.abc');//就搞定了