javascript編程起步（第五課）
更新時(shí)間：2007年02月27日 00:00:00 作者：
鼠標(biāo)事件（上）
隨著課程的進(jìn)行，能跟著下來(lái)的人是越來(lái)越少了，不知道是不是因?yàn)闆](méi)有太多的表現(xiàn)，只是死記的東西，大家都沒(méi)有興趣啊。其實(shí)網(wǎng)頁(yè)上
的很多特效，動(dòng)作大都是用javascript來(lái)實(shí)現(xiàn)的，沒(méi)有javascript的網(wǎng)頁(yè)，就象一個(gè)人沒(méi)有了肌肉一樣。但是所有的動(dòng)作都是有函數(shù)來(lái)控制的
，而控制語(yǔ)句是基礎(chǔ)中的基礎(chǔ)。希望大家能耐心的學(xué)下去。今天的課程就輕松一下，學(xué)習(xí)點(diǎn)能見(jiàn)到效果的。
主要內(nèi)容就是基于鼠標(biāo)的事件,有如下幾種：
1.mouseover（鼠標(biāo)移至）
2.mouseout（鼠標(biāo)移出）
3.mousemove（鼠標(biāo)移動(dòng)）
4.mousedown（鼠標(biāo)按下）
5.mouseup（鼠標(biāo)彈起）
6.click（單擊）
7.dblclick（雙擊）
通常1和2組合起來(lái)使用，當(dāng)用戶把鼠標(biāo)移動(dòng)到一個(gè)超鏈接或者其他元素時(shí)，mouseover事件就會(huì)發(fā)生，mouseout總會(huì)伴隨著它，因?yàn)楫?dāng)鼠標(biāo)
離開(kāi)時(shí)，mouseout事件就會(huì)發(fā)生。
例子：
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()"
onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字體樣式有什么變化</p>
</body>
</html>
這里定義了兩個(gè)函數(shù)，來(lái)使字體改變樣式。關(guān)于函數(shù)我們以后會(huì)詳細(xì)的講解。
（注意：ie對(duì)頁(yè)面上的所有元素都支持mouseover和mouseout事件，但對(duì)于netscape navigator來(lái)說(shuō)，只有超鏈接和層支持這兩個(gè)事件。）
下面看鼠標(biāo)移動(dòng)的例子：
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == ’Netscape’)
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}
function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}
function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y !=
document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
鼠標(biāo)移動(dòng)的事件在鼠標(biāo)跟隨效果的使用上比較多，大家可以看看鼠標(biāo)跟隨特效。網(wǎng)上n多。
（需要注意的是：?jiǎn)?dòng)這個(gè)事件處理過(guò)程存在一個(gè)問(wèn)題，就是它有可能會(huì)屏蔽其他事件。另外還增加了頁(yè)面的處理時(shí)間，應(yīng)盡量少用。）
先說(shuō)到這兒吧，下節(jié)講鼠標(biāo)的另外4個(gè)事件。
今天的作業(yè)是：
1.圖片鏈接的轉(zhuǎn)換（當(dāng)鼠標(biāo)放上去時(shí)是一個(gè)圖片，當(dāng)鼠標(biāo)離開(kāi)時(shí)是另外一個(gè)圖片）
2.圖片跟隨鼠標(biāo)（當(dāng)鼠標(biāo)移動(dòng)時(shí)，會(huì)有個(gè)圖片跟隨著鼠標(biāo)一起移動(dòng)）
隨著課程的進(jìn)行，能跟著下來(lái)的人是越來(lái)越少了，不知道是不是因?yàn)闆](méi)有太多的表現(xiàn)，只是死記的東西，大家都沒(méi)有興趣啊。其實(shí)網(wǎng)頁(yè)上
的很多特效，動(dòng)作大都是用javascript來(lái)實(shí)現(xiàn)的，沒(méi)有javascript的網(wǎng)頁(yè)，就象一個(gè)人沒(méi)有了肌肉一樣。但是所有的動(dòng)作都是有函數(shù)來(lái)控制的
，而控制語(yǔ)句是基礎(chǔ)中的基礎(chǔ)。希望大家能耐心的學(xué)下去。今天的課程就輕松一下，學(xué)習(xí)點(diǎn)能見(jiàn)到效果的。
主要內(nèi)容就是基于鼠標(biāo)的事件,有如下幾種：
1.mouseover（鼠標(biāo)移至）
2.mouseout（鼠標(biāo)移出）
3.mousemove（鼠標(biāo)移動(dòng)）
4.mousedown（鼠標(biāo)按下）
5.mouseup（鼠標(biāo)彈起）
6.click（單擊）
7.dblclick（雙擊）
通常1和2組合起來(lái)使用，當(dāng)用戶把鼠標(biāo)移動(dòng)到一個(gè)超鏈接或者其他元素時(shí)，mouseover事件就會(huì)發(fā)生，mouseout總會(huì)伴隨著它，因?yàn)楫?dāng)鼠標(biāo)
離開(kāi)時(shí)，mouseout事件就會(huì)發(fā)生。
例子：
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()"
onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字體樣式有什么變化</p>
</body>
</html>
這里定義了兩個(gè)函數(shù)，來(lái)使字體改變樣式。關(guān)于函數(shù)我們以后會(huì)詳細(xì)的講解。
（注意：ie對(duì)頁(yè)面上的所有元素都支持mouseover和mouseout事件，但對(duì)于netscape navigator來(lái)說(shuō)，只有超鏈接和層支持這兩個(gè)事件。）
下面看鼠標(biāo)移動(dòng)的例子：
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == ’Netscape’)
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}
function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}
function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y !=
document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
鼠標(biāo)移動(dòng)的事件在鼠標(biāo)跟隨效果的使用上比較多，大家可以看看鼠標(biāo)跟隨特效。網(wǎng)上n多。
（需要注意的是：?jiǎn)?dòng)這個(gè)事件處理過(guò)程存在一個(gè)問(wèn)題，就是它有可能會(huì)屏蔽其他事件。另外還增加了頁(yè)面的處理時(shí)間，應(yīng)盡量少用。）
先說(shuō)到這兒吧，下節(jié)講鼠標(biāo)的另外4個(gè)事件。
今天的作業(yè)是：
1.圖片鏈接的轉(zhuǎn)換（當(dāng)鼠標(biāo)放上去時(shí)是一個(gè)圖片，當(dāng)鼠標(biāo)離開(kāi)時(shí)是另外一個(gè)圖片）
2.圖片跟隨鼠標(biāo)（當(dāng)鼠標(biāo)移動(dòng)時(shí)，會(huì)有個(gè)圖片跟隨著鼠標(biāo)一起移動(dòng)）
相關(guān)文章
JavaScript 遞增、遞減運(yùn)算符實(shí)例
遞增、遞減運(yùn)算符實(shí)例，基礎(chǔ)Js代碼范例，新手可參考哦。2010-07-07
IE8 新增的Javascript 開(kāi)發(fā)接口說(shuō)明
IE8 新增的Javascript 對(duì)象 (Object)，需要的朋友可以參考下。2011-01-01
做web開(kāi)發(fā) 先學(xué)JavaScript
當(dāng)你正在尋找 web 開(kāi)發(fā)的工作時(shí)，我認(rèn)為 JavaScript 是可以起步的偉大語(yǔ)言，他進(jìn)入門檻低、跨平臺(tái)、已經(jīng)成熟而且是個(gè)很好的跳板。2014-12-12
這篇文章介紹了javascript的內(nèi)存管理詳解，有需要的朋友可以參考一下
2013-08-08 
JavaScript中instanceof運(yùn)算符的使用示例
這篇文章主要介紹了JavaScript中instanceof運(yùn)算符的使用示例,instanceof的使用是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2016-06-06 
javascript驗(yàn)證form表單數(shù)據(jù)的案例詳解
這篇文章主要介紹了javascript驗(yàn)證form表單數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03 
這篇文章主要為大家詳細(xì)介紹了Javascript的迭代器和迭代接口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03 
Array對(duì)象方法參考...
2006-10-10 
這篇文章主要介紹了form表單序列化操作，通過(guò)將表單中的鍵值序列化為可提交的字符串，并附上代碼實(shí)例詳細(xì)講解了運(yùn)行之后的結(jié)果,需要的朋友可以參考下
2017-08-08