您好,登錄后才能下訂單哦!
本文實例講述了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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。