**HTML與js交互主要通過用戶與瀏覽器操作頁面時引發事件。文檔或某些元素發生某些變化或操作時,瀏覽器會生成事件。jquery增加了事件處理能力。**
**jquery事件部分可以從以下五部分理解:**
****
**一、加載DOM函數**
**這里指的如下方法:**
~~~
$(document).ready(function(){
})
~~~
**相比于傳統的window.onload方法,前者在執行時機與可否多次使用上區別于后者。**
**前者是在DOM完全就緒回調就會被調用,后者則是網頁所有元素(包含關聯文件)完全加載到瀏覽器后才會被調用。這里常見應用場景是,當需要對圖片進行操作時,需要采用后者,因為后者才能保證圖片文件被加載完成執行。**
**前者可以多次使用,而后者只能使用一次,即便多次定義,后定義的函數會將之前定義的函數覆蓋掉。**
**二、各種事件綁定的方法**
**(1)一般綁定方法:bind方法**
**bind方法參數分別定義事件類型、回調函數。**
**構建一個實例,HTML如下:**
~~~
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是繼Prototype之后又一個優秀的JavaScript庫,它是一個由 John Resig 創建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性,極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
</div>
</div>
~~~
**bind使用代碼如下:**
~~~
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
~~~
**需要注意的是,回調函數內,this指的是帶有相應行為的DOM元素,如需使用jquery中方法,徐將其轉化為Jquery對象$(this)形式。**
**(2)在bind基礎上,簡寫綁定方法**
**簡寫的綁定方法,方法名代表事件類型,參數為回調函數。**
**依然延續上例,簡寫方法使用如下:**
~~~
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
~~~
**(3)合成事件**
**這里合成事件有兩個hover方法與toggle方法。**
**hover方法用于模擬鼠標懸停事件,有兩個回調函數作為參數,第一個回調代表光標移入執行,第二個回調代表光標移出執行。**
**沿用上例,使用方法如下:**
~~~
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
~~~
**toggle方法用于模擬鼠標連續單擊行為,參數為多個回調,每個回調會根據單擊次序順序循環執行。**
**不過這個方法在[jquery1.9版本已經被刪除](http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html)了,這里并不多做討論。**
**(4)模擬操作**
**模擬的是操作,也即是交互行為,從而引發事件,執行回調。這里用到的是trigger方法。**
**舉個例子,HTML代碼:**
~~~
<button id="btn">點擊我</button>
<div id="test"></div>
~~~
**采用模擬操作的代碼:**
~~~
$('#btn').bind("click", function(){
$('#test').append("<p>我的綁定函數1</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數2</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數3</p>");
});
$('#btn').trigger("click");
~~~
**對DOM綁定了單擊事件,采用trigger方法,模擬了click事件,從而執行了回調。**
**這里trigger方法模擬操作的事件還可以是自定義事件,當然也需要同時綁定自定義事件。**
**依然延續上例,采用自定義事件代碼實例:**
~~~
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定義事件.</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick");
});
~~~
**trigger方法除了可以模擬操作,還可以在第二個參數中傳入數據,這在MVC框架中,view間傳遞數據極其常用。**
~~~
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定義","事件"]);
});
~~~
**采用triggerHandler方法可以模擬操作的同時避免觸發瀏覽器默認操作,具體實例如下:**
**html:**
~~~
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
~~~
**jquery代碼:**
~~~
$('#old').bind("click", function(){
$("input").trigger("focus");
});
$('#new').bind("click", function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("body").append("<p>focus.</p>");
})
~~~
**對比可知,后者沒有觸發瀏覽器默認聚焦功能。**
**(5)綁定多個事件**
**綁定多個事件的方法可采用bind方法,在第一個參數中將事件類型空格隔開。**
**使用案例如下:**
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{
width:100px;
height:50px;
}
.over{
color:red;
background:#888;
}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").bind("mouseover mouseout click", function(){
$(this).toggleClass("over");
});
})
</script>
</head>
<body>
<div >滑入.</div>
</body>
</html>
~~~
**(6)給綁定事件添加命名空間**
**命名空間便于管理,當元素綁定多個事件時,刪除事件只需要指定命名空間,節省了代碼量。**
**實例:**
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{width:100px;height:50px;background:#888;color:white;}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
})
/*
click,mouseover 事件被刪除,
*/
})
</script>
</head>
<body>
<div>test.</div>
<button >根據命名空間,刪除事件</button>
</body>
</html>
~~~
**三、移除事件**
**上面提到了綁定事件的各種方法,移除事件主要采用unbind方法,第一個參數即移除事件名,第二個參數可選為移除回調函數。**
**使用實例:**
~~~
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的綁定函數1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的綁定函數2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的綁定函數3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);//移除第二個綁定click函數
});
~~~
**假如事件只需執行一次,可以采用one方法進行事件綁定,用法類似bind方法。**
~~~
$('#btn').one("click", function(){
$('#test').append("<p>我的綁定函數1</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數2</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數3</p>");
});
~~~
**四、事件對象屬性**
**事件對象,顧名思義即觸發事件后,傳入回調函數的對象,包含事件類型、事件目標、光標位置等與事件有關的屬性。**
****
**根據這些事件對象屬性,便于編寫關于本事件的各種操作。常用的防止多次單擊、防止冒泡、默認操作都采用事件對象屬性實現。**
**實例:**
~~~
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//獲取鼠標當前相對于頁面的坐標
return false;//阻止鏈接跳轉
});
~~~
**五、事件冒泡與阻止默認行為**
**(1)事件冒泡**
**關于事件冒泡,即觸發一個事件,整個事件會從本層元素向外部包含的元素擴散,這樣就可能導致,不希望觸發的元素被觸發事件。**
**實例:**
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為div元素綁定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>
</html>
~~~
**解決事件冒泡的方法是在上述案例中,執行事件對象屬性防止對象冒泡方法event.stopPropagation方法。**
~~~
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 為div元素綁定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
~~~
**(2)阻止瀏覽器默認行為**
**這里采用的是事件對象屬性的event.preventDefault方法。**
**(3)如果既想阻止冒泡行為,又需要阻止瀏覽器默認行為,可以再回調中返回false,一并執行。**
**實例:**
~~~
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
return false;
});
~~~
- 前言
- 前端編程提高之旅(一)----插件
- 前端編程提高之旅(二)----網站常見特效的jquery實現
- 前端編程提高之旅(三)----瀏覽器兼容之IE6
- 前端編程提高之旅(四)----backbone初體驗
- 前端編程提高之旅(五)----寫給大家看的css書
- 前端編程提高之旅(六)----backbone實現todoMVC
- 前端編程提高之旅(七)----marionette實現todoMVC
- 前端編程提高之旅(八)----D3.js數據可視化data join解析
- 前端編程提高之旅(九)----延遲對象
- 前端編程提高之旅(十)----表單驗證插件與cookie插件
- 前端編程提高之旅(十一)----jquery代碼的組織
- 前端編程提高之旅(十二)----position置入值應用
- 前端編程提高之旅(十三)----jquery選擇器
- 前端編程提高之旅(十四)----jquery DOM操作
- 前端編程提高之旅(十五)----jquery事件
- 前端編程提高之旅(十六)----jquery中的動畫
- 前端編程提高之旅(十七)----jquery中表單、表格和ajax
- 前端編程提高之旅(十八)----移動端web流行交互技術方案研究