event事件详解-焦点事件、event对象、键盘事件、右键菜单事件

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中的三种方法:
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、event对象

兼容写法: 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 || alt 是按下的状态,返回true,否则返回false

例子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)