您的位置：首页 > Web前端 > JQuery

JQuery各种点击事件的区别

2016-08-02 16:02 671 查看

在工作中，经常用到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() {});

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(function() {

$("#hide").click(function(){

$("p").toggle();

});

});

</script>

</head>

<body>

<p>hideOrShow </p>

<button id="hide">click me</button>

</body>

</html>

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

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

测试结果：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(function() {

$('body').on('click', '#hide', function() {

$("p").toggle();

var openDiv = document.createElement("div");

openDiv.id = "div";

openDiv.style.width = 100+"px";

openDiv.style.height = 120+"px";

document.body.appendChild(openDiv);
$("#div").append('<a class="J_a" >hello world!</a>');

$(".J_a").click();

});

$('body').on('click', '.J_a', function() {

alert('hello');

});



});

</script>

</head>

<body>

<p>hideOrShow </p>

<button id="hide">click me</button>

</body>

</html>

在动态加载出的元素中，添加的事件。$('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程序员那些事

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航