Time of Update: 2018-12-07
前面用了8篇回顧瀏覽器中內建事件,且寫出了一個基本完整,功能還算強大的事件模組。如果您願意,還可以繼續添加一些功能如事件代理、一次性添加多個事件、和選取器結合一次性為多個元素添加事件。當然這些都不是必須的,可根據需求自行擴充。這篇開始看看自訂事件,自訂事件有許多應用情境。實際上它實現了“觀察者模式”。使用過google(或靈圖)地圖API的同學應該知道地圖有個縮放事件zoom,即地圖放大或縮小的時候觸發。這個zoom就是自訂事件。感興趣的可以點擊此處看看。自訂事件並不深奧,幾行代碼就可以實現一個
Time of Update: 2018-12-07
最簡單的莫過於使用click方法<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/><script>var btn = document.getElementById('btn');btn.click();</script>所有瀏覽器都彈出了1。把input換成div呢<div id="d1" style="background:gold;width:50px;height:5
Time of Update: 2018-12-07
有時需要模仿使用者的一些動作(滑鼠/鍵盤操作),最常見的莫過於滑鼠點擊。一一列舉1,dispatchEvent()這是標準的觸發事件方法,使用時需要先建立好事件對象。如下var evt =
Time of Update: 2018-12-07
找工作一個月了,杳無音訊,學曆、工作經驗都沒,連個面試電話都沒。 我想起了做銷售被人刁難的時候,心裡的憤懣。想起了辛苦攢錢學習java時的躊躇滿志。有時候心灰意冷,有的時候卻又充滿鬥志。但是不管什麼時候,我都不會懼怕,不懼怕前路的未知,不會懼怕現實的困苦艱難,儘管我身上只剩了180塊錢現在。 想起了小時候和別人打架,被人戳到了眼睛,捂著眼就趴到了地上。周圍的人都嚇壞了,不知所措。我捂著眼睛又爬了起來,使勁揉了揉眼眶,噙著淚水大喊:媽的,再來!父親說過,堅強的人從來不哭。我是個男人,要堅強
Time of Update: 2018-12-07
最近看完了添加事件和刪除事件的核心方法,忍不住想把jQuery的事件模組摳出來。jQuery的代碼是非常內聚的,一環套一環。想獨立出來不容易。jQuery的事件模組嚴重依賴於其資料儲存(jQuery.data),你會發現My Code中的dataManager對象對應它。 這裡只提供bind和unbind方法。暫不包含事件命名空間(event namespace)事件代理(event delegation)特殊事件如dom ready 介面如下:E.bind(el, 'click', fn);
Time of Update: 2018-12-07
有時需要將數組轉成偽數組(ArrayLike),如下var ary = ['one','two','three'];var obj = {}; // 沒有length屬性Array.prototype.push.apply(obj, ary);for(var i in obj){alert(i + ': ' + obj[i]);}IE8/9/Firefox/Safari/Chrome
Time of Update: 2018-12-07
如下<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
Time of Update: 2018-12-07
觸發事件,或稱類比使用者動作。比如點擊,我們可以用代碼去類比使用者點擊,達到的效果與真實的滑鼠點擊是一樣的。在 事件模組的演變 我使用了dispatchEvent(標準) 和fireEvent(IE)來主動觸發事件。如下...dispatch = w3c ?function(el, type){try{var evt =
Time of Update: 2018-12-07
最易讀版function chain(obj){function fun(){if (arguments.length == 0){return fun.obj;}var methodName = arguments[0], methodArgs = [].slice.call(arguments,1);fun.obj[methodName].apply(fun.obj,methodArgs);return fun;}fun.obj = obj;return fun;}易讀版function
Time of Update: 2018-12-07
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
Time of Update: 2018-12-07
在之前的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,
Time of Update: 2018-12-07
函數副作用 指當調用函數時,除了返回函數值之外,還對主調用函數產生附加的影響。例如修改全域變數(函數外的變數)或修改參數。 函數副作用會給程式設計帶來不必要的麻煩,給程式帶來十分難以尋找的錯誤,並且降低程式的可讀性。嚴格的函數式語言要求函數必須無副作用。 函數的副作用相關的幾個概念,Pure Function、Impure Function、Referential Transparent。 純函數 ( Pure Function ) 輸入輸出資料流全是顯式(Explicit)的。
Time of Update: 2018-12-07
很多同學在項目中都喜歡將資料存放區在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.
Time of Update: 2018-12-07
jQuery的事件模組是較複雜的,前面僅僅提到了對事件對象的封裝。即統一了一些相容性的問題。這篇會綜述下jQuery的整個事件模組。後面會詳細分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。 雖然事件模組代碼很難讀,但其提供的API介面還是很清晰的。如下 1 添加事件(bind/one/live/delegate/hover/toggle)bind 基本的添加事件函數。one 添加只執行一次的事件函數。live
Time of Update: 2018-12-07
請注意,這裡說的是運算數的求值順序。而非運算子,運算子的求值順序我們比較熟悉。比如a * b + c;1,先算乘方,再算乘除,最後算加減2,有括弧,先算括弧裡面的,同一級運算按照從左至右的順序依次進行這一點所有的程式設計語言都採取數學中數位計算順序。當然程式設計語言中還有一些不同於數學中的運算子。那運算數的求值順序是如何的呢?如下// 求 a 和 b的和sum = a +
Time of Update: 2018-12-07
一般程式設計語言套件含兩種基本的抽象:過程抽象和資料抽象。過程抽象有時也稱控制抽象。 子程式在1950年以前就發明了,作為一種抽象那時候並未被完全接受。相反,最初它被看做是一種節省代碼的機制,但很快子程式就被認可為過程抽象的一種方式。意識到子程式可以作為一種抽象機制,這產生了三個重要結果。人們發明了一些語言,支援各種參數傳遞機制奠定了「結構化程式設計」的基礎,語言開始支援嵌套的子程式(如JS的function,Java的inner
Time of Update: 2018-12-07
jQuery丟棄了標準的 button 屬性採用 which,這有點讓人費解。which 是Firefox引入的,IE不支援。which的本意是擷取鍵盤的索引值(keyCode)。 jQuery中的which即可以是鍵盤的索引值,也可以是滑鼠的索引值。 即當判斷使用者按下鍵盤的哪個鍵時可以使用which,當判斷使用者按下滑鼠的哪個鍵時也可以用which。它一舉兩用了。源碼// Add which for key eventsif ( event.which == null &&
Time of Update: 2018-12-07
列舉所有的方式,看看各瀏覽器的支援差異。一、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>
Time of Update: 2018-12-07
由於各個瀏覽器中原生事件對象的 差異性 ,多數 JS庫/架構 都或多或少的對原生事件對象進行了修複及封裝。 比如,停止事件冒泡IE用 cancelBubble ,標準瀏覽器則用 stopPropagation 。 擷取事件來源對象,IE用 srcElement ,標準瀏覽器則用 target 諸如此類。 jQuery 對原生事件對象的修複和封裝主要使用 jQuery.Event 類和 jQuery.event.fix 方法。jQuery.Event = function( src ) {//
Time of Update: 2018-12-07
如設定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.