イベント詳細-フォーカスイベント、イベントオブジェクト、キーボードイベント、右クリックメニューイベント

12418 ワード

JavaScript

1、焦点事件
フォーカスイベントを取得するonfocus\焦点を失うイベントonblur
例:入力ボックスのヒントテキスト

<body>
    <input type="text" id="text1" value="     " />
    <script type="text/javascript">
        var oText=document.getElementById("text1");

        oText.οnfοcus=function(){
            if (this.value=='     ') {
                this.value='';
            }
        }

        oText.οnblur=function(){
            if (this.value=='') {
                this.value='     ';
            }
        }   
    script>
body>

jsの3つの方法:event.focus()/.焦点event.blur()//自動取得自動的にフォーカスを失うevent.select()//すべてのテキスト

<body>
    <input type="text" id="text2" value="      " />
    <input type="text" id="text3" value="      " />
    <script type="text/javascript">
        var oText2=document.getElementById("text2");
        var oText3=document.getElementById("text3");

        oText2.focus();
        oText2.blur();
        oText3.select();
    script>
body>

2、イベント対象
互換書き方:ev=ev|window.event

functin fn( ev ){
    var ev = ev || window.event；
}

標準ie/chrome:eventはグローバルオブジェクトを内蔵するie:var event=nullです.chrome:var event;
イベント関数:イベント呼び出しの関数.イベントオブジェクトは時間関数で使わなければ内容がありません.
例:マウスで移動するdiv

<body>
    <div id="div1" style="width: 100px; height: 100px; background: #333333; position: absolute;">div>
    <script type="text/javascript">
        var oDiv=document.getElementById("div1");

        document.οnmοusemοve=function(ev){
            var ev= ev || window.event;
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; //     

            oDiv.style.left=ev.clientX+'px';
            oDiv.style.top=ev.clientY+scrollTop+'px';

        }
    script>
body>

3、キーボードイベント
onkeydown:キーボードボタンを押した時にonkeyupを触発します.キーボードボタンを上げた時にevent.keyCodeを触発します.数字タイプのキーボードボタンの値はctrlKey、shiftKey、altKey:イベントが発生した時に、ctrl|shiftを押した状態で、truelseに戻ります.
例1:ctrl+enterキー出力メッセージ

<body>
    <input type="text" id="input1" />
    <ul id="ul1">ul>  
    <script type="text/javascript">
        var oText=document.getElementById("input1");
        var oUl=document.getElementById("ul1");

        oText.οnkeyup=function(ev){
            var ev = ev || window.event;

            if (this.value!='') {
                if (ev.keyCode==13 && ev.ctrlKey) {  //   ctrl     enter 
                    var oLi=document.createElement('li');
                    oLi.innerHTML=this.value;

                    if (oUl.children[0]) {
                        oUl.insertBefore(oLi,oUl.children[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                }
            }
        }
    script>
body>

例2:キーボードの方向キーはdivケースの上下左右を制御します.

<body>
    <div id="div1" style="width: 100px; height: 100px; background: orangered; position: absolute;">div>
    <script type="text/javascript">
        var oDiv=document.getElementById("div1");
        document.οnkeydοwn=function(ev){ //div        ， document
            var ev = ev || window.event;
            switch (ev.keyCode){
                case 37:
                    oDiv.style.left=oDiv.offsetLeft-10+'px';
                    break;
                case 38:
                    oDiv.style.top=oDiv.offsetTop-10+'px';
                    break;
                case 39:
                    oDiv.style.left=oDiv.offsetLeft+10+'px';
                    break;
                case 40:
                    oDiv.style.top=oDiv.offsetTop+10+'px';
                    break;  
            }
        }
    script>
body>

4、右クリックメニューイベント右クリックメニュー:コンテキストメニュー、環境メニューoncontextmenu
例:カスタム右クリックメニュー

 <body style="height: 3000px;">
    <div id="div1" style="width: 60px; height: 120px; background: #999; position: absolute; display: none;">div>
    <script type="text/javascript">
        var oDiv=document.getElementById("div1");
        document.οncοntextmenu=function(ev){
            var ev = ev || window.event;
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

            oDiv.style.display='block';
            oDiv.style.left=ev.clientX+'px';
            oDiv.style.top=ev.clientY+scrollTop+'px';
            return false;
        }
        document.οnclick=function(){
            oDiv.style.display='none';
        }
    script>
body>

javascriptよくある面接問題の一つ:行列の泡立ちランキング;