事件代理的實現原理很簡單：利用瀏覽器中事件的冒泡（event bubbling）和事件來源（target || srcElement）。 某些情境中特別適合使用事件代理，它有如下好處需要管理的handler更少。佔用的記憶體更少（建立的駐留在記憶體中的handler少了）。DOM元素與代碼更少的綁定。DOM變更後（如添加dom節點）無須重新綁定事件處理器。它也有如下不足並非所有的事件都能冒泡，如load, change, submit, focus,
事件對象的擷取很簡單，很久前我們就知道IE中事件對象是作為全域對象( window.event )存在的，Firefox中則是做為控制代碼( handler )的第一個參數傳入內的。所以一行代碼就可以搞定，var evt = window.event || arguments[0];下面分三種添加事件的方式討論1，第一種添加事件的方式，直接在html的屬性中寫JS代碼<div onclick="alert(4);">Div1
jQuery的屬性模組提供了如下方法attr/removeAttrprop/removeProp（1.6）addClass/removeClass/toggleClass/hasClassval 提供了幾個靜態方法以支援JQ對象以上方法，如jQuery.attr 對應 attr，即jq對象的attr方法內部調用了jQuery.attr。其次還有jQuery.removeAttr -> removeAttrjQuery.prop ->
如下<button value="abc">測試</button><script>var btn = document.getElementsByTagName('button')[0];alert(btn.value);alert(btn.getAttribute('value'));</script>IE6/7:IE8/9/10/Firefox/Safari/Chrome/Opera:IE6/7
jQuery1.6.1 發布有一段時間了，發現一些冗餘代碼，列出如下 1，bind 方法，最後一個參數fn是多餘的// Handle object literalsif ( typeof type === "object" ) {for ( var key in type ) {this[ name ](key, data, type[key], fn);}return this;} 2，注釋// Add which for click: 1 === left; 2 === middle; 3
在之前的event-jq-0.2.js基礎上繼續提取jQuery的trigger和namespace。實現功能如下// add eventE.bind(el, 'click', fn);E.bind(el, 'click.name', fn);E.bind(el, 'click', fn, data);// remove event : E.unbind(el, 'click', fn);E.unbind(el, 'click.name');E.unbind(el,
函數副作用 指當調用函數時，除了返回函數值之外，還對主調用函數產生附加的影響。例如修改全域變數（函數外的變數）或修改參數。 函數副作用會給程式設計帶來不必要的麻煩，給程式帶來十分難以尋找的錯誤，並且降低程式的可讀性。嚴格的函數式語言要求函數必須無副作用。 函數的副作用相關的幾個概念，Pure Function、Impure Function、Referential Transparent。 純函數 ( Pure Function ) 輸入輸出資料流全是顯式（Explicit）的。
很多同學在項目中都喜歡將資料存放區在HTMLElement屬性上，如<div data="some data">Test</div><script>div.getAttribute('data'); // some data</script>給頁面中div添加了自訂屬性“data”及值“some data”。後續JS代碼中使用getAttribute擷取。 jQuery從1.2.3開始提供了data/removeData方法用來儲存/刪除資料。1.
jQuery的事件模組是較複雜的，前面僅僅提到了對事件對象的封裝。即統一了一些相容性的問題。這篇會綜述下jQuery的整個事件模組。後面會詳細分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。 雖然事件模組代碼很難讀，但其提供的API介面還是很清晰的。如下 1 添加事件(bind/one/live/delegate/hover/toggle)bind 基本的添加事件函數。one 添加只執行一次的事件函數。live
請注意，這裡說的是運算數的求值順序。而非運算子，運算子的求值順序我們比較熟悉。比如a * b + c;1，先算乘方，再算乘除，最後算加減2，有括弧，先算括弧裡面的，同一級運算按照從左至右的順序依次進行這一點所有的程式設計語言都採取數學中數位計算順序。當然程式設計語言中還有一些不同於數學中的運算子。那運算數的求值順序是如何的呢？如下// 求 a 和 b的和sum = a +
一般程式設計語言套件含兩種基本的抽象：過程抽象和資料抽象。過程抽象有時也稱控制抽象。 子程式在1950年以前就發明了，作為一種抽象那時候並未被完全接受。相反，最初它被看做是一種節省代碼的機制，但很快子程式就被認可為過程抽象的一種方式。意識到子程式可以作為一種抽象機制，這產生了三個重要結果。人們發明了一些語言，支援各種參數傳遞機制奠定了「結構化程式設計」的基礎，語言開始支援嵌套的子程式（如JS的function，Java的inner
jQuery丟棄了標準的 button 屬性採用 which，這有點讓人費解。which 是Firefox引入的，IE不支援。which的本意是擷取鍵盤的索引值(keyCode)。 jQuery中的which即可以是鍵盤的索引值，也可以是滑鼠的索引值。 即當判斷使用者按下鍵盤的哪個鍵時可以使用which，當判斷使用者按下滑鼠的哪個鍵時也可以用which。它一舉兩用了。源碼// Add which for key eventsif ( event.which == null &&
樣本<!DOCTYPE HTML><HTML> <HEAD><meta charset="utf-8" /><title>僅img元素建立後卻不添加到文檔中會執行onload事件</title> </HEAD> <BODY><script>var img = document.createElement('img');img.src =
列舉所有的方式，看看各瀏覽器的支援差異。一、el.setAttribute('class','abc');<!DOCTYPE HTML><HTML> <HEAD><meta charset="utf-8" /><title>setAttribute('class', 'abc')</title><style type="text/css">.abc {background: red;}</style>
IE6/7中不能通過setAttribute設定元素的style屬性，也不能通過getAttribute擷取元素的style屬性值。它擷取的是一個style對象。 如下<div style="color:blue">div test</div><script type="text/javascript">var div1 = document.getElementsByTagName('div')[0];// 擷取style屬性值var val = div1.
由於各個瀏覽器中原生事件對象的 差異性 ，多數 JS庫/架構 都或多或少的對原生事件對象進行了修複及封裝。 比如，停止事件冒泡IE用 cancelBubble ，標準瀏覽器則用 stopPropagation 。 擷取事件來源對象，IE用 srcElement ，標準瀏覽器則用 target 諸如此類。 jQuery 對原生事件對象的修複和封裝主要使用 jQuery.Event 類和 jQuery.event.fix 方法。jQuery.Event = function( src ) {//
上一篇提到jQuery中添加事件提供給用戶端程式員的介面方法有很多bind/click等，但其實現的核心方法是jQuery.event.add。這篇看看其源碼，這個add定義如下（省略大部分）add: function( elem, types, handler, data ) {if ( elem.nodeType === 3 || elem.nodeType === 8 ) {return;}
如設定class屬性el.setAttribute('class', 'abc');在IE6/7中樣式“abc”將沒有起作用，雖然使用el.getAttribute('class')能取到值“abc”。 又如for屬性<label>姓名：</label><input type="checkbox" id="name"/><script>var lab = document.getElementsByTagName('label')[0];lab.
如下<!DOCTYPE HTML><head><meta charset="utf-8" /></head><body><input type="checkbox" /><input type="checkbox" checked/><script>var checkboxs =
多數情況下隱藏(設定display:none)一個元素，無需依次將其內的所有子項目都隱藏。非要這麼做，有時會碰到意想不到的bug。如下1，兩個div，d1中包含d22，d1，d2都設定了absolute或relative3，隱藏d14，隱藏子項目d25，顯示d1這時IE6/7 and IE8/9/10(IE7模式)中會發現，子項目d2也能顯示出了(別忘了，d2被display:none
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
