快捷導(dǎo)航

JS 事件機(jī)制完整示例分析

更新時(shí)間：2020年01月15日 08:38:28 作者：qq_42412646

這篇文章主要介紹了JS 事件機(jī)制,結(jié)合完整實(shí)例形式分析了JavaScript事件響應(yīng)機(jī)制、原理與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JS 事件機(jī)制。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>js事件機(jī)制</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testOnclick(){
                alert("我是單擊事件");
            }
            function testdblOnclick(){
                alert("我是雙擊事件");
            }
            function testOnmouseover(){
                alert("我是鼠標(biāo)懸停事件");
            }
            function tsetOnmousemove(){
                alert("我進(jìn)行了移動(dòng)");
            }
            function testOnmouseout(){
                alert("我被移出了");
            }
            function testOnkeydown(){
                alert("鍵盤按下事件");
            }
            function testOnkeyup(){
                alert("鍵盤抬起事件");
            }
            function testOnkeypress(){
                alert("鍵盤按壓事件觸發(fā)")
            }
            function testOnfouse(){
                alert("焦點(diǎn)確認(rèn)定位");
            }
            function testOnblur(){
                alert("我失去了焦點(diǎn)");
            }
            function tsetOnload(){
                alert("頁(yè)面進(jìn)行了重新加載");
            }
//            tsetOnload();
            function testOnchange(){
                alert("發(fā)生了改變");
            }
            function testbreak(){
                alert("阻斷事件觸發(fā)");
            }
            function testbreaktrue(){
                alert("阻斷，我可不只是說(shuō)說(shuō)");
                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();">
        <h3>js事件機(jī)制</h3>
        <input type="button" id="" value="測(cè)試單擊" onclick="testOnclick();"/>
        <input type="button" id="" value="測(cè)試雙擊" ondblclick="testdblOnclick();"/>
        <hr />
        <div id="showdiv" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" >
        </div>
        <hr />
       <!--下面在文本框中添加的事件觸發(fā)有事件的沖突，onkeydown和onkeypress會(huì)在按下一個(gè)按鍵的時(shí)候觸發(fā)，但是由于觸發(fā)了顯示框事件導(dǎo)致按下按鈕后一直出現(xiàn)，而使onkeyup無(wú)法觸發(fā)-->
        <input type="text" id="" value="" onkeydown="testOnkeydown()" onkeyup="testOnkeyup();" onkeypress="testOnkeypress();"/>
        <hr />
                <!--失去焦點(diǎn)的時(shí)候會(huì)一直顯示，因?yàn)樵谑ソ裹c(diǎn)操作中使顯示框顯示，其本來(lái)就是一個(gè)失去焦點(diǎn)的操作-->
        <input type="text" name="" id="" value="" onfocus="testOnfouse()" onblur="testOnblur()"/>
        <br />
        <input type="text" name="" id="" value="" onchange="testOnchange();"/>
        <br />
        比較喜歡的動(dòng)漫角色:<br />
        <select name="" id="" onchange="testOnchange();">
            <option value="">古河渚</option>
            <option value="">藤和艾利歐</option>
            <option value="">佐倉(cāng)千代</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> <!-- 必須函數(shù)和調(diào)用都含有return才能進(jìn)行有效的阻斷-->
        <hr />
        <a href="javascript:testHref()" rel="external nofollow" >超鏈接點(diǎn)擊</a>
    </body>
</html>

事件觸發(fā)機(jī)制使為了更好的實(shí)現(xiàn)網(wǎng)頁(yè)與用戶的交互，如果僅僅只在js代碼域中定義函數(shù)，那么我們僅僅只能在代碼中自己調(diào)用，用戶無(wú)法觸發(fā)函數(shù)，所以我們利用函數(shù)對(duì)一系列操作進(jìn)行封裝，在body中調(diào)用事件觸發(fā)機(jī)制進(jìn)行調(diào)用，這樣當(dāng)用戶觸發(fā)某個(gè)事件的時(shí)候就會(huì)觸發(fā)一系列的操作。

注：在一系列的事件觸發(fā)機(jī)制中，我們可以在一個(gè)標(biāo)簽中添加多個(gè)事件觸發(fā)機(jī)制，但是我們必須在適當(dāng)?shù)牡胤皆O(shè)置，而且，對(duì)于多個(gè)事件機(jī)制其也會(huì)產(chǎn)生沖突，一個(gè)方面可能是因?yàn)橛|發(fā)機(jī)制的沖突（比如單雙擊）另一方面可能因?yàn)檎{(diào)用的函數(shù)引起的（比如焦點(diǎn)失去和顯示框顯示）

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: