jQuery事件名稱空間簡單介紹

antzone發表於2017-03-29
jQuery事件

下面先看一個註冊事件處理函式的程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('#bt').bind('click',function(event){
  //code
})

當然註冊方式還有很多，可能不少朋友對事件處理函式的註冊僅限於此，可能都忽略了還有一個非常重要的特性，那就是可以在註冊事件處理函式的時候使用名稱空間，下面就通過程式碼例項做一下簡單介紹，先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  margin:0px auto;
  background:#CCC;
  text-align:center;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").bind("click",function(){
    $(this).text("softwhy.com");
  });
  $("div").bind("click",function(){
    $(this).text($(this).text()+"歡迎您");
  })
})
</script>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

上面的程式碼為div元素click事件繫結了兩個事件處理函式，當點選div的時候，能夠順序執行兩個事件處理函式

但是這裡有一個問題出現了，可能我們需要解綁一個事件處理函式，如果使用unbind("click")的話會將兩個事件處理函式都解綁。

這個時候名稱空間的威力就可以顯現出來了，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{text-align:center}
div{
  width:200px;
  height:100px;
  margin:0px auto;
  background:#CCC;
  text-align:center;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").bind("click.url",function(){
    $(this).text("softwhy.com");
  });
  $("div").bind("click.welcome",function(){
    $(this).text($(this).text()+"歡迎您");
  })
  $("#bt").click(function(){
    $("div").unbind("click.welcome")
  })
})
</script>
</head>
<body>
<div>螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼點選按鈕之後，就可以解綁第二個事件處理函式，這裡就是採用了名稱空間的效果。

事件名稱空間格式:

事件型別+點(.)+名稱空間名稱，例如:

[JavaScript] 純文字檢視 複製程式碼
click.url

也可以是多級名稱空間，示例如下:

[JavaScript] 純文字檢視 複製程式碼
click.antone.softwhy

相關文章