JQuery各种点击事件的区别

在工作中,经常用到js的点击事件,有好多种表现形式,今天抽空总结一下它们的区别与联系。废话不多说,开始写测试案例。首先声明,本人水平有限,如果有错误之处,还请指正。

一、.点击事件,用到的有

1:$(".J_edit_save").on('click',function(e){};

2:$('#J_new').click(function(e){});

3:$('.J_desc').live('click', function(e){});

4:$('body').on('click', '#btn_delete', function() {});

大概四种形式,首先在动态加载元素的事件绑定方面。现在一一测试一下:

hideOrShow

静态点击事件,直接.click,还有其他方式都可以达到效果

修改为动态添加,然后绑定事件,测试一下:

测试结果:

hideOrShow

在动态加载出的元素中,添加的事件。$('body').on('click', '.J_a', function() {}),3:$('.J_desc').live('click', function(e){});动态绑定成功!

$(".J_edit_save").on('click',function(e){}; , $('#J_new').click(function(e){});动态绑定定失败!

其次,在js操作的效率上:

$('body').on('click', '#btn_delete', function() {});方式为运用事件冒泡,有效减少内存的占用 。

原理为首先确定第一个标签$('body')的位置,再在下面搜索#btn_delete的位置,执行click事件

冒泡方式的恰当运用为:

$('.action-box').on('click', '#btn-add, #btn-delete', function(){

if($(this).attr('id') == 'btn-add'){

//do something

} else{

//do something

}

});

通过冒泡事件绑定多个操作,增强代码的复用。

喜欢的朋友可以扫描我的个人公众号,有好东西可以一起分享。免费获取各种学习视频、源码、PPT资料

也可以微信搜索公众号:Java程序员那些事

最新文章会在公众号优先发布,感谢关注。