原生js学习笔记6——事件

事件对象

鼠标事件

event.clientX在可视区中，鼠标点击的x坐标
event.clientY在可视区中，鼠标点击的y坐标

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        document.onclick = function  () {
            alert(event.clientX + ',' + event.clientY);
        }
    </script>
</head>
<body>
    
</body>
</html>

示例：一个跟随鼠标指针移动的红色块

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div {
            width: 100px;
            height: 100px;
            background-color :red;
            position: absolute;
        }

    </style>
    <script type="text/javascript">
        // 鼠标移动时触发改事件
        document.onmousemove = function  (ev) {

            // 获取距离文档顶部的高度
            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取距离文档左边的的宽度
            var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

            // 获取鼠标事件
            var oEvent = event || ev;
            // 获取到div
            var oDiv = document.getElementById('div');

            // 设置div的位置
            oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';
            oDiv.style.top = oEvent.clientY + oScrollTop + 'px';
            
        }
    </script>
</head>
<body>

    <div id = "div"></div>
    
</body>
</html>

示例：一串跟着鼠标走的div

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div {
            width: 10px;
            height: 10px;
            background-color :red;
            position: absolute;
        }

    </style>
    <script type="text/javascript">
        // 鼠标移动时触发改事件
        window.onload = function  () {

            var oDivs = document.getElementsByTagName('div');

            document.onmousemove = function  (ev) {
                var oEvent = ev || event;

                oDivs[0].style.left = oEvent.clientX+'px';
                oDivs[0].style.top = oEvent.clientY+'px';

                for (var i = oDivs.length-1; i > 0; i--) {
                    oDivs[i].style.left = oDivs[i-1].style.left;
                    oDivs[i].style.top = oDivs[i-1].style.top;

                };
                

            }

            
        }
    </script>
</head>
<body>

    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
        <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
        <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
        <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
        <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    <div id = "div"></div>
    
    
</body>
</html>

键盘事件

keyCode获取用户按下键盘的哪个按键

如：键盘控制DIV移动

ctrlKey 返回boolean值，按下时为true
shiftKey 返回boolean值，按下时为true
altKey 返回boolean值，按下时为true

示例：用提示框将用户按的按键提示出来：

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        // 按动键盘时触发事件
        document.onkeydown = function (ev) {
            var oEvent = ev || event;
            // 获取到按动的是哪个按键
            alert(oEvent.keyCode);
        }
    </script>
</head>
<body>
    
</body>
</html>

示例：通过上下左右按键控制DIV的移动

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            left:10px;
            top:10px;
            background-color: gray;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        document.onkeydown = function  (ev) {
            var oEvent = ev || event;
            var oDiv = document.getElementById('div1');

            if (oEvent.keyCode == 37) {
                oDiv.style.left =  oDiv.offsetLeft - 10 +'px';
            } else if (oEvent.keyCode==38) {
                oDiv.style.top = oDiv.offsetTop - 10 +'px';
            } else if (oEvent.keyCode == 39) {
                oDiv.style.left = oDiv.offsetLeft + 10 +'px';
            } else if (oEvent.keyCode == 40) {
                oDiv.style.top = oDiv.offsetTop + 10 +'px';
            };
        }

    </script>
</head>
<body>
    <div id = "div1"> </div>
</body>
</html>

示例：按住control+enter键，提交留言框中的文字到留言板中

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function  () {
            var oText1 = document.getElementById('text1');
            var oText2 = document.getElementById('text2');
            var oBtn = document.getElementById('btn');

            // 鼠标点击提交按钮。进行留言
            oBtn.onclick = function  () {
                //点击提交按钮后，把留言框中的文字提交在留言区
                oText1.value += oText2.value + '\n';
                // 清空留言框
                oText2.value = '';
            };  

            // 按下control+enter按钮，进行留言,因为当前焦点在留言框中，所以事件要加载留言框中
            oText2.onkeydown = function  (ev) {
                var oEvent = ev || event;

                // 按下回车键和control键
                if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
                    //点击提交按钮后，把留言框中的文字提交在留言区
                oText1.value += oText2.value + '\n';
                // 清空留言框
                oText2.value = '';
                };
            }
        }
    </script>
</head>
<body>
    <textarea id = 'text1' roes = '10' cols = '40'></textarea>
    <br />

    <input type = "text" id = 'text2'/>
    <input type="button" value = '提交' id = 'btn'/>


</body>
</html>

事件冒泡

子标签发生事件后，向父级发送该事件，一直追溯到document。如：点击一个嵌套在body中的button，则该button的onclick事件也会传递给body、document中，触发他们的onclick里触发的函数.

