首頁 > 開發者 > 網站開發

javascript基礎——滑鼠事件，系統對話方塊等，javascript事件

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

javascript基礎——滑鼠事件，系統對話方塊等，javascript事件
1、滑鼠事件
(1)、onclick:使用者點擊滑鼠左鍵，以及當焦點在一個按鈕上時，使用者按Enter鍵時，發生onclick事件
(2)、ondblclick:使用者雙擊滑鼠左鍵時，發生ondblclick事件
(3)、onmousedown：使用者按下任意滑鼠按鍵的時候，發生onmousedown事件
(4)、onmouseout：當游標在一個元素上，並且使用者將其移出元素邊界時，發生onmouseout事件
(5)、onmouseover：當游標在一個元素之外，並且使用者將移動到該元素上時，發生onmouseover事件
(6)、onmouseup：當使用者釋放任何滑鼠按鍵時，發生onmouseup事件
(7)、onmousemove:當游標在一個元素上時，重複發生onmousemove事件
2、系統對話方塊
(1)、警告框：alert();
例如：alert("wrong!");
預設只有一個確定按鈕
(2)、確認框：confirm();
例如：confirm("Are you sure?");
預設有兩個按鈕，分別是"確認"和"取消"
(3)、提示框：prompt();
除"確認"和"取消"外，還有文字框
3、事件封裝：有的時候需要重複使用段代碼如document.getElementById()的時候，可以用事件封裝來
實現調用以使編碼簡便快捷
如：function $(id){
return document.getElementById(id);
}
在下面的函數中使用到document.getElementById()的時候直接寫成$("id名")即可
4、事件監聽：

(1)、IE8及以上版本：document.addEventListener("事件名稱(如click，前面不能加on)",函數名，bCapture(true表示處理常式在捕獲階段，false則表示在冒泡階段));

如：document.addEventListener("click",function (){document.getElementById("id名").style.display="none";})

此處為滑鼠點擊的時候，相應id名的標籤顯示被設為none;
此處的click不能寫為onclick
(2)、IE8及以下版本：document.attachEvent()
5、取得下拉式清單的內容：
<selece id="s1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
在script元素中寫：var a = document.getElementById("s1").value;即可得到下拉式清單中選擇的內容。
6、取得複選框的內容：
<input type="checkbox" id="d1" value="音樂"/>
<input type="checkbox" id="d2" value="體育"/>
在script元素中寫：var a = document.getElementById("d1").check;
if(a==true) var b = document.getElementById("d1").value;
b的內容即為複選框的內容
javascript滑鼠事件

我幫你寫了一個,比較實用的,你自己可以改改<html><head><title></title><style type="text/css">body{ font-size : 12px ;}ul{ margin : 0 ; padding : 0 ;}li{ display : inline ;}.menu{ border : 1px solid red ; margin : 3px 0 ;}.layer1,.layer2,.layer3,.layer4{ height : 100px ; width : 400px ; color : white ; margin : 5px ; display : none ;}.layer1{ background-color : red ; display : block ;}.layer2{ background-color : blue;}.layer3{ background-color : green;}.layer4{ background-color : black;}</style><script language="javascript" type="text/javascript">function $(tid){ return document.getElementById(tid);}function init(){ var a, l; a = $("menu").getElementsByTagName("a"); l = a.length; for(var i = 0; i < l ; i ++ ) {
a[i].onmouseover = function(i) { return function() { shows(i); } } (i); }

}function shows(c){ var _a, _l; _a = $('main').childNodes; _l = _a.length; for(var n = 0; n < _l ; n ++ ) { if(n == c) { _a[n].style.display = "block" ;
} else { _a[n].style.display = "none"; } }
}window.onload = init;</script></head><body ><div class="menu" id="menu"><ul><li><a href="#">aaa</a></li><li><a href="#">bbb<&#4......餘下全文>>
 
javascript 滑鼠事件

表示hanshuming這個函數是xgk這個對象的一個方法。

代碼之前很可能做了如下的類對象定義：
var xgk={
prop1: null,
prop2: 2,
......
hanshuming: function(param1)
.....
}
 

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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