JavaScript 事件的一些重要說明
2024-05-06 14:13:18
供稿：網友
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("*");
