事件对象

勇敢的Jerry
197 阅读1分钟

事件对象

 oBox.onmousemove = function(e){
            // e 就是事件对象
        };

offset方法：

offsetX,检测事件鼠标距离自身左侧的距离

offsetY,检测事件鼠标距离本身上侧的距离

通过打点调用此方法 e.offsetX || e.offsetY

client方法：

clientX:测试事件鼠标距离窗口左侧距离

clienY:检测事件鼠标距离窗口上测的距离

通过打点调用此方法 e.clientX || e.clientY

page方法

pageX:测试事件鼠标距离网页左侧的距离

pageY:测试事件鼠标距离页面上测的距离

通过打点调用此方法：e.pageX || e.pageY

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #box {
            width:200px;
            height:200px;
            background-color:#333;
            margin:100px;
        }
        body {
            height:2000px;
        }
        #info {
            font-size:30px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="info"></div>
    <script>
        var oBox = document.getElementById('box');
        var oInfo = document.getElementById('info');

        oBox.onmousemove = function(e){
            oInfo.innerHTML = 'offsetX/Y:'+e.offsetX+','+e.offsetY+'<br>'+
                                'clientX/Y:'+e.clientX+','+e.clientY+'<br>'+
                                'pageX/Y:'+e.pageX+','+e.pageY;
        };
    </script>
</body>
</html>

charCode字符码

字符字符码
数字0~数字948~57
大写字母A~Z65~90
小写字母a~z97~122

\

keyCode键码

按键键码
数字0~数字948~57（同charCode键码完全相同）
字母不分大小a~z65~90(同charCode键码的大写字母A-Z，而keyCode不分大小写，一律为65-90)
四个方向键，左上右下37 、38、39、40
回车键13
空格键32

\

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="field1">
    <h1 id="info1"></h1>
    <input type="text" id="field2">
    <h1 id="info2"></h1>

    <script>
        var oField1 = document.getElementById('field1');
        var oInfo1 =  document.getElementById('info1');
        var oField2 = document.getElementById('field2');
        var oInfo2 =  document.getElementById('info2');

        oField1.onkeypress = function(e) {
            oInfo1.innerText = '你输入的字符的字符码是'+e.charCode;
        };
        oField2.onkeydown = function(e) {
            oInfo2.innerText = '你按下的键的键码是'+e.keyCode;
        };
    </script>
</body>
</html>

preventDefault()方法

阻止浏览器默认行为

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        只能输入小写字母和数字：
        <input type="text" id="field">
    </p>
    <script>
        var oField = document.getElementById('field');

        oField.onkeypress = function(e) {
            console.log(e.charCode);
            // 根据用户输入的字符的字符码（e.charCode)
            // 数字0~9,字符码 48~57
            // 小写字母a~z,字符码97~122
            if(!(e.charCode>=48 && e.charCode<=57 || e.charCode>=97 && e.charCode<=122)){
            //    阻止浏览器默认的行为
                e.preventDefault();
            }
        };
    </script>
</body>
</html>

鼠标滚轮事件onmousewheel

鼠标滚轮事件onmousewheel，它的事件对象e提供deltaY属性表示鼠标滚动方向，向下滚动时返回正值，向上滚动时返回负值

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width:200px;
            height:200px;
            background-color:#333;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <h1 id="info">0</h1>
    <script>
        var oBox = document.getElementById('box');
        var oInfo = document.getElementById('info');

        // 全局变量就是info中显示的数字
        var a=0;
        // 给box盒子添加鼠标滚轮事件监听
        oBox.onmousewheel = function(e){
            // 阻止默认事件：就是说当用户在盒子里面滚动鼠标滚轮的时候，此时不会引发页面的滚动条的滚动
            e.preventDefault();

            if(e.deltaY > 0) {
                a++;
            }
            else {
                a--;
            }
            oInfo.innerText = a;
        };
    </script>
</body>
</html>

e.stopPropagation()方法

e.stopPropagation()方法用来阻止事件继续传播

在一些场合，非常有必要切断事件继续传播，否则会造成页面特效显示bug

案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modal {
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-70px;
            width:400px;
            height:140px;
            background-color:#333;
            display:none;
        }
    </style>
</head>
<body>
    <button id="btn">按我弹出弹出层</button>
    <div class="modal" id="modal"></div>
    <script>
        var oBtn= document.getElementById('btn');
        var oModal = document.getElementById('modal');

        // 点击按钮时，弹出层层显示

        oBtn.onclick = function(e) {
            // 按钮属于页面一部分,会冒泡传播，弹出层会瞬间被关闭。所有必须阻断传播
            e.stopPropagation();
            oModal.style.display='block';
        };
        // 点击页面任何部分时，弹出层关闭
        document.onclick = function() {
            oModal.style.display='none';
        };
        // 点击弹出层内部的时候，不能关闭弹出层的，所以应该阻止事件继续传播
        oModal.onclick = function(e) {
            // 阻止时间继续传播到document身上
            e.stopPropagation();
        };
    </script>
</body>
</html>
avatar
文章
阅读
粉丝