JS事件处理详解-优快云博客

JS事件分为鼠标事件与键盘事件。想要保证事件被处罚一般要给document加事件监听。document可以理解为html标签外层的一个隐藏父标签，平时是看不到的，我们可以把它console.log一下，如下图：

JS事件需要使用event对象，比如这样：

document.onclick = function(ev）
{
  alert(ev);
}

这样会弹出“object mouseevent”，即鼠标点击对象，但是IE8以下并不能识别ev，FF又不识别event，所以我们要简单的做一下兼容处理：

var oEvent = ev||event; 
//为防止事件冲突，还得给事件设置防止冒泡
oEvent.cancelBubble = true;

这样处理后直接用oEvent对象就可以了。cancelBubble翻译过来就是冒泡的意思。另外，jQuery的event.stopPropagation()也可以防止冒泡。

鼠标点击事件最常见的应用就是获取鼠标的坐标，然后让元素跟随鼠标位置的变化进行移动。一个获取鼠标位置的简单例子:

document.onclick = function(ev)
{
  var oEvent = ev||event;
  alert(oEvent.clientX +"+"+oEvent.client.Y);       
}

值得注意的是，event.clientY获取到的坐标是基于可视区域的相对坐标值，如果我们把这个值添加给DOM元素的话，还必须要考虑到scrollTop的值，就像这样：

document.onmouseover = function(ev)
{
  var oEvent = ev||event;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  document.title = "X="+oEvent.clientX + "px" +"Y="+oEvent.clientY + scrollTop + "px";
}

为了日后方便使用，我们可以将此方法封装成一个函数：

function getPos(ev)
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    //以JSON的形式返回
    return {x:ev.clientX+scrollLeft ,y:ev.clientY+scrollTop};
}
var pos = getPos(oEvent);
//获取X：
console.log(pos.x);
//获取y：
console.log(pos.y);

键盘的事件也比较简单，如下是将文本框里的值通过点击ctrl+enter键赋给textarea的一个小demo：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件demo</title>
</head>
<body>
<input type="text" id="txt1">
<br>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>

<script>
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
oTxt1.onkeydown = function(ev)
{
    var oEvent = ev||event;
    //oEvent.keyCode = oEvent.which
    if ( oEvent.keyCode == 13 && oEvent.ctrlKey)        //JS提供的方法有ctrlkey,shiftkey,altkey
    {
      oTxt2.value += oTxt1.value+"\n";
      oTxt1.value = '';
    }
};
</script>

</body>
</html>

最常见的按键事件应用就是按回车登录了，少点下鼠标操作很流畅。另外课程里还提到利用方向键控制元素移动的方法，不过长按按键本身是带有延迟的，因此控制元素移动的时候会在开始有轻微的卡顿，于是我找到了这篇博客：键盘控制div移动并且解决停顿问题（原生js）—— 浅吟清唱，大家可以去看一下，想法很精妙，下面直接放代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #move{
            position: absolute;
            top: 30px;
            width: 30px;
            height: 30px;
            background-color: #ff3b2d;
            z-index:99;
        }
    </style>
</head>
<body>
<div id="move"></div>
<script>

    window.onload = function(){

        //获取Div元素
        var oDiv = document.getElementById("move");

        //创建各个方向条件判断初始变量
        var left = false;
        var right = false;
        var top = false;
        var bottom = false;

        //当按下对应方向键时，对应变量为true
        document.onkeydown = function(ev){
            var oEvent = ev || event;
            var keyCode = oEvent.keyCode;
            switch(keyCode){
                case 37:
                    left=true;
                    break;
                case 38:
                    top=true;
                    break;
                case 39:
                    right=true;
                    break;
                case 40:
                    bottom=true;
                    break;
            }
        };

        //设置一个定时
        setInterval(function(){

            //当其中一个条件为true时，则执行当前函数（移动对应方向）
            if(left){
                oDiv.style.left = oDiv.offsetLeft-10+"px";
            }else if(top){
                oDiv.style.top = oDiv.offsetTop-10+"px";
            }else if(right){
                oDiv.style.left = oDiv.offsetLeft+10+"px";
            }else if(bottom){
                oDiv.style.top = oDiv.offsetTop+10+"px";
            }
        },20);

        //执行完后，所有对应变量恢复为false，保持静止不动
        document.onkeyup = function(ev){
            var oEvent = ev || event;
            var keyCode = oEvent.keyCode;

            switch(keyCode){
                case 37:
                    left=false;
                    break;
                case 38:
                    top=false;
                    break;
                case 39:
                    right=false;
                    break;
                case 40:
                    bottom=false;
                    break;
            }
        }
    }



</script>
</body>
</html>

以上。

本课程内容整理自智能社的JS视频课程与浅吟清唱的简书博客。

转载于:https://www.cnblogs.com/wangwg1994/p/7881894.html