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() {});
大概四種形式，首先在動態載入元素的事件繫結方面。現在一一測試一下：
<!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程式設計師那些事
