首頁 > 開發者 > JavaScript
標籤：
JavaScript 事件的一個重要方面是它們擁有一些相對一致的特點，可以給你的開發提供更多的強大功能。
最方便和強大的就是事件對象，他們可以幫你處理滑鼠事件和鍵盤敲擊方面的情況，此外還可以修改一般事件的捕獲/冒泡流的函數。
一、事件處理三部分組成
對象.事件處理函數=函數。例如：單擊文檔任意處。
click 表示一個事件類型，單擊。
onclick 表示一個事件處理函數或綁定對象的屬性(或者叫事件監聽器、接聽程式)。
document 表示一個綁定的對象，用於觸發某個元素地區。
function()匿名函數是被執行的函數，用於觸發後執行。
<script type="text/javascript"> window.onload = function(){ document.onclick = function () { alert(‘Lee‘); }; };</script>
除了用匿名函數的方法作為被執行的函數，也可以設定成獨立的函數。
<script type="text/javascript"> function box() { alert(‘Lee‘); } window.onload = function(){ document.onclick = box; };</script>
二、this 關鍵字和上下文
在一個對象裡，由於範圍的關係，this 代表著離它最近對象。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName(‘input‘)[0]; input.onclick = function () { alert(this); //HTMLInputElement，this 表示 input 對象 }; };</script></head><body> <input type="button" value="按鈕"/></body>
<script type="text/javascript"> function box(){ alert(this); //HTMLInputElement，this 表示 input 對象 }; box(); //[object Window]如果是在全域範圍調用box()那麼this代表window window.onload = function(){ var input = document.getElementsByTagName(‘input‘)[0]; input.onclick = box; };</script></head><body> <input type="button" value="按鈕"/></body>
三、事件對象（那麼事件對象是什嗎？它在哪裡呢？）
當觸發某個事件時，會產生一個事件對象，這個對象包含著所有與事件有關的資訊。
事件對象，我們一般稱作為 event 對象，這個對象是瀏覽器通過函數把這個對象作為參數傳遞過來的。
那麼首先，我們就必須驗證一下，在執行函數中沒有傳遞參數，是否可以得到隱藏的參數。
<script type="text/javascript"> function box(){ alert(arguments.length); //0，沒有得到任何傳遞的參數 }; box(); </script></head><body> <input type="button" value="按鈕"/></body>
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName(‘input‘)[0]; input.onclick = function(){ alert(arguments[0]); //[object MouseEvent]滑鼠事件對象 }; };</script></head><body> <input type="button" value="按鈕"/></body>
上面這種做法比較累，那麼比較簡單的做法是，直接通過接收參數來得到即可
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName(‘input‘)[0]; input.onclick = function (evt) { //接受 event 對象，名稱不一定非要 event alert(evt); //MouseEvent，滑鼠事件對象 }; };</script></head><body> <input type="button" value="按鈕"/></body>
直接接收 event 對象，是 W3C 的做法，IE 6,7,8不支援，IE 6,7,8自己定義了一個 event 對象，直接在 window.event 擷取即可。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName(‘input‘)[0]; input.onclick = function (evt) { var e = evt || window.event; //實現跨瀏覽器安全色擷取 event 對象 alert(e); }; };</script></head><body> <input type="button" value="按鈕"/></body>
JavaScript的事件對象_概述/this
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
