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

最新推荐文章于 2024-09-18 22:46:48 发布

della_uii

最新推荐文章于 2024-09-18 22:46:48 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 焦点事件-event 键盘事件右键菜单事件

本文链接：https://blog.csdn.net/Della_UI/article/details/52966739

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、焦点事件

获取焦点事件onfocus \ 失去焦点事件 onblur

例子：输入框里的提示文字

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

        oText.onfocus=function(){
            if (this.value=='请输入内容') {
                this.value='';
            }
        }

        oText.onblur=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.onmousemove=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.onkeyup=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.onkeydown=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.oncontextmenu=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.onclick=function(){
            oDiv.style.display='none';
        }
    </script>
</body>