溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS 事件機制。分享給大家供大家參考，具體如下：
<html>
<head>
<title>js事件機制</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testOnclick(){
alert("我是單擊事件");
}
function testdblOnclick(){
alert("我是雙擊事件");
}
function testOnmouseover(){
alert("我是鼠標懸停事件");
}
function tsetOnmousemove(){
alert("我進行了移動");
}
function testOnmouseout(){
alert("我被移出了");
}
function testOnkeydown(){
alert("鍵盤按下事件");
}
function testOnkeyup(){
alert("鍵盤抬起事件");
}
function testOnkeypress(){
alert("鍵盤按壓事件觸發")
}
function testOnfouse(){
alert("焦點確認定位");
}
function testOnblur(){
alert("我失去了焦點");
}
function tsetOnload(){
alert("頁面進行了重新加載");
}
// tsetOnload();
function testOnchange(){
alert("發生了改變");
}
function testbreak(){
alert("阻斷事件觸發");
}
function testbreaktrue(){
alert("阻斷，我可不只是說說");
return false;
}
function testHref(){
alert("超鏈接提示");
}
</script>
<style type="text/css">
#showdiv{
width: 100;
height: 200;
border: solid 1px;
}
input[type=text]{
width: 300px;
height: 20px;
border: solid 2px aqua;
}
hr{
height: 10px;
background-color: bisque;
border-radius: 10px;
}
</style>
</head>
<body onload="tsetOnload();">
<h4>js事件機制</h4>
<input type="button" id="" value="測試單擊" onclick="testOnclick();"/>
<input type="button" id="" value="測試雙擊" ondblclick="testdblOnclick();"/>
<hr />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" >
</div>
<hr />
<!--下面在文本框中添加的事件觸發有事件的沖突，onkeydown和onkeypress會在按下一個按鍵的時候觸發，但是由于觸發了顯示框事件導致按下按鈕后一直出現，而使onkeyup無法觸發-->
<input type="text" id="" value="" onkeydown="testOnkeydown()" onkeyup="testOnkeyup();" onkeypress="testOnkeypress();"/>
<hr />
<!--失去焦點的時候會一直顯示，因為在失去焦點操作中使顯示框顯示，其本來就是一個失去焦點的操作-->
<input type="text" name="" id="" value="" onfocus="testOnfouse()" onblur="testOnblur()"/>
<br />
<input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br />
比較喜歡的動漫角色:<br />
<select name="" id="" onchange="testOnchange();">
<option value="">古河渚</option>
<option value="">藤和艾利歐</option>
<option value="">佐倉千代</option>
<option value="">筒隱月子</option>
</select>
<hr />
<!--<a rel="external nofollow" rel="external nofollow" target="_blank" onclick="testbreak();">百度一下</a>-->
<hr />
<a rel="external nofollow" rel="external nofollow" target="_blank" onclick="return testbreaktrue();">百度一下</a> <!-- 必須函數和調用都含有return才能進行有效的阻斷-->
<hr />
<a href="javascript:testHref()" rel="external nofollow" >超鏈接點擊</a>
</body>
</html>
事件觸發機制使為了更好的實現網頁與用戶的交互，如果僅僅只在js代碼域中定義函數，那么我們僅僅只能在代碼中自己調用，用戶無法觸發函數，所以我們利用函數對一系列操作進行封裝，在body中調用事件觸發機制進行調用，這樣當用戶觸發某個事件的時候就會觸發一系列的操作。
注：在一系列的事件觸發機制中，我們可以在一個標簽中添加多個事件觸發機制，但是我們必須在適當的地方設置，而且，對于多個事件機制其也會產生沖突，一個方面可能是因為觸發機制的沖突（比如單雙擊）另一方面可能因為調用的函數引起的（比如焦點失去和顯示框顯示）
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
