JavaScript 事件的一些重要說明

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1，JavaScript非同步回調複製代碼代碼如下:<script language="javascript">
//註冊回呼函數loaded到處理函數window.onload上
window.onload = loaded;
//把方法window.alert地址傳遞給show函數
var show = window.alert;
function loaded(){
show("success");
}
</script>

2，事件對象
　　下面的js實現當在textarea文字框裡面鍵入斷行符號時，並不導致換行。即禁用斷行符號鍵複製代碼代碼如下:<textarea ></textarea>
<script language = "javascript">
/*
事件的對象的棘手部分在於，IE的實現與W3C的規範有查表。IE使用一個獨立的全域事件對象(它可以再全域變數屬性window.event中找到)，而其他瀏覽器則使用獨立的包含事件對象的參數傳遞。
*/
document.getElementsByTagName("textarea")[0].onkeypress = function(e)
{
//如果不存在事件對象，則擷取全域的(僅IE)的對象
var e = e || window.event;
//如果敲擊了斷行符號鍵，返回false(使它不發生任何行為)
return e.keyCode != 13;
}
</script>

3，this關鍵字
　　瀏覽器會把this關鍵字等同於引用該函數(含有this關鍵字的函數)的當前元素複製代碼代碼如下:<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language = "javascript">
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++)
{
li[i].onclick = handeClick;
}
function handeClick()
{
this.style.backgroundColor = "blue";
this.style.color = "red";
}
</script>

4，取消事件冒泡
　　通常當你對子項目作樣式作修改，或者觸發事件，根據冒泡原理，其父元素也會作相同改變，為防止這類事情發生，需要做取消事件冒泡的處理。
　　下面執行個體展示了滑鼠會為其懸停的當前元素加上紅色的邊框。如果不阻止事件冒泡的話，每次把滑鼠移到一個元素上時，該元素及其父元素都會有紅色的邊框，這是我們不希望看到的。複製代碼代碼如下:<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language="javascript">
//阻止冒泡的通用函數
function stopBubble(e)
{
if (e && e.stopPropagation)
//w3c方法
e.stopPropagation();
else
//ie方法
window.event.cancelBubble = true;
}
var li = document.getElementsByTagName("*");
for (var i = 0; i < li.length; i++)
{
//監聽使用者滑鼠，當移動到元素上時，為元素加上紅色邊框
li[i].onmouseover = function(e)
{
this.style.border = "1px solid red";
stopBubble(e);
}
//檢查使用者滑鼠，當移開元素時，刪除我們加上的邊框
li[i].onmouseout = function(e)
{
this.style.border = "0px";
stopBubble(e);
}
}
</script>

5，重載瀏覽器的預設行為
　　瀏覽器都有這種預設的行為，即當我們在<a>標籤上點擊的時候會連結到href屬性的地址上，有的時候我們並不希望這種事情發生，而想實現我們自己的效果，比如彈出警告框，樣本如下。複製代碼代碼如下:<a href = "http://www.jb51.net">重載瀏覽器的預設行為</a>
<script language = "javascript">
/*
為了達到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果
*/
function stopDefault(e)
{
//W3C防止瀏覽器預設行為
if (e && e.preventDefault)
e.preventDefault();
//IE防止瀏覽器預設行為
else
window.event.returnValue = false;
return false;
}
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++)
{
a[i].onclick = function(e)
{
alert("我已經修改了瀏覽器的預設行為了");
return stopDefault(e);
//好像直接寫下面一句也可以
//return false;
}
}
</script>

6，事件的親和力(accessibility,又稱可訪問性)
　　為了使得自己的網站更有親和力，可以這樣考慮，當我們把滑鼠放在一個元素上或者通過鍵盤的tab鍵訪問時，其樣式應該保持一致，如下代碼複製代碼代碼如下:<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language="javascript">
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++)
{
//綁定滑鼠移至上方和聚焦事件處理函數到<a>元素上
//當使用者把滑鼠移至上方到連結上，或者(使用鍵盤)聚焦到連結上時，它會把<a>的背景顏色變成藍色
a[i].onmouseover = a[i].onfocus = function()
{
this.style.backgroundColor = "blue";
}
//綁定滑鼠離開和模糊事件處理函數到<a>元素上
//當使用者從連結移開時，它會把<a>的背景顏色變成白色
a[i].onmouseout = a[i].onblur = function()
{
this.style.backgroundColor = "white";
}
}
</script>

7，綁定事件監聽複製代碼代碼如下://addEventt()添加事件
//Scott Andrew's original addEvent() function
//elm元素,document.getElementId('btn1')
//evType事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on",如Click
//fn當然就是綁定的函數了,記住不要跟括弧,如showalert
//useCapture布爾值，表示該事件的響應順序.userCapture若為true,則瀏覽器採用Capture,若為false則採用bubbing方式.建議用false
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{//firefox,navigation,etc..
elm.addEventListener(evType, fn, useCapture);
}
else if (elm.attachEvent)
{//IE
var r = elm.attachEvent('on' + evType,fn);
}
else
{
elm['on' + evType] = fn;
}
}
//removeEvent()登出事件
//參數名同addEvent()函數
function removeEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' + evType);
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType, userCapture);
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More