|
|
復制代碼 代碼如下:
<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);
}
}
JavaScript技術：JavaScript 事件的一些重要說明，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
