如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在微信登錄中，如何和獲取網頁授權。
一、登錄微信測試公眾品平臺，修改網頁授權基本信息，輸入授權回調頁面域名（自己的域名）。
然后重新建立一個tp框架 編寫方法如圖：
在公共模塊中新建function.php
在自己的手機端訪問，就能獲取access_token;
[php] view plain copy
[php] view plain copy
設計不是簡單的迎合消費者的需求，而是引導他們消費，不光是美化生活，更重要的是創造一種生活方式，與其說是設計一件產品，不如說是設計了一種生活方式。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在 JavaScript 中
如果我們有一個對象
二者的作用完全一樣，知識接受 參數 的方式不太一樣。
在 Javascript 中，多次
三種方法的作用
call、apply 和 bind 是 Function 對象自帶的三個方法，都是為了改變函數體內部 this 的指向。
call、apply 和 bind 三者第一個參數都是 this 要指向的對象，也就是想指定的上下文。
call、apply 和 bind 三者都可以利用后續參數傳參。
bind 是返回對應 函數，便于稍后調用；apply 、call 則是立即調用 。
舉個栗子
function fruits() {}
fruits.prototype = {
color: 'red',
say: function() { console.log('My color is ' + this.color);
}
} var apple = new fruits;
apple.say(); // 此時方法里面的this 指的是fruits // 結果： My color is red
banana= {color : 'yellow'} ,我們不想重新定義 say 方法，那么我們可以通過 call 或 apply 用 apple 的 say 方法：
var banana = { color: 'yellow' };
apple.say.call(banana); // 此時的this的指向已經同過call（）方法改變了，指向的是banana，this.color就是banana.color='yellow'; // 結果是My color is yellow
apple.say.apply(banana); // 同理，此時的this的指向已經同過apply（）方法改變了，指向的是banana，this.color就是banana.color ='yellow'; // 結果是My color is yellow
apple.say.apply(null); // null是window下的，此時，this 就指向了window ，但是window下并沒有clolr這個屬性，因此this.clolr就是window.color=undefined; // 結果是My color is undefined
call 和 apply 的區別
call 是把參數按順序傳遞進去，而 apply 則是把參數放在 數組 里面。
var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); // 這里用 call 第二個參數不會把 array2 當成一個數組,而是一個元素 // 等價于 array1.push("'Doe' , 555 , 100"); // array1.length=5; Array.prototype.push.apply(array1, array2); // 這里用 apply 第二個參數是一個數組 // 等價于: array1.push('Doe' , 555 , 100); // array1.length=7;
類（偽）數組使用數組方法
var divElements = document.getElementsByTagName('div'); // 雖然 divElements 有 length 屬性，但是他是一個偽數組，不能使用數組里面的方法 Array.isArray(divElements);// false var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); // 將數組對象 Array 里的 this 指向偽數組 document.getElementsByTagName('div')， // slice() 方法可從已有的數組中返回選定的元素，不傳參數是，返回整個數組 Array.isArray(domNodes);// true
驗證一個對象的類型可以用
Object.prototype.toString.call(obj)
bind() 方法
bind() 方法會創建一個 新函數，稱為綁定函數，當調用這個綁定函數時，綁定函數會以創建它時傳入 bind() 方法的第一個參數 作為 this，傳入 bind() 方法的 第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。
注意：bind()方法創建的函數不會立即調用，在下面的例子中，最后 func（） 才調用了函數，這是它與 call和apply的區別。
var bar = function(){ console.log(this.x);
} var foo = {
x:3 }
bar(); // undefined var func = bar.bind(foo); //此時this已經指向了foo，但是用bind（）方法并不會立即執行，而是創建一個新函數，如果要直接調用的話 可以bar.bind(foo)（） func(); // 3
bind() 是無效的。更深層次的原因， bind() 的實現，相當于使用函數在內部包了一個 call / apply ，第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的。
var bar = function(){ console.log(this.x);
} var foo = {
x:3 } var sed = {
x:4 } var func = bar.bind(foo).bind(sed);
func(); //3 var fiv = {
x:5 } var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近學習了Flex布局，
以下是阮一峰老師關于Flex的博客 。在此感謝他讓我get一項新技能！
Flex實戰篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
1、色子數：1
思路：讓圓點（即子元素）在橫軸上居中在豎軸上居中，分別用justify-content和align-items
實現代碼：
思路：豎列布局且在主軸方向采用justify-content的兩端對齊布局，這樣兩個圓點會在左邊呈現，然后采用align-items讓其居中
實現代碼：
思路：用到align-self屬性讓第二個和第三個圓點有自己的屬性設置，分別在縱軸方向上居中和低端對齊
實現代碼：
思路：先豎著放兩行圓點，每行圓點里橫著放兩個圓點，所以最外層父元素設置align，里面的父元素設置justify-content
實現代碼：
實現代碼：
思路：跟四點的一樣，先豎放三行在每行橫放兩個圓點
實現代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 200px; height: 200px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; justify-content: center; align-items:center; } .main >div{ width:40px; height:40px; background:#000; border-radius:40px; } </style>
</head>
<body>
<div class="main">
<div class="item"></div>
</div>
</body>
</html>
2、色子數：2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 200px; height: 200px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items:center; } .main >div{ width:40px; height:40px; background:#000; border-radius:40px; } </style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
3、色子數：3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 180px; height: 180px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; } .main >div{ width:40px; height:40px; background:#000; border-radius:40px; } .item:nth-child(2){ align-self:center; } .item:nth-child(3){ align-self:flex-end; } </style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
4、色子數：4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 180px; height: 180px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; flex-wrap:wrap; align-content:space-between; } .column >div{ width:40px; height:40px; background:#000; border-radius:40px; } .column{ flex-basis:100%; display:flex; justify-content: space-between; } </style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
5、色子數：5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 180px; height: 180px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; flex-wrap:wrap; align-content:space-between; } .column > div{ width:40px; height:40px; background:#000; border-radius:40px; } .column{ flex-basis:100%; display:flex; justify-content: space-between; } .column:nth-child(2){ justify-content: center; } </style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
6、色子數：6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> *{ margin:0; padding:0; } body{ background:#000; } .main { width: 180px; height: 180px; background: #fff; border-radius: 20px; margin: 100px auto; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; align-content:space-between; flex-wrap:wrap; } .column > div{ width:40px; height:40px; background:#000; border-radius:40px; } .column{ flex-basis:100%; display:flex; justify-content: space-between; } </style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Facebook是一個連接全球數十億人的社交工具。 面對這一視覺系統，設計師遇到了前所未有的挑戰
雖然每個工具都能很好地履行其預期的功能，但它們并沒有提供令人滿意的整體經驗。設計的UI模式，使用顏色和圖像每個產品都是不同的。整體看起來不僅過時，而且與Facebook的這些專業人士在個人生活中使用也脫離聯系。
我們希望制作出一致，令人滿意的用戶體驗，值得我們的商業產品為公司和人們喜歡。我們還希望通過改進他們所依賴的工具來展示我們對這些業務的承諾。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
HTML5引入了應用程序緩存，意味web應用可以進行緩存，在沒有網絡的情況下使用
應用程序緩存為應用帶來的三大優勢：
離線訪問應用
速度更快——已緩存資源加載的更快
減少服務器負載——瀏覽器只從服務器下載更新過或更改過的資源
瀏覽器支持情況：主流瀏覽器都支持，IE要10以上的版本
HTML5通過在html文件添加manifest屬性，啟用應用程序緩存
例子：
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
...
</html>
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。
manifest 文件的建議的文件擴展名是：".appcache"。
manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
Mainifest文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
例子：
CACHE MANIFEST
# 2012-02-21 v1.0.0
CACHE:
cached.js
cached.css
NETWORK:
uncached.js
uncached.css
FALLBACK:
index.html 404.html
CACHE MANIFEST 寫在manifest文件開頭，是必須的
CACHE作用是標識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑
NETWORK可選，這一部分是要直接讀取的文件，可以使用通配符 * 。
FALLBACK可選，指定了一個后備頁面，當資源無法訪問時，瀏覽器會使用該頁面。
在線的情況下，瀏覽器發現html頭部有manifest屬性,會請求manifest文件，如果是第一次訪問應用，瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過應用并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
注意：
1.服務器對離線的資源進行了更新，那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest文件的話，瀏覽器并不會重新下載資源，也就是說還是使用原來離線存儲的資源。
2.manifest文件進行緩存的時候需要十分小心，因為可能出現一種情況就是你對manifest文件進行了更新，但是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過期，這個情況下瀏覽器還是使用原來的manifest文件，所以對于manifest文件最好不要設置緩存。
3.如果更新中某個資源下載失敗，則整個更新就視作失敗，瀏覽器會依舊采用原來的資源
4.站點離線存儲的容量限制是5M
瀏覽器在下載manifest文件中的資源的時候，它會一次性下載所有資源，如果某個資源由于某種原因下載失敗，那么這次的所有更新就算是失敗的，瀏覽器還是會使用原來的資源。
window.applicationCache對象常用事件
1. oncached:當離線資源存儲完成之后觸發這個事件
2. onchecking:當瀏覽器對離線存儲資源進行更新檢查的時候會觸發這個事件
3. ondownloading:當瀏覽器開始下載離線資源的時候會觸發這個事件
4. onprogress:當瀏覽器在下載每一個資源的時候會觸發這個事件，每下載一個資源就會觸發一次。
5. onupdateready:當瀏覽器對離線資源更新完成之后會觸發這個事件
6. onnoupdate:當瀏覽器檢查更新之后發現沒有資源更新的時候觸發這個事件
最后一點是該特性已經從web標準刪除，可能在未來某個時間停止，推薦使用Service Workers 代替。
移動端列表索引效果非常實用，比如：手機通訊錄。你可以根據字母來查找對應的內容。下面這個例子我是參考了 MUI 里的列表索引效果，寫出來的代碼，代碼的結構基本一樣，但功能會少一些，去掉了搜索框搜索，只有單純的字母索引，不過這也基本夠用了。這個效果是基于 jQuery 庫的，所以在用的時候就記得引入 jQuery 庫。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間?？梢允褂脗陕犉鱽眍A訂事件，以便事件發生時執行相應的代碼。
示例：
如果點擊容器#btn，則彈出的順序是：btn-content-document；如果點擊的是容器#content，則彈出的是content-document；如果點擊的是document，彈出的是document。
由此可以看出JavaScript的事件流機制
前面說過，IE提出的是冒泡流，而網景提出的是捕獲流，后來在W3C組織的統一之下，JS支持了冒泡流和捕獲流，但是目前低版本的IE瀏覽器還是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以為了能夠兼容更多的瀏覽器，建議大家使用冒泡流。
JS事件流原理圖如下：
示例：
這個時候，如果點擊一下textSpan這個元素，控制臺會打印出這樣的內容：
從上面所畫的事件傳播的過程能夠看出來，當點擊鼠標后，會先發生事件的捕獲
· 捕獲階段：首先window會獲捕獲到事件，之后document、documentElement、body會捕獲到，再之后就是在body中DOM元素一層一層的捕獲到事件，有wrapDiv、innerP。
· 目標階段：真正點擊的元素textSpan的事件發生了兩次，因為在上面的JavaScript代碼中，textSapn既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發生了兩次。但是這里有一點是需要注意，在目標階段并不一定先發生在捕獲階段所綁定的事件，而是先綁定的事件發生，一會會解釋一下。
· 冒泡階段：會和捕獲階段相反的步驟將事件一步一步的冒泡到window
上述代碼中的兩個屬性：e.target和e.currentTarget
target和currentTarget都是event上面的屬性，target是真正發生事件的DOM元素，而currentTarget是當前事件發生在哪個DOM元素上。
可以結合控制臺打印出來的信息理解下，目標階段也就是 target == currentTarget的時候。我沒有打印它們兩個因為太長了，所以打印了它們的nodeName，但是由于window沒有nodeName這個屬性，所以是undefined。
那可能有一個疑問，我們不用addEventListener綁定的事件會發生在哪個階段呢，我們來一個測試，順便再演示一下我在上面的目標階段所說的目標階段并不一定先發生捕獲階段所綁定的事件是怎么一回事。
控制臺打印如下：
· textSpan是被點擊的元素，也就是目標元素，所有在textSpan上綁定的事件都會發生在目標階段，在綁定捕獲代碼之前寫了綁定的冒泡階段的代碼，所以在目標元素上就不會遵守先發生捕獲后發生冒泡這一規則，而是先綁定的事件先發生。
· 由于wrapDiv不是目標元素，所以它上面綁定的事件會遵守先發生捕獲后發生冒泡的規則。所以很明顯用onclick直接綁定的事件發生在了冒泡階段。
1、直接獲取元素綁定：
優點：簡單和穩定，可以確保它在你使用的不同瀏覽器中運作一致；處理事件時，this關鍵字引用的是當前元素，這很有幫助。
缺點：只會在事件冒泡中運行；一個元素一次只能綁定一個事件處理函數，新綁定的事件處理函數會覆蓋舊的事件處理函數；事件對象參數(e)僅非IE瀏覽器可用。
2、直接在元素里面使用事件屬性
3、W3C方法：
優點：該方法同時支持事件處理的捕獲和冒泡階段；事件階段取決于addEventListener最后的參數設置：false (冒泡) 或 true (捕獲)；在事件處理函數內部，this關鍵字引用當前元素；事件對象總是可以通過處理函數的第一個參數(e)捕獲；可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件
缺點：IE不支持，你必須使用IE的attachEvent函數替代。
IE下的方法：
優點：可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件。
注意：不是意味這低版本的ie沒有事件捕獲，它也是先發生事件捕獲，再發生事件冒泡，只不過這個過程無法通過程序控制。
通用：
IE:
在支持addEventListener()的瀏覽器中，可以調用事件對象的stopPropagation()方法以阻止事件的繼續傳播。如果在同一對象上定義了其他處理程序，剩下的處理程序將依舊被調用，但調用stopPropagation()之后任何其他對象上的事件處理程序將不會被調用。不僅可以阻止事件在冒泡階段的傳播，還能阻止事件在捕獲階段的傳播。
IE9之前的IE不支持stopPropagation()方法，而是設置事件對象cancelBubble屬性為true來實現阻止事件進一步傳播。
實際上我們點擊的是textSpan，但是由于在捕獲階段事件就被阻止了傳播，所以在textSpan上綁定的事件根本就沒有發生，冒泡階段綁定的事件自然也不會發生，因為阻止事件在捕獲階段傳播的特性，e.stopPropagation()很少用到在捕獲階段去阻止事件的傳播，大家就以為e.stopPropagation()只能阻止事件在冒泡階段傳播。
e.preventDefault()可以阻止事件的默認行為發生，默認行為是指：點擊a標簽就轉跳到其他頁面、拖拽一個圖片到瀏覽器會自動打開、點擊表單的提交按鈕會提交表單等等，因為有的時候我們并不希望發生這些事情，所以需要阻止默認行為。
IE9之前的IE中，可以通過設置事件對象的returnValue屬性為false達到同樣的效果。
在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能。導致這一問題的原因是多方面的。首先，每個函數都是對象，都會占用內存；內存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導致的DOM訪問次數，會延遲整個頁面的交互就緒時間。
對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。
如果點擊頁面中的li元素，然后輸出li當中的顏色，我們通常會這樣寫:
利用事件流的特性，我們只綁定一個事件處理函數也可以完成：
事件委托還有一個好處就是添加進來的元素也能綁定事件：
沒有使用事件委托：
使用了事件委托：
1事件流
事件流的起源：就是在瀏覽器發展到第四代的時候，瀏覽器開發團隊遇到一個問題：頁面的哪一部分會擁有某個特定的事件？要明白這個問題問的是什么，可以想象畫在一張紙上的一組同心圓。如果你把手指放在圓心上，那么你的手指指向的不是一個圓，而是紙上的所有圓。也就是說如果單擊了頁面的某個按鈕，同時也單擊了按鈕的容器元素，甚至單擊了整個頁面。不過呢，IE提出的是冒泡流，而網景提出的是捕獲流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <style type="text/css"> #content{width: 150px;height: 150px;background-color: red;} #btn{width: 80px;height: 80px;background-color: green;} </style> </head> <body> <div id="content">content <div id="btn">button</div> </div> <script type="text/javascript"> var content = document.getElementById("content"); var btn = document.getElementById('btn');
btn.onclick = function(){ alert("btn");
};
content.onclick = function(){ alert("content");
};
document.onclick = function(){ alert("document");
} </script> </body> </html>
2事件冒泡與事件捕獲
由此可以知道：
1、一個完整的JS事件流是從window開始，最后回到window的一個過程
2、事件流被分為三個階段(1~5)捕獲過程、(5~6)目標過程、(6~10)冒泡過程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrapDiv, #innerP, #textSpan{ margin: 5px;padding: 5px;box-sizing: border-box;cursor: default; } #wrapDiv{ width: 300px;height: 300px;border: indianred 3px solid; } #innerP{ width: 200px;height: 200px;border: hotpink 3px solid; } #textSpan{ display: block;width: 100px;height: 100px;border: orange 3px solid; } </style> </head> <body> <div id="wrapDiv">wrapDiv <p id="innerP">innerP <span id="textSpan">textSpan</span> </p> </div> <script> var wrapDiv = document.getElementById("wrapDiv"); var innerP = document.getElementById("innerP"); var textSpan = document.getElementById("textSpan"); // 捕獲階段綁定事件 window.addEventListener("click", function(e){ console.log("window 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.addEventListener("click", function(e){ console.log("document 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.documentElement.addEventListener("click", function(e){ console.log("documentElement 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.body.addEventListener("click", function(e){ console.log("body 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
wrapDiv.addEventListener("click", function(e){ console.log("wrapDiv 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
innerP.addEventListener("click", function(e){ console.log("innerP 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true);
textSpan.addEventListener("click", function(e){ console.log("textSpan 捕獲", e.target.nodeName, e.currentTarget.nodeName);
}, true); // 冒泡階段綁定的事件 window.addEventListener("click", function(e){ console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.addEventListener("click", function(e){ console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.documentElement.addEventListener("click", function(e){ console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.body.addEventListener("click", function(e){ console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
wrapDiv.addEventListener("click", function(e){ console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
innerP.addEventListener("click", function(e){ console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
textSpan.addEventListener("click", function(e){ console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false); </script> </body> </html>
<script>
var wrapDiv = document.getElementById("wrapDiv"); var innerP = document.getElementById("innerP"); var textSpan = document.getElementById("textSpan"); // 測試直接綁定的事件到底發生在哪個階段
wrapDiv.onclick = function(){
console.log("wrapDiv onclick 測試直接綁定的事件到底發生在哪個階段")
}; // 捕獲階段綁定事件
window.addEventListener("click", function(e){
console.log("window 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.addEventListener("click", function(e){
console.log("document 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.documentElement.addEventListener("click", function(e){
console.log("documentElement 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.body.addEventListener("click", function(e){
console.log("body 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); innerP.addEventListener("click", function(e){
console.log("innerP 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); textSpan.addEventListener("click", function(){
console.log("textSpan 冒泡 在捕獲之前綁定的")
}, false); textSpan.onclick = function(){
console.log("textSpan onclick")
}; textSpan.addEventListener("click", function(e){
console.log("textSpan 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); // 冒泡階段綁定的事件
window.addEventListener("click", function(e){
console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.addEventListener("click", function(e){
console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.documentElement.addEventListener("click", function(e){
console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.body.addEventListener("click", function(e){
console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); innerP.addEventListener("click", function(e){
console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); textSpan.addEventListener("click", function(e){
console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); </script>
[在目標元素上就不會遵守先發生捕獲后發生冒泡這一規則，而是先綁定的事件先發生。]
3事件綁定
element.onclick = function(e){
// ... };
element.addEventListener('click', function(e){
// ... }, false);
element.attachEvent('onclick', function(){
// ... });
缺點：IE僅支持事件捕獲的冒泡階段；事件監聽函數內的this關鍵字指向了window對象，而不是當前元素（IE的一個巨大缺點）；事件對象僅存在與window.event參數中；事件必須以ontype的形式命名，比如，onclick而非click；僅IE可用，你必須在非IE瀏覽器中使用W3C的addEventListener。
4解除事件
element.removeEventListener('click', function(e){
// ... }, false);
element.detachEvent('onclick', function(){
// ... });
5阻止事件傳播
<script>
var wrapDiv = document.getElementById("wrapDiv"); var innerP = document.getElementById("innerP"); var textSpan = document.getElementById("textSpan"); // 測試直接綁定的事件到底發生在哪個階段
wrapDiv.onclick = function(){
console.log("wrapDiv onclick 測試直接綁定的事件到底發生在哪個階段")
}; // 捕獲階段綁定事件
window.addEventListener("click", function(e){
console.log("window 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.addEventListener("click", function(e){
console.log("document 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.documentElement.addEventListener("click", function(e){
console.log("documentElement 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); document.body.addEventListener("click", function(e){
console.log("body 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 捕獲", e.target.nodeName, e.currentTarget.nodeName); // 在捕獲階段阻止事件的傳播
e.stopPropagation(); }, true); innerP.addEventListener("click", function(e){
console.log("innerP 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); textSpan.addEventListener("click", function(){
console.log("textSpan 冒泡 在捕獲之前綁定的")
}, false); textSpan.onclick = function(){
console.log("textSpan onclick")
}; textSpan.addEventListener("click", function(e){
console.log("textSpan 捕獲", e.target.nodeName, e.currentTarget.nodeName); }, true); // 冒泡階段綁定的事件
window.addEventListener("click", function(e){
console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.addEventListener("click", function(e){
console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.documentElement.addEventListener("click", function(e){
console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.body.addEventListener("click", function(e){
console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); innerP.addEventListener("click", function(e){
console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); textSpan.addEventListener("click", function(e){
console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); </script>
6阻止事件的默認行為
function cancelHandler(event){ var event=event||window.event;//兼容IE //取消事件相關的默認行為 if(event.preventDefault) //標準技術 event.preventDefault(); if(event.returnValue) //兼容IE9之前的IE event.returnValue=false; return false; //用于處理使用對象屬性注冊的處理程序 }
7事件委托
在父級上定義了函數，當點擊目標時，會向上冒泡，到父級執行操作。每一個子元素，都會統一冒泡到父級然后執行。
<ul id="color-list"> <li>red</li> <li>yellow</li> <li>blue</li> <li>green</li> <li>black</li> <li>white</li> </ul>
(function(){
var color_list = document.getElementById('color-list'); var colors = color_list.getElementsByTagName('li'); for(var i=0;i<colors.length;i++){ colors[i].addEventListener('click',showColor,false); }; function showColor(e){
var x = e.target; alert("The color is " + x.innerHTML); }; })();
(function(){
var color_list = document.getElementById('color-list'); color_list.addEventListener('click',showColor,false); function showColor(e){
var x = e.target; if(x.nodeName.toLowerCase() === 'li'){
alert('The color is ' + x.innerHTML); } } })();
<body> <ul id="thl"> <li>001</li> <li>002</li> <li>003</li> </ul> <button onclick="fun()">touch</button> <script> var thl= document.getElementById('thl'); var aLi = thl.getElementsByTagName('li'); for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = fn;
} function fn (){ console.log(this.innerHTML);
} function fun(){ var node=document.createElement("li"); var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("thl").appendChild(node);
} </script> </body>
<script> var thl= document.getElementById('thl');
thl.onclick = function(ev) { ev = ev || event; //兼容處理 var target = ev.target || ev.srcElement; //找到li元素 if (target.nodeName.toLowerCase() == 'li') {
console.log(target.innerHTML);
}
}; function fun(){ var node=document.createElement("li"); var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("thl").appendChild(node);
} </script>
藍藍設計的小編 http://www.syprn.cn