JQuery中各种点击事件的区别与使用

最新推荐文章于 2024-03-11 09:46:37 发布

源码学习分享

最新推荐文章于 2024-03-11 09:46:37 发布

阅读量715

点赞数

分类专栏： js

js 专栏收录该内容

20 篇文章

订阅专栏

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

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
}
});

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