关于jquery绑定事件、解绑、事件冒泡的探索

BitLuminaryMaster
• 阅读 2292

在最近的项目中,我发现了jquery一个神奇的现象,有关于绑定事件以及事件解除绑定,让我对jquery获取指定的DOM元素有了更新的理解,下面我想描述一下这个有趣的经历。
有一个需求是这样的:
页面上有一个投票按钮,点击“给TA投票”按钮会调用ajax给后台传数据,后台处理好数据后,如果成功的话会弹一个投票成功的弹窗,用来提示用户,“给TA投票”按钮会变为“已投票”,同时这个按钮将不能再次被点击。于是这里就有了给DOM元素绑定事件以及事件解除绑定的问题。

关于jquery绑定事件、解绑、事件冒泡的探索

其实解决这个问题很简单:
最简单的办法:使用off()

html:
<div class="voteBtn">给TA投票</div>

js:
$('.voteBtn').on('click',function () {
    var $this = $(this);
    $.ajax({
        url:url,
        data:data,
        type:'POST',
        dataType:'json',
        success:function( data){
            if( data.status == 'success'){
                alert('投票成功');
                $this.off('click').text('今日已投票');
            }else if( data.status == 'error'){
                alert(data.data.msg);
            }
        }
    });
})

BUT 我想能不能不用off()呢?于是我又想了另外一个办法:
如果我再给 voteBtn 一个class————“voteActive”,然后我使用选择器选择voteActive这个DOM元素,给它绑定click事件,在click事件内部再把这个voteActive类删掉,这样,选择器选择不到voteActive这个DOM元素,我给一个选择不到的元素绑定事件不就相当于没绑吗!我自认为很机智,实际上事实并非如此。
以下是我愚蠢的代码:

$('.voteBtn.voteActive').on('click',function () {
    var $this = $(this);
    $.ajax({
        url:url,
        data:data,
        type:'POST',
        dataType:'json',
        success:function( data){
            if( data.status == 'success'){
                alert('投票成功');
                $this.removeClass('voteActive').text('今日已投票');
            }else if( data.status == 'error'){
                alert(data.data.msg);
            }
        }
    });
})

事实上,这么写第二次点击投票按钮还是会执行点击事件,为什么呢?
这是因为:
第二次点击按钮时,虽然$('.voteBtn.voteActive')不能成功获取到投票按钮这个DOM元素了,但是,我把$('.voteBtn.voteActive')在控制器输出了一下,得到了这样的结果:

关于jquery绑定事件、解绑、事件冒泡的探索

虽然length是等于0了,证明没有获取到$('.voteBtn.voteActive')这个元素,但是它的context却是document,这说明我的第二次点击其实是把事件绑定到了document上,所以我再次点击投票按钮时,其实相当于点击的是document。原来事件冒泡到了父级元素上!!!

这时,我想到了用on绑定事件的另一种用法:

 $('document').on('click','.voteActive',function () {
    var $this = $(this);
    //其他代码...
    $this.removeClass('voteActive');
    //其他代码...
});

这个用法的意思是:
给document绑定一个click事件,如果冒泡冒到voteActive上时,执行这个事件,否则不执行。这样我的第二个方法就能正常使用了。

这次探索更新了我对事件绑定的一些理解,并不是获取不到指定的元素绑定的事件就一定不奏效,别忘了还有事件冒泡呀!思想不要太简单!
好了,为了验证自己的一个脑洞,进行了这样一次尝试,也算有些收获。希望继续努力吧~

点赞
收藏
评论区
推荐文章
九旬 九旬
4年前
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。区别Vue和jQuery的区别:不直接操作DOM,而是操作数据。案例:HelloWorld你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue实现javascriptthis.msg'你好,世界'
Dax Dax
3年前
jQuery 的事件绑定和事件委托(事件代理)
简单以jQuery的on()方法为例说明:API:1.on(events,selector,data,handler) 如果on()方法的selector参数为空,事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素,译者注)发生事件时,无论这个事件发生在这个元素上还是从内层元素经冒泡而
Backbone前端框架解读
在前端的发展道路中,前端框架元老之一jQuery对繁琐的DOM操作进行了封装,提供了链式调用、各类选择器,屏蔽了不同浏览器写法的差异性,但是前端开发过程中依然存在作用域污染、代码复用度低、冗余度高、数据和事件绑定烦琐等痛点。
Stella981 Stella981
3年前
Jquery使用经验总结
注明:以下jquery经验版本均自jquery1.7版本。一.jQuery事件总结1.1ready事件和window.onload事件$(document).ready();和window.onload 的方法有相似功能,但是又有区别。加载时机
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Wesley13 Wesley13
3年前
JQ面试问题(转载)
1你在公司是怎么用jquery的?答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答)你用过的选择器啊,动画啊,表单啊,ajax事件等配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可<scripttype"text/javascript"src"jquery/jquery1.7.2
Stella981 Stella981
3年前
JQuery事件
1<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"2<htmlxmlns"http://www.w3.org/1999/
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
3年前
PHP+Mysql实现网站顶和踩投票功能实例
PHPMysql实现网站顶和踩投票功能实例,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。!(https://img.sucaihuo.com/jquery/1/105/big.jpg)首先我们在页面上放置“顶”和“踩”的按钮,即dig\_up和dig\_down,按钮上分别记录了投票的票数以及所占的百分比。
Stella981 Stella981
3年前
Android的消息循环与Handler机制理解
一、概念1、事件驱动型什么是事件驱动?就是有事了才去处理,没事就躺着不动。假如把用户点击按钮,滑动页面等这些都看作事件,事件产生后程序就执行相应的处理方法,就是属于事件驱动型。2、消息循环把需要处理的事件表示成一个消息,并且把这个消息放入一个队列。消息循环就是一循环,for或者while都一样。从消息队列里面取出未处理的消息,然后调用该消息的
Wesley13 Wesley13
3年前
AJAX之跨域请求
  一、引子  我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个index页面,页面中只有一个button按钮,按钮绑定了一个单击事件,点击之后会发送一个ajax请求,请求的路径为‘http://127.0.
BitLuminaryMaster
BitLuminaryMaster
Lv1
砧杵敲残深巷月,井梧摇落故园秋。
文章
4
粉丝
0
获赞
0