溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript常見事件對象與操作。分享給大家供大家參考，具體如下：
觸發 DOM 上的事件時，會生成一個事件對象 event，它包含著所有與事件有關的信息，諸如導致事件的元素、事件的類型以及其他與特定事件相關的信息。所有的瀏覽器都支持 event 對象，但支持的方式不同。
1 DOM 中的事件對象
兼容 DOM 的瀏覽器會將 event 對象傳入事件處理程序（DOM0 級與 DOM2 級都支持）：
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
console.log(event.type);//"click"
};
btn.addEventListener("click",function(event){
console.log(event.type);//"click"
,false};
event.type 保存的是被觸發的事件類型。
通過 HTML 屬性指定事件處理程序時， event 中保存的是 event 對象：
<input type="button" value="Click Me" onclick="alert(event.type)"/>
event 對象包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| bubbles | Boolean | 只讀 | 事件是否冒泡。 |
| cancelable | Boolean | 只讀 | 是否可以取消事件的默認行為。 |
| currentTarget | Element | 只讀 | 與當前事件處理程序相關的元素。 |
| defaultPrevented | Boolean | 只讀 | true 表示已調用 preventDefault() 方法（DOM3 新增）。 |
| detail | Integer | 只讀 | 與事件相關的細節信息。 |
| eventPhase | Integer | 只讀 | 調用事件處理程序的階段；1：捕獲；2：處于目標；3：冒泡。 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為（如果 cancelable 為 true，就可以調用這個方法）。 |
| stopImmediatePropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡，同時阻止任何事件處理程序被調用（DOM3 新增）。 |
| stopPropagation() | Function | 只讀 | 阻止事件被進一步捕獲或者冒泡（如果 bubbles 為 true，就可以調用這個方法）。 |
| target | Element | 只讀 | 事件的目標。 |
| trusted | Boolean | 只讀 | true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創建的（DOM3 新增）。 |
| type | String | 只讀 | 被觸發的事件類型。 |
| view | AbstractView | 只讀 | 與事件相關的抽象視圖，相當于發生事件的 window 對象。 |
在事件處理程序內部，this 始終等于 currentTarget，而 target 等于事件的實際目標。如果直接將事件處理程序指定給目標元素，那么這三個值相等：
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
console.log(event.currentTarget === this);//true
console.log(event.target === this);//true
}
</script>
如果事件處理程序指定到按鈕的父節點上，那么它們是不同的：
<script type="text/javascript">
document.body.onclick = function (event) {
console.log(event.currentTarget === document.body);//true
console.log(this === document.body);//true
console.log(event.target === document.getElementById("myBtn"));//true
}
</script>
如果需要通過一個函數來處理多個事件，那么可以使用 type 屬性：
<script type="text/javascript">
var btn = document.getElementById("myBtn");
var handler = function (event) {
switch (event.type) {
case "click":
console.log("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
</script>
使用 preventDefault() 方法來阻止特定事件的默認行為：
<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點我</a>
<script type="text/javascript">
var link = document.getElementById("myLink");
link.onclick = function (event) {
event.preventDefault();
}
</script>
注意：只有 cancelable 屬性值為 true 的事件，才可以使用 preventDefault() 阻止特定事件的默認行為！
stopPropagation() 會立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調用 stopPropagation() ，來避免觸發注冊在 document.body 上的事件處理程序：
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
console.log("Clicked");
event.stopPropagation();
};
document.body.onclick = function (event) {
console.log("Body clicked");
};
</script>
eventPhase 屬性，可以確定事件當前正處于事件流的哪一個階段：
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
console.log(event.eventPhase);//2
};
document.body.addEventListener("click", function (event) {
console.log(event.eventPhase);//1
}, true);//true 表示捕獲階段
document.body.onclick = function (event) {
console.log(event.eventPhase);//3
};
</script>
注意： 只有在事件處理程序執行期間，event 對象才會存在；一旦事件處理程序執行結束，event 對象就會被銷毀！
2 IE 中的事件對象
在使用 DOM0 級方法添加事件處理程序時，event 對象是作為 window 對象的一個屬性存在：
var btn = document.getElementById("myBtn");
btn.onclick = function () {
var event = window.event;
console.log(event.type);//"click"
};
如果是通過 HTML 屬性指定的事件處理程序，也跟 DOM一樣，可以通過 event 變量來訪問 event 對象。
IE 的 event 對象也包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：
| 屬性 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| cancelBubble | Boolean | 讀/寫 | 默認值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。 |
| returnValue | Boolean | 讀/寫 | 默認值為 true，false 表示取消事件默認行為（同 DOM 的 preventDefault() ）。 |
| srcElement | Element | 只讀 | 事件的目標（同 DOM 中的 target）。 |
| type | String | 只讀 | 被觸發的事件類型。 |
因為事件處理程序的作用域是根據它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標比較靠譜：
<button id="myBtn">點我</button>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function () {
console.log(window.event.srcElement === this);//true
};
btn.attachEvent("onclick", function (event) {
console.log(event.srcElement === this);//false
});
</script>
將 returnValue 設置為 false，就能阻止默認行為：
<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點我</a>
<script type="text/javascript">
var link = document.getElementById("myLink");
link.onclick = function () {
window.event.returnValue = false;
}
</script>
與 DOM 不同的是，這里沒有辦法確定事件是否能被取消。
因為 IE 不支持事件捕獲，所以只能取消事件冒泡：
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function () {
console.log("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function (event) {
console.log("Body clicked");
};
</script>
3 跨瀏覽器的事件對象
我們把之前的 EventUtil 對象進行增強：
var EventUtil = {
...
/**
* 返回對 event 對象的引用
* @param event
* @returns {*}
*/
getEvent: function (event) {
return event ? event : window.event;
},
/**
* 返回事件的目標
* @param event
* @returns {*|elem|Object}
*/
getTarget: function (event) {
return event.target || event.srcElement;
},
/**
* 取消事件默認行為
* @param event
*/
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
/**
* 阻止事件流
* @param event
*/
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
這樣使用：
<button id="myBtn">點我</button>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
event = EventUtil.getEvent(event);//確保所有瀏覽器都能使用 event 對象
var target = EventUtil.getTarget(event);
console.log(target);
}
</script>
取消事件默認行為：
<a id="myLink" rel="external nofollow" >點我</a>
<script type="text/javascript">
var link = document.getElementById("myLink");
link.onclick = function (event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
}
</script>
阻止事件傳播：
<button id="myBtn">點我</button>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
console.log("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function (event) {
console.log("Body clicked");
};
</script>
因為 IE 不支持事件捕獲，所以 EventUtil 的 stopPropagation() 的方法只能阻止事件冒泡。
PS：關于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