示例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>


    <script type="text/javascript">
        window.onload = function () {

            var oBtn = document.getElementById('button');
            var oDiv = document.getElementById('div');

            // 点击buton后，button的事件会被触发
            oBtn.onclick = function() {
                oDiv.style.display = 'block';
                alert("button被点击了");
            }

            // 由于事件冒泡，作为父级的document的onclick事件也会被触发
            document.onclick = function() {

                oDiv.style.display = 'none';
                alert("document被点击了")
            }
        }
    </script>
    </head>
    <body>
    <input type = "button" value = "显示" id = "button">
    <div id = "div"></div>
    
    </body>
    </html>

取消冒泡

由于事件冒泡会触发父级的相关方法，所以我们经常会“取消事件冒泡”。

取消事件冒泡的方法:event.cancelBubble=true

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>


    <script type="text/javascript">
        window.onload = function () {

            var oBtn = document.getElementById('button');
            var oDiv = document.getElementById('div');

            // 点击buton后，button的事件会被触发
            oBtn.onclick = function(ev) {
                oDiv.style.display = 'block';
                alert("button被点击了");
                // 在这里取消事件冒泡，防止事件向父级传递
                // 兼容性考虑，有的浏览器的事件并不是'event'，所以把点击事件作为参数传递过来
                var oEvent = ev || event;
                oEvent.cancelBubble=true;

            }

            // 由于事件冒泡，作为父级的document的onclick事件也会被触发
            document.onclick = function() {

                oDiv.style.display = 'none';
                alert("document被点击了")
            }
        }
    </script>
    </head>
    <body>
    <input type = "button" value = "显示" id = "button">
    <div id = "div"></div>
    
    </body>
    </html>

事件的默认行为

浏览器自带的行为就是默认行为

阻止默认行为

只要将默认的事件return false，就可以组织默认行为的执行。

示例：自定义右键菜单：默认的右键菜单是系统提供的选项，我们可以阻止默认的右菜单，来自定义新右键菜单样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul {
            list-style-type: none;
            display:none;
            position:absolute;
        }
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">

        // 鼠标右键触发的时间
        document.oncontextmenu = function  (ev) {
            var oUl = document.getElementById('ul1');
            var oEvent = ev || event;
            oUl.style.display = 'block';

            oUl.style.left = oEvent.clientX + 'px';
            oUl.style.top = oEvent.clientY + 'px';

            return false;
        }

        // 鼠标左键触发的事件
        document.onclick  = function  (ev) {
            var oUl = document.getElementById('ul1');
            oUl.style.display = 'none';

        }
    </script>
</head>
<body>

    <!-- 自定义右键菜单 -->
    <ul id = 'ul1' >
        <li>首页</li>
        <li>登录</li>
        <li>注册</li>
    </ul>
    
</body>
</html>

示例：输入框中只能输入数字和退格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function  () {
            var oText = document.getElementById('text');
            oText.onkeydown = function  (ev) {
                var oEvent = ev || event;
                if ( (oEvent.keyCode < 40 && oEvent.keyCode != 8) || oEvent.keyCode > 57 ) {
                    return false;
                };

            }
        }
    </script>
</head>
<body>
    <input type = "text"  id = "text">

</body>
</html>

拖拽

拖拽时，鼠标经历三个事件：

onmousedown 鼠标按下时，存储当前鼠标距离拖拽对象左上角的距离
onmousemove 鼠标移动时，根据鼠标移动的距离移动拖拽对象的位置
onmouseup 鼠标抬起时，停止拖拽

示例：鼠标拖拽一个div

demo.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background-color : red;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        window.onload = function  () {
            
            var oDiv = document.getElementById('div1');
            // 当鼠标按下时计算鼠标距离div左上角的位置
            oDiv.onmousedown = function  (ev) {
                var oEvent = ev || event;
                var oX = oEvent.clientX - oDiv.offsetLeft;
                var oY = oEvent.clientY - oDiv.offsetTop;

                // 当鼠标开始移动，重新设置div的位置
                document.onmousemove = function  (ev) {
                    var oEvent = ev || event;
                    oDiv.style.left = oEvent.clientX - oX + 'px';
                    oDiv.style.top = oEvent.clientY - oY + 'px';

                };

                // 当鼠标抬起，结束移动，清除移动事件的函数
                document.onmouseup = function  () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

                
            };

        };
    </script>
</head>
<body>
    <div id = "div1"></div>
</body>
</html>

最后编辑于：2017.12.03 02:59:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335

原生js学习笔记6——事件

事件对象

鼠标事件

键盘事件

事件冒泡

取消冒泡

事件的默认行为

阻止默认行为

拖拽

推荐阅读更多精彩内容