]]>
]]>
]]>
]]>
]]>
]]>
]]>
/閉包執行一個立即定義的匿名函數
!function(factory) {
//factory是一個函數，下面的koExports就是他的參數
// Support three module loading scenarios
if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
// [1] CommonJS/Node.js
// [1] 支持在module.exports.abc,或者直接exports.abc
var target = module['exports'] || exports; // module.exports is for Node.js
factory(target);
} else if (typeof define === 'function' && define['amd']) {
// [2] AMD anonymous module
// [2] AMD 規范
//define(['exports'],function(exports){
// exports.abc = function(){
}
//});
define(['exports'], factory);
} else {
// [3] No module loader (plain <script> tag) - put directly in global namespace
factory(window['ko'] = {});
}
}(function(koExports){
//ko的全局定義 koExports是undefined 對應著上面的[3] 這種情況
var ko = typeof koExports !== 'undefined' ? koExports : {};
//定義一個ko的方法
ko.abc = function(s){
alert(s);
}
});
//[3]中情況的調用
ko.abc("msg");
!function(factory) {
//factory是一個函數，下面的koExports就是他的參數
// Support three module loading scenarios
if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
// [1] CommonJS/Node.js
// [1] 支持在module.exports.abc,或者直接exports.abc
var target = module['exports'] || exports; // module.exports is for Node.js
factory(target);
} else if (typeof define === 'function' && define['amd']) {
// [2] AMD anonymous module
// [2] AMD 規范
//define(['exports'],function(exports){
// exports.abc = function(){
}//});
define(['exports'], factory);
} else {
// [3] No module loader (plain <script> tag) - put directly in global namespace
factory(window['ko'] = {});
}
}(function(koExports){
//ko的全局定義 koExports是undefined 對應著上面的[3] 這種情況
var ko = typeof koExports !== 'undefined' ? koExports : {};
//定義一個ko的方法
ko.abc = function(s){
alert(s);
}
});
//[3]中情況的調用
ko.abc("msg");
非常巧妙的閉包實現了。三種方式的兼容。摘出來mark一下。
]]>
在菜單上點擊Tools -> New Snippet，會新建一個xml文件頁簽：
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
注釋已經說的比較詳細了。
content 里面就是代碼模版：${序號：默認值} ，序號相同的地方光標會同時停在那可以多處同時編輯。序號大小就是tabindex。在實際使用代碼的時候，可以使用tab切換光標位置。
tabTrigger是指輸入該字符串后tab就是在光標插入content中的內容。
scope是指在何種文件類型中使用。
下面是html5代碼片段的定義：
<snippet>
<content><![CDATA[
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>${1}</title>
</head>
<body>
<h1>${1}</h1>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<content><![CDATA[
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>${1}</title>
</head>
<body>
<h1>${1}</h1>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
編輯完之后保存為 C:\Users\[用戶]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet (Win7下) 默認的保存路徑就行。后綴必須是.sublime-snippet。
保存完重啟Sublime text 2，新建文件：輸入html5,tab會出現如下效果：
${1}出現了兩次，所以光標同時編輯圖中兩處。
${2:this}，所以在2處出現this默認值。${1}處編輯完按tab就到${2}處。
OK, That's all。
]]>
Ctrl+W 關閉當前頁簽，很通用。
Ctrl+Shift+W關閉所有頁簽，估計能猜到。
Ctrl+Shift+v 粘貼并且格式化，比較實用。
Ctrl+[ 減少縮進
Ctrl+] 增加縮進
Ctrl+k,Ctrl+u 先按Ctrl+K,再按Ctrl+U，大寫，這有點不習慣
Ctrl+k,Ctrl+l 小寫
ctrl+left,ctrl+right 先左/右移動一個單詞，VI中的W,B
Ctrl+Shift+up ,當前上上移一行，跟Eclipse一樣
Ctrl+Shift+down，不說了
Ctrl+Shift+K 刪除當前選中行，后來發現Ctrl+X也可以，Eclipse里面的Ctrl+D。
Ctrl+Shift+D 復制當前選中行，程序員的摯愛
Ctrl+D 是高亮光標所在詞，類似VIM中的#
Ctrl+M 到匹配的{[( 與vim 中的%一致
Ctrl+Shift+M 可以選中{[(內容，類似vim中的va( vi{
Ctrl+J join rows 合并選中行
Ctrl+Shift+J 打散行
Ctrl+Shift+T 旋轉功能這個標簽內容 vim中的vat
Ctrl+shift+a 選中匹配的標簽
Ctrl+T 可以選中多行，然后講這些行順序反轉。如果沒有選中多行，會講光標前后的字母換順序。
雙擊選中一個單詞,Ctrl+F3跳至下一個匹配處，F3上一個匹配處。
F11，我最喜歡的全屏快捷鍵。
Shift+F11更狠，只編輯當前的文件。免打擾模式。兩耳清靜。
alt+. 如果輸入<div> 然后alt+. 可以自動完成這個tag，變成<div></div>
Ctrl+/ Ctrl+Shift+/ 注釋/取消注釋，各種語言都行。
一個小技巧：選中一個單詞如abc ，然后輸入" 這樣 會變成"abc",同理還可以用( { [ '
Ctrl+shift+P 調出一個功能列表，可以探索一些好玩的功能，比如我找到了這個功能：HTML:Encoding Special Characters。選中 & 運行一下可以變成 &
Ctrl+P 會調出一個對話框框，下拉選項中有當前打開的文件，可以切換，文本框非常強大，輸入@funcName 可以直接到函數定義處，輸入#key 可以直接查找，輸入:行數可以直接到某行，也可以用快捷鍵Ctrl+g
安裝了ZenCoding之后可以使用的快捷鍵： 安裝教程
Ctrl+alt+Enter,zencoding開始了
alt+shift+W 環繞選中內容
官方文檔中有快捷鍵列表：http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html
]]>
1.基礎庫：
注意是庫，不是框架，基礎庫通常提供底層方法，它必須能夠屏蔽瀏覽器/終端的API差異。也許大家腦子里面會彈出一堆前端熱門的一些庫。在此不討論哪個庫哪個庫怎么樣，一個基礎庫必須提供的功能：
- 基本類型的常見擴展：原生的javascript對象API往往在現實中不夠用，比如常見的Array.indexOf/remove/each，Date.parse/format，不管是怎么封裝都需要這類方法
- DOM操作常見方法：DOM節點增刪改查，CSS selector，DOMReady，contains，add/remove/toggleClass，屏蔽瀏覽器之間的操作差異。不多說，人人都熟。
- 一套瀏覽器檢測機制：以前大家都傾向于做瀏覽器類型和版本的檢測，現在傾向于做瀏覽器的特性檢測，這樣更有實際用處。
- Ajax的封裝，對于組件庫來講可無。畢竟組件庫本身的實現不太會用得上Ajax。
2.事件機制：
addEventListener/removeEventListener/dispatchEvent 是常見的封裝方式，不應該只是DOM事件，而是任何對象都可以做一個事件機制。
對于DOM事件的封裝需要屏蔽IE/標準Event的差異提供為用戶使用，事件代理非常重要，不可小視。
- 事件機制都無一例外的是基于第三方觀察者或者叫做沙箱(Sandbox)實現。
- 事件機制更深的功能是提供一個模塊的通信機制。
- 對于組件庫，組件實例之間的通信更加重要，組件實例之間最好不要存在相互引用的關系，互相不能感知對方的存在，有了事件機制，可以通過第三方有效的通知組件實例，減少組件實例間的耦合。
3.模板機制：
實際上寫組件的時候，拼裝html是一件很復雜的事情，模塊能夠從數據模型，對于組件庫來講通常是配置信息選項。將這些選項拼裝成html字符串。但是大家普遍的一個誤區是在追求語法的簡便的和性能。我倒覺得模板要做的事情遠不止如此。功能強大的模板不僅僅只完成字符串的拼接，而是要簡化整個DOM操作，從數據模型到DOM的雙向綁定，Model更新了DOM也隨之更新。甚至要解決動態DOM事件綁定的問題。
4.面向對象的機制
放在組件庫這個角度去談面向對象的時候，他是一個架構設計中的一個重要的一環。
面向對象的機制能有效的提升代碼的可復用性和擴展性，javascript靈活的語法諸如prototype/closure的方式，能構建出一個強大的類庫。
可以使用繼承機制擴展已有的組件。也可以用引用的方式裝飾(Facade)現有組件，個人更傾向于使用裝飾。因為繼承總會不可避免的直接或者間接去訪問父類的一些私有屬性方法。
這個機制其實決定了一個組件的代碼模型，通常需要解決的問題有：
- 該組件繼承自哪些組件或者基礎類，或者依賴于那些類？
- 組件實例的管理方式，因為每個組件實例都需要在一個容器中統一存放，理想的的存放模型應該是樹形的，在內存中存在類似DOM樹一樣的組件對象樹，是否可以通過類名找到相關實例，根據ID獲取實例，獲取子實例，父實例，父/子實例之間的通信父實例的resize是否能通知容器內的實例resize。
- 插件機制：作為一個非常重要的擴展機制，插件能有效的解決組件間的復用部分，通常這部分會叫做行為(behavior)，對于組件不能提供的甚至是個性化的功能，有沒有提供有效的，足夠多的擴展點。
- 提供怎樣的實例化方式？ new XXX() ?? 還是類似DOM的操作方式appendInstance??甚至有類似jq這種鏈式。我更覺得應該使用appendInstance的方式，這樣能更加有效的體現組件示例間的父/子關系。就像DOM操作一樣，最終組件實例也是樹形結構，如果我們直接new XXX() 這種方式，其實相當于聲明了一個游離態的 DOM節點。實際我寫代碼的時候發現要管理這些組件實例也是比較麻煩的地方，試想一個頁面如果有多個組件實例，需要聲明多少個實例變量，或者申明多少個對象去存放這些實例。
- 組件提供的API，一個組件對外暴露的API會包括初始構造方法，公共方法(method)，事件(event)，對于event，提供怎樣的eventData也非常重要。
5.模塊化機制
如今模塊化的思想已經深入人心，模塊化帶來了很好的團隊多人完成一項大的任務的可能性，符合高內聚低耦合的思想。到了如今這個時代，萬物皆模塊。
組件庫通常是一個龐大的工程，單靠個人英雄主義很難做的完整全面。
詳細的來講，模塊化機制涉及：
- 模塊本身的定義，注冊，直接影響一個組件的代碼模型，一個組件是一個模塊。
- 模塊的依賴申明以及追朔機制：就像前面提到的，依賴于那些類，css文件，資源，數據。不僅僅需要聲明，還應該可追朔，依賴的父類，也能找到父類本身所依賴的資源，這樣為按需部署打包，在線調試提供居多方便。
- 加載機制：因為在開發階段要么放一個整個組件庫代碼，要么是通過一個加載器按需加載，到了線上希望只部署引用到了模塊組件，這樣可以減少實際部署的文件大小。加載機制會涉及到瀏覽器的javascript/css文件的加載，尤其是需要盡可能的并行下載而且按照依賴關系先后執行。包括應用模塊，可以方便的通過這種加載機制延遲，按需，按時的加載到頁面中。
- 打包部署機制：由于依賴可追朔，這樣實際項目中用到的那些組件可以分析出來，最終可以根據實際使用到的情況打包出適合大小的組件庫，減小冗余包的存在。
- 模塊間的通信機制，由于模塊減輕耦合甚至是獨自孤立存在，組件之間的通信就非常重要，比如通常一個頁面上面的菜單組件實例點擊需要觸發下面組件的更新。如果直接監聽菜單事件去更新下面的組件，也許菜單是每個頁面都有。但是下面的組件不是每個頁面都有，這樣的事件監聽就顯然耦合較重，互相依賴對方的存在。如果菜單點擊這是告訴第三方我被點擊了。下面的組件只去監聽第三方的事件，這樣的代碼思路明顯要好過很多。
6.前端的基本開發思想
取決于個人經驗：比如MVC的思想在組件實現過程中非常重要，Model通常是構造函數中那一堆配置信息，View通常是需要通過Model提供數據用戶呈現，實際上View上的操作的相應都需要Model來記住狀態。Controller用于操作二者。原理大家都知道，在開發中怎樣分清三者界限。保證思路清晰。
前端中javascript/css/html的角色也類似與MVC。下面的一些代碼方式就有違MVC的一些思想：
- css Expression:不僅IE only，更重要是CSS中寫javascript這個風格不對，難以維護。
- javascript直接修改style.xxx='xx'。能寫成css class的最好都寫成css class。
- html中直接寫onxxx="foo()"，沒有人能保證foo方法存在不被修改。
7.其他需要考慮的問題：
- 測試用例：通用組件庫是一個龐大的工程，也許牽一發動全身，不知道哪個API的變動會影響多少調用者，有充足的單側用例，一定程度上能保證整個組件庫的穩定性。
- 粒度：粒度是一個很值得思考的問題，其實html的標簽可以當做是一個小的組件，只是因為粒度很小，要完成一個復雜的應用，有很多的可復用組件都需要用到大片大片的重復html片段。另外一個極端，我們我們把整個頁面都寫成一個組件，顯然沒有復用性，跟沒封裝一樣。所以選擇一個合適的組件粒度，一個組件完成特定的功能，有利于搭建出有想象力的應用。
- 一致性：需要有很好的代碼規范和約定。才能保證API的一致性，用戶也會理所當然的想到怎樣用API，降低學習成本，一個最常見的例子就事件監聽的參數，建議統一為(eventObject,eventData)。
- 文檔&Demo:這個不用多說，沒有文檔和demo的東西沒有人去看代碼怎么使用。
- 性能：DOM操作是組件庫的性能殺手，高效的DOM操作尤其重要，事件監聽也是非常耗時的，建議能采用代理的都用父節點來代理。
- 資源釋放：組件的資源，引用是否能完全釋放？尤其是開發SPA，組件的資源內存釋放就非常重要了。
總結：
零零星星的提到了這么幾點，也是過去工作中的體會，當然會有不足，望大家補充，回頭可以check一下現在用到的一些框架/組件。歡迎討論。
]]>
]]>
]]>
]]>
<style type="text/css">
table{table-layout:fixed; border-collapse:collapse;border:1px solid #000; border-width:1px 0px 0px 1px;width:200px;}
td{text-align:left;overflow:hidden;padding:0px;margin:0px;white-space:nowrap; border:1px solid #000; 0px 1px 1px 0px;}
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px;" nowrap="nowrap" >中文中文阿飛的房間薩芬；撒</td>
<td style="width:100px;" nowrap="nowrap" >saaaa</td>
</tr>
</table>
table{table-layout:fixed; border-collapse:collapse;border:1px solid #000; border-width:1px 0px 0px 1px;width:200px;}
td{text-align:left;overflow:hidden;padding:0px;margin:0px;white-space:nowrap; border:1px solid #000; 0px 1px 1px 0px;}
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px;" nowrap="nowrap" >中文中文阿飛的房間薩芬；撒</td>
<td style="width:100px;" nowrap="nowrap" >saaaa</td>
</tr>
</table>
如果去掉table-layout:fixed，表格的寬度會根據內容自動調整，比如上面的例子，如果去掉table-layout:fixed。第一個單元格的寬度會超過100px;
但是最近發現，使用table-layout:fixed在webkit內核瀏覽器上(safari/chrome)。寬度顯示會出現問題。
看看下面的例子：
<style type="text/css">
#test
{
border-collapse:collapse;
}
#test td, #test th
{
border:solid 1px black;
padding:3px;
}
</style>
<table style="width:736px;table-layout:fixed;margin:0;padding:0" id="test">
<thead>
<tr>
<th width="25">ID</th>
<th width="270">Name</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
#test
{
border-collapse:collapse;
}
#test td, #test th
{
border:solid 1px black;
padding:3px;
}
</style>
<table style="width:736px;table-layout:fixed;margin:0;padding:0" id="test">
<thead>
<tr>
<th width="25">ID</th>
<th width="270">Name</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
<th width="54">xx</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
瀏覽器上的截圖為：
搜了一番資料后。在webkit官網上有這么一個Bug
If a table has both "table-layout: fixed" and "width: 0", then cells with borders have wrong width. This occurs in both safari 3.x mac&win and linux svn 31841 (debian sid). The expected behavior is rendered by IE6, IE7, Firefox 2, Firefox 3 beta and Opera 9.2. Consider a table with 3 columns, all with width 200px. If one of the cells have "border-left: 50px; width: 150px;", then according to the rules of "table-layout: fixed", the cell should still have width 200px. But webkit renders the cell with only width 150px.
就是設置了table-layout:fixed之后,table的td寬度style.width不再是內容的寬度，而是內容+邊框。而且是忽視padding。這讓人很郁悶。
總之一旦設置了table-layout:fixed之后，webkit瀏覽器的單元格寬度并不會像你想象的那樣準確的寬度。
參考資料：
webkit的bug描述：
https://bugs.webkit.org/show_bug.cgi?id=13339
https://bugs.webkit.org/show_bug.cgi?id=18565
stackoverflow的提問：
http://stackoverflow.com/questions/2943369/table-layoutfixed-rendering-differences-in-safari
http://lists.macosforge.org/pipermail/webkit-unassigned/2008-April/071125.html
]]>
]]>
]]>
]]>
<body> <div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue;"> fixed?? </div> <div style="height:1000px;">mock page content<div> </body>
主流的做法有兩種，一種使用expression表達式，在頁面滾動時重新設計元素的top屬性：
<body> <div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue; _position:absolute;_top:expression(parseInt(document.documentElement.scrollTop,10)+20+'px');"> fixed?? </div> <div style="height:1000px;">mock page content<div> </body>
這種方法比較直接，但是每次滾動都重新計算元素的位置很消耗性能，而且頁面比較復雜的時候，會出現“抖動”的現象。
另外一種方法當你弄明白是才發現奇妙無窮，是否可以改變頁面的滾動條滾動的元素呢？滾動條默認滾動的是body元素。如果滾動的是一個div，而需要固定定位的元素并不在這個div中的話，自然就不會隨著滾動條的滾動而滾動。
<body> <style type="text/css"> html,body,#content{height:100%;overflow:auto;padding:0px;margin:0px;} #fixed{position:fixed; right:20px; bottom:20px; border:solid 1px blue;_position:absolute;} </style> <div id="content" class=""> <div id="" class="" style="background-color:#ccc;height:1000px;"> mock page content </div> </div> <div id="fixed" class=""> fixed content </div> </body>
設置一個div與body等高等寬，將頁面內容都放到這個div中。這樣頁面滾動條其實是這個div的滾動條。然后在body下放上position:fixed的元素。這樣就大功告成了。
這基本是一個白話版的解決辦法了。基本是原理和簡單實現，更多的細節可以參考：
http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html
]]>
<script type="text/javascript">
function autoheight(){
this.height= this.scrollHeight+this.height+"px";
}
</script><textarea id="" rows="" cols="" onpropertychange="autoheight();" oninput="autoheight()" style="overflow:hidden;"></textarea>這個代碼我沒有運行，因為一邊寫就發現不對勁，在propertychange函數中改變property會再次觸發propertychange事件，結果就可想而知了。stack overflow。
所以需要換一種思路，新建一個textarea，將同樣大的文本放到屬性一樣的textarea中計算其高度，然后把高度設置到目標textarea中。
<script type="text/javascript">
//基本函數*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//新建一個textarea用戶計算高度
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//一處隱藏，必須的。
$(elemid).style.resize="none";//去掉textarea能拖拽放大/縮小高度/寬度功能
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
//基本函數*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//新建一個textarea用戶計算高度
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//一處隱藏，必須的。
$(elemid).style.resize="none";//去掉textarea能拖拽放大/縮小高度/寬度功能
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
搞清楚原理其實就簡單多了。要捕捉textarea的change事件在IE下可以使用propertychange,在!IE下可以使用input。
一些textarea資料做參考：
- textarea 的一些小技巧 http://css-tricks.com/textarea-tricks/
- 本文的直接資料來源：http://www.planeart.cn/?p=1489
]]>
<script type="text/javascript">
$(function(){
$("#t").keyup(function(e){
$("#s").html("keyup1");
//stopImmediatePropagation可以阻止在這之后綁定的事件
//比較注釋和不注釋這一行的區別
e.stopImmediatePropagation();
});
$("#t").keyup(function(e){
$("#s").html("keyup2");
});
});
</script>
<input type="text" id="t" name="" value="" />
<span class="" id="s"></span>
$(function(){
$("#t").keyup(function(e){
$("#s").html("keyup1");
//stopImmediatePropagation可以阻止在這之后綁定的事件
//比較注釋和不注釋這一行的區別
e.stopImmediatePropagation();
});
$("#t").keyup(function(e){
$("#s").html("keyup2");
});
});
</script>
<input type="text" id="t" name="" value="" />
<span class="" id="s"></span>
如果在第一個事件中需要阻止第二個事件的執行可以在第一個事件中使用event.stopImmediatePropagation方法。jQuery的event的對象是增強的event對象，
stopImmediatePropagation就是jQuery獨有的一種阻止jQuery綁定事件機制。可以通過isImmediatePropagationStopped()來判斷是否阻止了jQuery立即冒泡。
stopImmediatePropagation就是jQuery獨有的一種阻止jQuery綁定事件機制。可以通過isImmediatePropagationStopped()來判斷是否阻止了jQuery立即冒泡。
stopImmediatePropagation的實現可以參見我之前的一篇文章，從jQuery的緩存到事件監聽
在這篇文章中提到jQuery將事件都緩存在一個數組中按照先后順序執行。如果stopImmediatePropagation就停止執行數組中的監聽函數。
stopPropagation是阻止默認事件監聽函數。不是jQuery獨有，阻止默認事件的冒泡，比如監聽了DOM節點和該節點的父節點的事件，默認是事件執行將從里到外，這就是所謂的冒泡。在IE9-瀏覽器中可以使用event.cancelBubble=false來做到，標準瀏覽器使用event.stopPropagation方法。jQuery也把stopPropagation擴展方式到IE上這樣有了一致的方法。
綜上所述，其實stopImmediatePropagation與stopPropagation就不是一個東西，所以也不存在什么區別了。
參考資料
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>