六.Js中的事件詳解
A 事件流（event flow ）
事件模型分爲兩種：冒泡型事件、捕獲型事件。
冒泡型（dubbed bubbling ）事件：指事件按照從最精確的對象到最不精確的對象的順序逐一觸發。
捕獲型（event capturing ）事件：它與冒泡型事件相反，指事件按照從最不精確的對象到最精確的對象的順序逐一觸發。
捕獲型事件也被稱作自頂向下（DOM層次）的事件模型。
由於IE 瀏覽器不支持捕獲型事件，因此並沒有被廣泛應用。
B 事件監聽
i > 通用監聽方法
示例一：
<p οnclick=“alert(‘點擊了’);“>Click Me</p>
示例二：
<html>
<head>
<title> demo </title>
<meta name=“Author“ content=“xugang“ />
<script type=”text/JavaScript”>
// 在onload 事件中添加所有標籤的事件
window.onload = function(){
// 找到對象
var o_p = document.getElementById(“myp“);
// 添加對象的onclick 事件
o_p.onclick = function(){
alert(“我被點擊了“);
}
}
</script>
</head>
<body>
<p id=“myp“>Click Me</p>
</body>
</html>
此代碼實現了結構與行爲的分離。
給瀏覽器添加監聽方法，分爲兩種：IE 中的監聽方法、標準DOM 的監聽方法。
ii > IE 中的監聽方法
在IE 瀏覽器中，每個元素都有兩個方法來處理事件的監聽。分別是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分離事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent(“onclick”,click_A);
示例：
<html>
<head>
<title> demo </title>
<meta name=“Author“ content=“xugang“ />
<script type=”text/JavaScript”>
<!–
function click_A(){
alert(“click_A“);
//刪除監聽函數
o_p.detachEvent(“onclick“,click_B);
}
function click_B(){
alert(“click_B, 我只調用一次。“);
}
var o_p;
window.onload = function(){
o_p = document.getElementById(“myP“);
// 添加監聽函數 click_A
o_p.attachEvent(“onclick“,click_A);
// 添加監聽函數 click_B
o_p.attachEvent(“onclick“,click_B);
}
//–>
</script>
</head>
<body>
<p id=“myP“>Click Me</p>
</body>
</html>
注意：
● 使用這種方式可以爲同一元素添加多個監聽函數；
● 在IE 瀏覽器中，函數的執行順序與函數的添加順序相反；
● 在IE 瀏覽器中，雖然函數有先後執行順序，但都會同時調用；
ii > 標準DOM 的監聽方法
在使用標準DOM 的瀏覽器中，每個元素也有兩個方法來處理事件的監聽。分別是：addEventListener( ) 和 removeEventListener( ) 。
添加事件監聽方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件監聽方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
這裏的“事件名”不能帶 on ，如：click（如果是onclick 則錯誤！）
“事件模型”爲boolean 類型，通常設置爲 false ，即“冒泡型”事件。（如果是true 則爲“捕獲型”事件）
示例：
<html>
<head>
<title> demo </title>
<meta name=“Author“ content=“xugang“ />
<script type=”text/javascript”>
<!–
function click_A(){
alert(“click_A“);
//刪除監聽函數
o_p.removeEventListener(“click“,click_B,false);
}
function click_B(){
alert(“被click_A刪除, 一次都不能調用。“);
}
var o_p;
window.onload = function(){
o_p = document.getElementById(“myP“);
// 添加監聽函數 click_A
o_p.addEventListener(“click“,click_A,false);
// 添加監聽函數 click_B
o_p.addEventListener(“click“,click_B,false);
}
//–>
</script>
</head>
<body>
<p id=“myP“>Click Me</p>
</body>
</html>
在Firefox 下運行通過，在IE 下報錯。
注意：
● 使用這種方式同樣可以爲同一元素添加多個監聽函數；
● 在Firefox 瀏覽器中，函數的執行順序與函數的添加順序一致（Firefox 與IE 正好相反）；
● 在Firefox 瀏覽器中，這種方式添加的函數是執行外一個再執行另一個（逐個執行）；
C 事件對象
i > 在IE 瀏覽器中，事件對象是window 對象的一個屬性event 。訪問方式如下：
function getEvent(){
var o_event = window.event;
}
event 對象在事件發生時被訪問，執行完函數後就消失了。
ii > 在標準的DOM 中，事件對象是作爲處理函數的唯一參數來獲得。訪問方式如下：
function getEvent(_event){
var o_event = _event
}
因此，爲了兼容各種瀏覽器，通常採用如下方法：
function getEvent(_event){
// Firefox下參數_event 就是event對象
// IE 下獲得 event對象
if(window.event)_event = window.event;
// 顯示觸發的事件名稱
alert(_event.type);
}
下面列出了事件常用的幾個屬性和方法（區別）：
IE 標準DOM 說明
cancelBubble cancelBubble 是否冒泡(標準DOM中只讀)
無 stopPropagation( ) 阻止事件向上冒泡的方法
無 charCode 按下按鍵的Unicode 值
keyCode keyCode IE 中keypress 事件時表示按鍵的Unicode 值；
標準DOM 中keypress 事件時爲0；
其餘情況下，keyCode 爲按鍵的數字代號。
srcElement target 觸發事件的元素(對象源)
type type 事件的名稱
此處只列出了事件成員的一小部分。
注意：
在IE 瀏覽器中，獲得觸發事件的對象源（HTML標籤）是通過event 對象的srcElement 屬性；
在標準的DOM 中，獲得觸發事件的對象源（HTML標籤）是通過event 對象的target 屬性；
獲取事件目標的示例：
<html>
<head>
<title>事件的目標</title>
<script language=”JavaScript”>
function handle(oEvent){
//處理兼容性，獲得事件對象
if(window.event) oEvent = window.event;
var oTarget;
//處理兼容性，獲取事件目標
if(oEvent.srcElement)
oTarget = oEvent.srcElement;
else oTarget = oEvent.target;
//彈出目標的標記名稱
alert(oTarget.tagName);
}
window.onload = function(){
var obj = document.getElementsByTagName(“a“)[0];
obj.onclick = handle;
}
</script>
</head>
<body>
<a href=“#“>獲得事件源的示例</a>
</body>
</html>
D 鍵盤事件
事件 說明
keydown 按下鍵盤上的某個鍵觸發。（一直按住某鍵則會持續觸發）
keypress 按下某個按鍵併產生字符時觸發。（即忽略Shift 、Alt 、Ctrl 等功能鍵）
keyup 釋放某個按鍵時觸發。
觸發的順序爲：keydown —> keypress —> keyup
i > 關於keyCode屬性和charCode 屬性
keyCode屬性： 表示鍵盤按鍵碼。因此輸入“a”字母和“A”字母時，都是顯示鍵盤碼 65 ；
charCode 屬性：表示輸入字符碼。因此輸入“a”字母和“A”字母時，
分別顯示 97（a 字符碼）和 65（A 字符碼）；
注意：
在標準的DOM 中：既有keyCode屬性，還有charCode 屬性。
但在標準的DOM 中，keypress 事件中keyCode 屬性值始終爲0 值；
在IE 瀏覽器中：事件對象只有keyCode屬性，沒有charCode 屬性。
但在IE 瀏覽器中，keypress 事件中的keyCode 屬性值等同於標準DOM 中的charCode 屬性的值；
示例代碼：
<html>
<head>
<title>鍵盤事件</title>
<script language=”JavaScript”>
function handle(oEvent){
if(window.event){
//處理兼容性，獲得事件對象
oEvent = window.event;
//設置IE的charCode值
oEvent.charCode = (oEvent.type == “keypress“) ? oEvent.keyCode : 0;
}
var oDiv = document.getElementById(“display“);
//輸出測試
oDiv.innerHTML += oEvent.type // 事件名稱
+ “: charCode:“ + oEvent.charCode // 字符碼 charCode
+ “ keyCode:“ + oEvent.keyCode + “<br>“; // 鍵盤碼 keyCode
}
window.onload = function(){
var oTextArea = document.getElementsByTagName(“textarea“)[0];
oTextArea.onkeypress = handle;
oTextArea.onkeydown = handle;
}
</script>
</head>
<body>
<textarea rows=“4“ cols=“50“></textarea>
<div id=“ display“></div>
</body>
</html>
ii > 屏蔽鼠標右鍵
方法一：
通過鼠標事件中，判斷event 對象的button 屬性值爲“2”來屏蔽鼠標右鍵。雖然這種方法在IE 瀏覽器中有效，但在標準的DOM 中無效。並且，鼠標事件中，button 屬性的值在IE 瀏覽器和標準的DOM 中大部分都不相同！
方法二：
其實，點擊鼠標右鍵會觸發右鍵菜單contextmenu 事件。
所以，屏蔽鼠標右鍵最有效的辦法就是屏蔽document 對象的contextmenu 事件。
代碼如下：
<html>
<head>
<title>屏蔽鼠標右鍵</title>
<script language=”javascript”>
function block(oEvent){
if(window.event){
oEvent = window.event;
// IE 取消默認事件
oEvent.returnValue = false;
}
else
// Firefox 取消默認事件
oEvent.preventDefault();
}
// 右鍵菜單事件
document.oncontextmenu = block;
</script>
</head>
<body>
<p>屏蔽鼠標右鍵</p>
</body>
</html>
IE 瀏覽器是通過returnValue 屬性屏蔽右鍵菜單；
標準DOM 是通過preventDefault( ) 方法屏蔽右鍵菜單；
iii > 自定義鼠標右鍵菜單
代碼如下：
<html>
<head>
<title> demo </title>
<meta name=“Author“ content=“xugang“ />
<script type=”text/javascript”>
<!–
// 一、屏蔽系統右鍵菜單
window.document.oncontextmenu = function(_event){
if (window.event){
_event = window.event;
window.event.returnValue=false;
window.event.cancelBubble=true;
}
else _event.preventDefault();
}
//二、添加自定義右鍵菜單
window.document.onmouseup = function(_event)
{
var myDIV = document.getElementById(“myDIV“);
// 瀏覽器兼容性
if (window.event)_event = window.event;
// 鼠標右鍵
if(_event.button == 2)
{
// _event.clientX 獲得鼠標當前的 X 座標
/* 注意：
_event.clientX 的值在標準的DOM 中“只讀”
myDIV.style.pixelLeft 不是標準的DOM 屬性
*/
myDIV.style.left = _event.clientX;
myDIV.style.top = _event.clientY;
myDIV.style.display = “block“;
}
// 不是鼠標右鍵
else myDIV.style.display = “none“;
}
//–>
</script>
</head>
<body>
<!– 我的右鍵菜單 –>
<div id=“myDIV“ style=“position:absolute; height:180px; width:200px;
background-color:#CCCCCC; display:none;“>
<a href=“http://xugang.cnblogs.com“ target=“_blank“>xugang</a>
</div>
</body>
</html>
