|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于JavaScript中事件模型的詳解（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。 事件 用戶與網頁交互是通過事件實現的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統一的規范，直到 DOM2 級，網景和 IE 才開始有各自的 API 規范。 對于事件的觸發機制，兩個公司都認為頁面的觸發機制并不只是點擊了某個元素，就只觸發當前目標元素的事件。 比方說：頁面有多個同心圓，當點擊最里面的圓時，你其實也點擊了包含這個圓外面的那些圓。 兩個公司對這點的認同是一致的，但是事件流的傳播順序上采用了不同的兩種方案來實現，即事件冒泡和事件捕獲。 一、事件冒泡IE 瀏覽器從老版本開始就一直支持事件冒泡機制，所謂事件冒泡，指事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。 就是從目標元素傳播到父級元素。 <body>
<div id="parent">
<div id="child"></div>
</div>
<script>
function childEventHandler(event) {
console.log(this);
console.log("child 被點擊了");
}
function parentEventHandler(event) {
console.log(this);
console.log("parent 被點擊了");
}
function bodyEventHandler(event) {
console.log(this);
console.log("body 被點擊了");
}
function htmlEventHandler(event) {
console.log(this);
console.log("html 被點擊了");
}
function documentEventHandler(event) {
console.log(this);
console.log("document 被點擊了");
}
function windowEventHandler(event) {
console.log(this);
console.log("window 被點擊了");
}
var bodyEl = document.getElementsByTagName("body")[0];
var htmlEl = document.getElementsByTagName("html")[0];
var win = window;
var parentEl = document.getElementById("parent");
var childEl = document.getElementById("child");
childEl.onclick = childEventHandler;
parentEl.onclick = parentEventHandler;
bodyEl.onclick = bodyEventHandler;
htmlEl.onclick = htmlEventHandler;
document.onclick = documentEventHandler;
win.onclick = windowEventHandler;
</script>
</body>如下圖所示，如果點擊了 id 為 child 的元素后，事件流會從 child 一直傳播到 window 對象。
所有現代瀏覽器都支持事件冒泡。 二、事件捕獲由網景公司主導的事件捕獲則剛好和事件冒泡相反，事件流開始從不具體的元素觸發，然后傳播到具體的元素上。簡而言之就是從父級元素傳播到目標元素。
由于事件捕獲是從 IE 9開始支持，不兼容老版本瀏覽器，所以使用的人比較少。 三、事件流DOM 規定事件包括三個階段，事件捕獲，處于目標階段、事件冒泡。 從 IE 9 開始的瀏覽器規定，事件流的順序先是事件捕獲，會截獲到事件，然后是處于目標階段，實際的目標接收到事件，最后是事件冒泡，可以在這個階段對事件進行響應。 以之前的 child 元素為例，直到 child 元素接收到事件前（從 window 到 parent），都是事件捕獲階段。到了 child 元素，此時對事件進行處理，隨后冒泡到 window 對象上，冒泡階段也是可以對事件進行處理的。 基于事件冒泡能對事件進行處理的特點，隨后將講到與其有關的事件委托機制。
四、事件綁定HTML 與 事件的綁定有三種形式： 1.
<div id="child" onclick="console.log('hello');"></div>
2.
var childEl = document.getElementById("child");
childEl.onclick = function() {
console.log('hello');
}
3.
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
console.log('hello');
}, false);JavaScript 是單線程的語言，在遇到元素有事件觸發時，會在事件隊列中尋找有沒有與這個事件綁定的函數，如果沒有則什么都不做，如果有，則將該函數放到事件隊列的前面，等待主線程事件執行完畢后執行。 上述代碼第一種綁定，將事件寫在 html 中，表現和行為沒有解耦，是不建議這樣寫代碼的。 第二種綁定，將事件綁定在元素對象上，這種寫法主要是容易發生事件的覆蓋。 第三種綁定，首先，第三個參數為布爾值，默認為 false, 表示在事件冒泡階段調用事件處理程序，如果為 true, 則表示在事件捕獲階段調用事件處理函數。 當我們想處理完一次事件后，將不想在處理該元素的事件綁定時，應該將元素的事件綁定置為空，如果容易發生內存泄漏。 第一種寫法：
childEl.onclick = null;
第三種寫法：
function eventHandler() {
console.log('hello');
}
childEl.addEventListener('click', eventHandler, false);
childEl.removeEventListener('click', eventHandler, false);五、事件委托（事件代理）事件委托是利用事件冒泡的性質，事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。 首先，假如有一個列表 ul，每個列表元素 li 點擊會觸發事件處理程序，顯然，如果一個一個地給元素綁定事件, 效率肯定不好。 與此同時，當新增一個元素時，事件不見得會綁定成功。一起來看： <ul id="menu">
<li class="menu-item">menu-1</li>
<li class="menu-item">menu-2</li>
<li class="menu-item">menu-3</li>
<li class="menu-item">menu-4</li>
</ul>
<input type="button" name="" id="addBtn" value="添加" />
<script>
window.onload = function() {
var menu = document.getElementById("menu");
var item = menu.getElementsByClassName('menu-item');
for (var i = 0; i < item.length; i++) {
item[i].onclick = (function(i) {
return function() {
console.log(i);
}
}(i))
}
var addBtnEl = document.getElementById("addBtn");
addBtnEl.onclick = function() {
var newEl = document.createElement('li');
newEl.innerHTML = "menu-new"
menu.appendChild(newEl);
}
}
</script>新增加的 menu-new，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。 我們通過事件委托的思路來想，事件流的傳播，目標元素本身依然會有事件，但同時，冒泡出去后，更高層次的 dom 也能處理事件程序。那么，我們只需要給高層次節點綁定事件，通過判斷具體是觸發的哪個子節點，再做相應的事件處理。 <ul id="menu">
<li class="menu-item">menu-1</li>
<li class="menu-item">menu-2</li>
<li class="menu-item">menu-3</li>
<li class="menu-item">menu-4</li>
</ul>
<input type="button" name="" id="addBtn" value="添加" />
<script>
window.onload = function() {
var menu = document.getElementById("menu");
menu.onclick = function(event) {
var e = event || window.event;
var target = e.target || e.srcElement;
console.log(e);
switch (target.textContent) {
case "menu-1":
console.log("menu-1 被點擊了");
break;
case "menu-2":
console.log("menu-2 被點擊了");
break;
case "menu-3":
console.log("menu-3 被點擊了");
break;
case "menu-4":
console.log("menu-4 被點擊了");
break;
case "menu-new":
console.log("menu-new 被點擊了");
break;
}
}
var addBtnEl = document.getElementById("addBtn");
addBtnEl.onclick = function() {
var newEl = document.createElement('li');
newEl.innerHTML = "menu-new"
menu.appendChild(newEl);
}
}
</script>menu 列表的每個子菜單元素的事件都能正確響應，新增的 menu-new 同樣也能正確響應事件。 事件委托的好處在于，我們不用給每個元素都一一地手動添加綁定事件，避免重復低效的工作。 其次，事件委托更少得獲取 dom, 初始化元素對象和事件函數，能有效減少內存占用。 每當將事件程序指定給元素時，html 代碼和 js 代碼之間就建立了一個連接，這種連接越多，網頁就執行起來越慢，所以事件委托能有效減少連接樹，提高網頁性能。 總結用戶與網頁的交互是通過事件進行的，事件模型分為事件冒泡和事件捕獲，事件冒泡的兼容性更好，應用更廣，同時通過事件冒泡，可以建立事件委托，提升網頁性能。 以上就是JavaScript中事件模型的詳解（代碼示例）的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
