|
|
復(fù)制代碼 代碼如下:
<script language="Javascript">
//注冊(cè)回調(diào)函數(shù)loaded到處理函數(shù)window.onload上
window.onload = loaded;
//把方法window.alert地址傳遞給show函數(shù)
var show = window.alert;
function loaded(){
show("success");
}
</script>
2，事件對(duì)象
下面的js實(shí)現(xiàn)當(dāng)在textarea文本框里面鍵入回車時(shí)，并不導(dǎo)致?lián)Q行。即禁用回車鍵
復(fù)制代碼 代碼如下:
<textarea ></textarea>
<script language = "Javascript">
/*
事件的對(duì)象的棘手部分在于，IE的實(shí)現(xiàn)與W3C的規(guī)范有查表。IE使用一個(gè)獨(dú)立的全局事件對(duì)象(它可以再全局變量屬性window.event中找到)，而其他瀏覽器則使用獨(dú)立的包含事件對(duì)象的參數(shù)傳遞。
*/
document.getElementsByTagName("textarea")[0].onkeypress = function(e)
{
//如果不存在事件對(duì)象，則獲取全局的(僅IE)的對(duì)象
var e = e || window.event;
//如果敲擊了回車鍵，返回false(使它不發(fā)生任何行為)
return e.keyCode != 13;
}
</script>
3，this關(guān)鍵字
瀏覽器會(huì)把this關(guān)鍵字等同于引用該函數(shù)(含有this關(guān)鍵字的函數(shù))的當(dāng)前元素
復(fù)制代碼 代碼如下:
<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，取消事件冒泡
通常當(dāng)你對(duì)子元素作樣式作修改，或者觸發(fā)事件，根據(jù)冒泡原理，其父元素也會(huì)作相同改變，為防止這類事情發(fā)生，需要做取消事件冒泡的處理。
下面實(shí)例展示了鼠標(biāo)會(huì)為其懸停的當(dāng)前元素加上紅色的邊框。如果不阻止事件冒泡的話，每次把鼠標(biāo)移到一個(gè)元素上時(shí)，該元素及其父元素都會(huì)有紅色的邊框，這是我們不希望看到的。
復(fù)制代碼 代碼如下:
<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">
//阻止冒泡的通用函數(shù)
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++)
{
//監(jiān)聽用戶鼠標(biāo)，當(dāng)移動(dòng)到元素上時(shí)，為元素加上紅色邊框
li[i].onmouseover = function(e)
{
this.style.border = "1px solid red";
stopBubble(e);
}
//檢查用戶鼠標(biāo)，當(dāng)移開元素時(shí)，刪除我們加上的邊框
li[i].onmouseout = function(e)
{
this.style.border = "0px";
stopBubble(e);
}
}
</script>
5，重載瀏覽器的默認(rèn)行為
瀏覽器都有這種默認(rèn)的行為，即當(dāng)我們?cè)?lt;a>標(biāo)簽上點(diǎn)擊的時(shí)候會(huì)鏈接到href屬性的地址上，有的時(shí)候我們并不希望這種事情發(fā)生，而想實(shí)現(xiàn)我們自己的效果，比如彈出警告框，示例如下。
復(fù)制代碼 代碼如下:
<a href = "http://www.jb51.NET">重載瀏覽器的默認(rèn)行為</a>
<script language = "Javascript">
/*
為了達(dá)到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果
*/
function stopDefault(e)
{
//W3C防止瀏覽器默認(rèn)行為
if (e && e.preventDefault)
e.preventDefault();
//IE防止瀏覽器默認(rèn)行為
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("我已經(jīng)修改了瀏覽器的默認(rèn)行為了");
return stopDefault(e);
//好像直接寫下面一句也可以
//return false;
}
}
</script>
6，事件的親和力(accessibility,又稱可訪問性)
為了使得自己的網(wǎng)站更有親和力，可以這樣考慮，當(dāng)我們把鼠標(biāo)放在一個(gè)元素上或者通過鍵盤的tab鍵訪問時(shí)，其樣式應(yīng)該保持一致，如下代碼
復(fù)制代碼 代碼如下:
<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++)
{
//綁定鼠標(biāo)懸停和聚焦事件處理函數(shù)到<a>元素上
//當(dāng)用戶把鼠標(biāo)懸停到鏈接上，或者(使用鍵盤)聚焦到鏈接上時(shí)，它會(huì)把<a>的背景顏色變成藍(lán)色
a[i].onmouseover = a[i].onfocus = function()
{
this.style.backgroundColor = "blue";
}
//綁定鼠標(biāo)離開和模糊事件處理函數(shù)到<a>元素上
//當(dāng)用戶從鏈接移開時(shí)，它會(huì)把<a>的背景顏色變成白色
a[i].onmouseout = a[i].onblur = function()
{
this.style.backgroundColor = "white";
}
}
</script>
7，綁定事件監(jiān)聽
復(fù)制代碼 代碼如下:
//addEventt()添加事件
//Scott Andrew's original addEvent() function
//elm元素,document.getElementId('btn1')
//evType事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on",如Click
//fn當(dāng)然就是綁定的函數(shù)了,記住不要跟括號(hào),如showalert
//useCapture布爾值，表示該事件的響應(yīng)順序.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()注銷事件
//參數(shù)名同addEvent()函數(shù)
function removeEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' + evType);
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType, userCapture);
}
}
JavaScript技術(shù)：JavaScript 事件的一些重要說明，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
