JavaScript事件基础（事件对象，键盘，鼠标，冒泡）

最新推荐文章于 2022-08-31 12:21:59 发布
置顶 最新推荐文章于 2022-08-31 12:21:59 发布
阅读量430 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GY_U_YG/article/details/71425199
版权

事件对象

什么是event对象和事件冒泡
  • 获取事件的详细信息：鼠标位置，键盘按键
  • 例子：获取鼠标位置：clientX
  • document的本质：document.childNodes[0].tagName
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            document.body.onclick = function() {
                alert('a');
            };
        };
    </script>
</body>
</html>
点击网页，是没有反应的，因为body里面什么也没有啊，没有被撑开，但是如果把document.body.onclick 换成document.onclick，就可以了，因为document代表的是整个网页啊。

关于document

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            alert(document.childNodes[0].tagName);
        };
    </script>
</head>
<body>
</body>
</html>
alert(document.childNodes[0].tagName);// !
alert(document.childNodes[1].tagName);// HTML
DOCUTYPE其实也是一个节点，而且，DOCUTYPE和HTML两个节点有个共同的父级，就是document,理解为整个网页！
所以，以后给整个页面加事件的时候，一定要给document加，而不是body

事件对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            document.onclick = function() {
                alert(event.clientX + ',' + event.clientY);
            };
        };
    </script>
</head>
<body>
</body>
</html>
在FireFox中，不认识event，在浏览器中，事件函数都带有一个参数的，就是 事件对象，系统传来的。

最终的兼容方案：

var oEvent = ev||event;

window.onload = function() {
    document.onclick = function(ev) {
        var oEvent = ev || event;
        alert(oEvent.clientX + ',' + oEvent.clientY);
    };
};

事件流

事件冒泡
<!DOCTYPE html>
<html onclick="alert('html');">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            padding: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            document.onclick = function() {

            };
        };
    </script>
</head>
<body onclick="alert('body');">
    <div style="background: yellow;" onclick="alert(this.style.background);">
        <div style="background: green;" onclick="alert(this.style.background);">
            <div style="background: red;" onclick="alert(this.style.background);"></div>
        </div>
    </div>
</body>
</html>
在红色块中点击一下，依次弹出：red -> green -> yellow -> body -> html
事件冒泡顺序：red div -> green div -> yellow div -> body -> html -> document
冒泡，有时候有些用途，但大多数会带来一些麻烦
比如：
页面上一个小按钮，点击一下，下面的灰色临时div出来，点击网页其他部分，灰色临时div消失。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            width: 400px;
            height: 300px;
            background: #CCC;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
            oBtn.onclick = function() {
                oDiv.style.display = 'block';
                alert('按钮被点击');
            };
            document.onclick = function() {
                oDiv.style.display = 'none';
                alert('document被点击');
            };
        };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="show" />
    <div id="div1"></div>
</body>
</html>
这样，你会发现，点击按钮，灰色临时div根本不会出来！
原因很简单，当你点击按钮的时候，那一瞬间，灰色临时div的确出现了，但冒泡了，事件不仅点到btn上，但也冒泡到document上了，所以也就是给document也传了一个事件，那么立刻就又display:none了。

取消冒泡

oEvent.cancelBubble = true;

鼠标事件

clientX , clientY
onmusemove

灰色小div跟着鼠标到处跑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            width: 40px;
            height: 40px;
            background: #CCC;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
    document.onmousemove = function(ev) {
        //灰色小div跟着鼠标到处跑
        var oEvent = ev || event;
        var oDiv = document.getElementById('div1');
        oDiv.style.left = oEvent.clientX + 'px';
        oDiv.style.top = oEvent.clientY + 'px';
    };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
其实，这个程序有很大的漏洞，那就是不理解clientX和clientY，如果body给个高度，比如2000px，那么，灰色小块就会和鼠标脱离。clientX是鼠标位置在可视区到左边的距离，如果网页很大，根本不止一屏幕，那么可视区只是整个网页的一部分，这时候，可视区如果不是网页的最顶端部分，而是网页卷去了一部分，也就是scrollTop>0了，“==oDiv.style.top = oEvent.clientY + ‘px’;==”这句话就出问题了，top值这时候大于clientY了。也即是说，clientX 和 clientY是根据可视区定位的，但是，div可是根据body定位的（left，top）。

法则：

但凡是用到clientX,clientY的时候，一定用到scrollLeft,scrollTop,不然几乎是一定会出问题的.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            width: 40px;
            height: 40px;
            background: #CCC;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
    document.onmousemove = function(ev) {
        var oEvent = ev || event;
        var oDiv = document.getElementById('div1');

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        oDiv.style.left = oEvent.clientX + 'px';
        oDiv.style.top = oEvent.clientY + 'px';
    };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

封装scrollTop和scrollLeft

因为经常用到，写起来麻烦，封装成库
function getPos(ev) {
    var st = document.documentElement.scrollTop || document.body.scrollTop;
    var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
    return {x:ev.clientX+sl, y:ev.clientY+st};
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            width: 40px;
            height: 40px;
            background: #CCC;
            position: absolute;
        }
    </style>
    <script type="text/javascript">

        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x:ev.clientX+sl, y:ev.clientY+st};
        }

        document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDiv = document.getElementById('div1');
            var pos = getPos(oEvent);

            oDiv.style.left = pos.x + 'px';
            oDiv.style.top = pos.y + 'px';
        };
    </script>
</head>
<body style="height: 30000px">
    <div id="div1"></div>
</body>
</html>
下面的功能是很多个div，跟在鼠标后面一大串
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 300px;
            top: 200px;
        }
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x:ev.clientX+sl, y:ev.clientY+st};
        }
        var k = 0;
        document.onmousemove = function(ev) {
            k++;
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            var aDiv = document.getElementsByTagName('div');
            var len = aDiv.length;

            aDiv[0].style.left = pos.x + 'px';
            aDiv[0].style.top = pos.y + 'px';

            for (var i = len - 1; i > 0; i--) {
                aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';
                aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';
            }
        };
    </script>
</head>
<body>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>
    <div><img src="http://pic.58pic.com/58pic/13/59/88/32W58PICQpk_1024.jpg"></div>

</body>
</html>

键盘事件，keyCode

onkeydown
onkeyup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zns</title>
</head>
<body>
    <script type="text/javascript">
        document.onkeydown = function(ev) {
            var oEvent = ev || event;
            alert(oEvent.keyCode);
        };
    </script>
</body>
</html>
a:65  b:66 ......
要求：键盘控制div的移动
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zns</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        document.onkeydown = function(ev) {
            var oEvent = ev || event;
            var code = oEvent.keyCode;
            switch(code) {
                case 37:
                    oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
                    break;
                case 38:
                    oDiv.style.top = oDiv.offsetTop - 5 + 'px';
                    break;
                case 39:
                    oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
                    break;
                case 40:
                    oDiv.style.top = oDiv.offsetTop + 5 + 'px';
                    break;                      
            }
        };
    </script>
</body>
</html>
上面代码，满足了左键右键移动div的要求，但是，基于系统本身的特点（原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间。比如，当你长按a的时候，屏幕上先是出现一个a，顿一下然后才出现第二个第三个一串a，这是系统为了考虑行动缓慢的老人，故意延迟一下时间，因为老人按的比较慢，避免出现一串a）但也同时造成了我们的困扰，你按一下左键，也是顿一下，这是不行的，如何解决??解决方案：先开一个定时器，让div一直处于（往4个方向）准备移动的状态（初始4个方向的值都是false，div就保持在原地不动），当按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动，松开方向键，这个方向的值就改变为false , div就停止这个方向移动了
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zns</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');

        var key_left = false;
        var key_right = false;
        var key_bottom = false;
        var key_top = false;
        var timer = null;

        setInterval(function() {
            if(key_left) {
                oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
            } else if(key_right) {
                oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
            } else if(key_top) {
                oDiv.style.top = oDiv.offsetTop - 5 + 'px';
            } else if(key_bottom) {
                oDiv.style.top = oDiv.offsetTop + 5 + 'px';
            }
        }, 50);


        document.onkeydown = function(ev) {
            var oEvent = ev || event;
            var code = oEvent.keyCode;
            switch(code) {
                case 37:
                    key_left = true;
                    break;
                case 38:
                    key_top = true;
                    break;
                case 39:
                    key_right = true;
                    break;
                case 40:
                    key_bottom = true;
                    break;
            }
        };

        document.onkeyup = function(ev) {
            var oEvent = ev || event;
            var code = oEvent.keyCode;

            switch(code) {
                case 37:
                    key_left = false;
                    break;
                case 38:
                    key_top = false;
                    break;
                case 39:
                    key_right = false;
                    break;
                case 40:
                    key_bottom = false;
                    break;
            }
        };
    </script>
</body>
</html>

#### 需求：回车键按下，input框内的内容追加到textarea中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zns</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <input id="txt1" type="text" /><br>
    <textarea id="txt2" rows="10" cols="40" style="margin-top: 10px;"></textarea>
    <script type="text/javascript">
        var oTxt1 = document.getElementById('txt1');
        var oTxt2 = document.getElementById('txt2');
        // oTxt1内写完时候，焦点在oTxt1内，这时候回车，keydown应该加在oTxt1上
        oTxt1.onkeydown = function(ev) {
            var oEvent = ev || event;
            if(oEvent.keyCode == 13) {
                oTxt2.value += oTxt1.value + '\n';
                oTxt1.value = '';
            }
        };

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

需求：回车和Ctrol键同时按下才提交

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zns</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <input id="txt1" type="text" /><br>
    <textarea id="txt2" rows="10" cols="40" style="margin-top: 10px;"></textarea>
    <script type="text/javascript">
        var oTxt1 = document.getElementById('txt1');
        var oTxt2 = document.getElementById('txt2');
        // oTxt1内写完时候，焦点在oTxt1内，这时候回车，keydown应该加在oTxt1上
        oTxt1.onkeydown = function(ev) {
            var oEvent = ev || event;
            if(oEvent.keyCode == 13 && oEvent.ctrlKey) {
                oTxt2.value += oTxt1.value + '\n';
                oTxt1.value = '';
            }
        };

    </script>
</body>
</html>
GY_U_YG
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
鼠标键盘事件及事件冒泡.pptx
05-20
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件（案例）;2、键盘事件;2、键盘事件（案例）;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与...
事件对象
koukou0419的博客
06-02 88
//事件对象 //IE系统不会把事件对象传给e，而是传给 window.event div.onclick=function(e){ var event=e||window.event; console.log(event); }
五、JavaScript 事件——鼠标事件，键盘事件，冒泡事件
小羊的博客
09-05 1067
1. 事件的定义 当我们对 HTML 当中的标签对象进行操作时，可以触发一系列的事件，例如：单击时，双击时，回车时，移入移出时，均可触发js事件 1.1 页面元素 所有html当中的标签，都是页面元素。 div button img h1~h6 p table form …… 1.2 可发生的事件 单击 双击 回车 移入 移出 右键 ……..
键盘和鼠标事件以及事件冒泡
qq_45903009的博客
01-11 374
day11 文章目录day11一：事件1·1：事件的定义：1·2：事件对象(Event)：1·3：事件对象的【兼容】:1·4：事件的三要素：二：鼠标事件对象的属性2·1：坐标事件三：键盘事件对应的属性四：事件流4·1：事件冒泡4.1.1:定义：4.1.2:阻止事件的冒泡4·1·3：阻止浏览器的默认行为 一：事件 1·1：事件的定义： 所谓事件其实就是是对html的元素进行某种操作 1·2：事件对象(Event)： 当某一个事件被触发的时候产生的对象，就是事件的对象。 1·3：事件对象的【兼容】: docum
JavaScript事件类型——鼠标与滚轮事件及鼠标事件对象
TalonZhang的博客
11-20 431
鼠标事件是 Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了 9 个鼠标事件。 鼠标事件： click： 用户单击主鼠标按钮（一般为左键）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序即可以通过键盘也可以通过鼠标执行。 dblclick： 在用户双击主鼠标按钮时触发。 mousedown： 用户按下任意鼠标按钮时触发。...
【JavaScript】鼠标、键盘的基础事件
m0_63235356的博客
08-31 441
绑定事件首先得有事件源，即获取到指定元素，可以参考我之前的博客。【JavaScript】获取网页元素_折途的博客-CSDN博客分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起。...
JavaScript 鼠标事件和键盘事件
m0_55201788的博客
01-17 472
鼠标事件 触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发 ...
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 3844
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
[JavaScript]基础事件
程序员云锦的博客
12-17 999
什么是事件 一个事件就是一个用户在访问网页时，所使用键盘或者鼠标对网页做出某种操作，这就是一个基础事件 在js中，用户与文档交互基础事件又分为鼠标事件与键盘事件 例如： 当用户点击鼠标时 当网页加载后 当图像加载后 当鼠标移至元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户敲击按键时 示例演练： <div>我是一个div</div> <input type="text" id="input" value=''> <script>
Web基础——JavaScript之事件绑定与事件对象
热门推荐
威威的博客
01-12 1万+
目录1.事件的绑定2.事件的绑定（注意事项）3.失去焦点和获得焦点4.键盘事件5.鼠标事件6.表单事件7.页面加载事件8.下拉框事件9.事件对象10.currentTarget和target的区别11.事件的冒泡现象12.阻止事件冒泡的行为13.元素的默认行为14.事件捕获15.事件委托16.设置元素的自带属性以及设置元素的css样式17.开关案例18.排他思想19.图片跟随鼠标20.定位到搜索框 1.事件的绑定 <!DOCTYPE html> <html> <head&gt
用HTML写一个冒泡事件,javascript 事件流 捕获与冒泡
weixin_36379029的博客
06-05 287
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为绑定事件首先我们要先绑定事件 绑定事件有三种1)在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等只...
JavaScript 事件对象介绍
12-01
最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况; 此外还可以修改一般事件的捕获/冒泡流的函数; 一 事件对象 // 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前...
浅谈Javascript鼠标和滚轮事件
01-19
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。 mouseenter：当鼠标图标从元素外移动至元素边界内时触发。该事件不支持冒泡，而且当鼠标在元素的上表面移动时负触发此事件。该...
详解javascript中的事件处理
01-19
一.事件传播机制 　客户端JavaScript程序（就是浏览器啦）采用了异步事件驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的...例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按
what-input：用于跟踪当前输入方法（鼠标指针，键盘或触摸）的全局实用程序
02-24
怎么运行的什么Input使用window上的事件冒泡监视鼠标，键盘和触摸事件（通过mousedown ， keydown和touchstart ）。 然后，它设置或更新data-whatinput属性。 支持指针事件，但请注意， pen已重新映射为可touch 。 ...
JavaScript：原生JS实现图片懒加载
郭宇的博客
06-12 1万+
懒加载 用户体验 优化
JavaScript的执行原理
郭宇的博客
06-05 1万+
JavaScript运行原理 单线程 JS引擎 执行栈 任务队列 同步、异步
原生JavaScript实现Ajax（二）：同步，异步，GET，POST
郭宇的博客
05-31 7483
ajax 同步，异步，GET，POST
OpenGL/webGL底层图元的绘制原理
郭宇的博客
12-05 3676
一、什么是图元 图元是基本的几何图形，图元是构成其他复杂图形的基本要素，比如：点、线段、、三角形、矩形、圆弧、圆角矩形、扇形等等。 这些图元可以构成其他的复杂图形，在底层被大量的调用执行。 注：比如业务层一个动画、一个复杂的图形，对于画直线函数的调用可能是成百上千次，甚至是成千上万次的，所以图元算法的优劣对性能的影响是非常大的。 二、什么是OpenGL OpenGL的英文名称：Open Graph...
关于W3C制定的 JavaScript 标准事件模型
最新发布
05-20
JavaScript 标准事件模型的核心是事件流模型，它定义了事件在文档中的传播方式，即从顶层元素开始向下传递，最终到达触发事件的元素，然后再从触发元素开始向上冒泡，直到到达文档顶级元素为止。这种事件流模型可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值