js事件基础（事件event对象,事件冒泡，鼠标键盘事件）

最新推荐文章于 2024-03-25 14:32:41 发布

蔡蔡动起来

最新推荐文章于 2024-03-25 14:32:41 发布

阅读量2k

点赞数

分类专栏：智能社_js 文章标签：事件event对象事件冒泡鼠标键盘事件

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82695089

版权

智能社_js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件对象（获取事件的详细信息）和事件冒泡：

什么是event对象：获取事件的详细信息：鼠标位置、键盘按键。

document本质：document.childNodes[0].tagName

获取event对象（兼容性写法）：var oEvent=ev||event;

//点击界面没有反应。因为body里面没有内容，没有撑开。
<script>
        window.onload=function(){
            document.body.onclick=function(){
                alert('a');
            }
        }
</script>
</head>
<body>
</body>

//此时点击黑框中的东西，就可弹出。
<script>
        window.onload=function(){
            document.body.onclick=function(){
                alert('a');
            }
        }
</script>
</head>
<body style="border: 1px solid black">
<input type="button" value="aaa"/>
</body>

直接document.onclick就可以啦。

事件event对象：
用来获取事件的详细信息：鼠标位置、键盘按键。
鼠标事件：
可视区位置：clientX、clientY
例子：跟随鼠标的div 消除滚动条的影响滚动条的意义：可视区与页面顶部的距离

<script>
        window.onload=function(){
            document.onclick=function(){
                //IE
                alert(event.clientX+'  '+event.clientY);//获取横纵坐标。
            }
        }
</script>

<script>
        window.onload=function(){
            document.onclick=function(ev){
                //IE
                //alert(event.clientX+'  '+event.clientY);//获取横纵坐标。
                //火狐
                alert(ev.clientX+'  '+ev.clientY);

                //兼容的事件对象
                var oEvent=ev||event;
                alert(oEvent.clientX+'  '+oEvent.clientY)

            }
        }
    </script>

事件冒泡：事件会顺着层级一直往它的父级上传。一直传到document上为止。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            padding: 100px;
        }
    </style>
</head>
<body onclick="alert('body')">
<div style="background: #cccccc" 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>

大部分时候事件冒泡会给我们带来麻烦。我们一般不会主动使用它。

点击按钮灰框显示，点击灰框和按钮以外的地方，灰框消失。


<style>
        #div1{
            width: 100px;
            height: 100px;
            background: #cccccc;
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('oBtn');
            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 type="button" id="oBtn" value="显示"/>
<div id="div1"></div>
</body>

以上这种做法错误，灰框非但不会消失，也不会显示。这就是事件冒泡带来的影响。

 <script>
        window.onload=function(ev){
            var oBtn=document.getElementById('oBtn');
            var oDiv=document.getElementById('div1');

            oBtn.onclick=function(ev){
                var oEvent=ev||event;
                oDiv.style.display='block';
                oEvent.cancelBubble=true;
                /*alert('按钮被点击了')*/
            }
            document.onclick=function(){
                oDiv.style.display='none';
                /*alert('document被点击了')*/
            }
        }
    </script>

div一直跟着鼠标走。

<style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        document.onmousemove=function(ev){
            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>

存在隐患：

//div和鼠标的距离会随着滚动条的距离增大而增大。
<body style="height: 2000px;">
<div id="div1"></div>
</body>

 <script>
        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+scrollTop+'px';
        }
    </script>

clientY要配合scrollTop来使用。但凡遇到clientX和clientY就要用到scrollTop和scrollLeft.

封装成函数：

 <script>
        function getPos(ev){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

            return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
        }
        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>

例子：很多小div,div跟着鼠标移动。

style>
        div{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
        }
    </style>

    <script>
        //获取的是鼠标的位置
        function getPos(ev){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

            return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
        }

        document.onmousemove=function(ev){
            var aDiv=document.getElementsByTagName('div');
            var oEvent=ev||event;
            var pos=getPos(oEvent);

            for(var i=aDiv.length-1;i>0;i--){
                //后一个跟前一个走
                aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
                aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
            }
            //第一个跟鼠标走
            aDiv[0].style.left=pos.x+'px';
            aDiv[0].style.top=pos.y+'px';
        }
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

键盘事件：
keyCode
其他属性：ctrlKey、shiftKey、altKey

//弹出我们按的ASCII码值
<script>
        document.onkeydown=function(ev){
            var oEvent=ev||event;
            alert(oEvent.keyCode);
        }
</script>

例子：键盘控制div移动。

 <style>
        #div1{
            width: 100px;
            height: 100px;
            background: #cccccc;
            position: absolute;
        }
    </style>
    <script>
        document.onkeydown=function(ev){
            var oEvent=ev||event;
            //alert(oEvent.keyCode);
            var oDiv=document.getElementById('div1');
            if(oEvent.keyCode==38){
                oDiv.style.top=oDiv.offsetTop-10+'px';
            }else if(oEvent.keyCode==40){
                oDiv.style.top=oDiv.offsetTop+10+'px';
            }else if(oEvent.keyCode==37){
                oDiv.style.left=oDiv.offsetLeft-10+'px';
            }else if(oEvent.keyCode==39){
                oDiv.style.left=oDiv.offsetLeft+10+'px';
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>

其他属性：ctrl+回车提交留言

点击按钮提交：

<script>
        window.onload=function(){
            var oTxt1=document.getElementById('txt1');
            var oTxt2=document.getElementById('txt2');
            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
                oTxt2.innerHTML+=oTxt1.value+'\n';
                oTxt1.value='';
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="发布"/><br/>
<textarea name="" id="txt2" cols="30" rows="10">
</textarea>

</body>

按回车提交：

 <script>
        window.onload=function(){
            var oTxt1=document.getElementById('txt1');
            var oTxt2=document.getElementById('txt2');

            oTxt1.onkeydown=function(ev){
                var oEvent=ev||event;
                if(oEvent.keyCode==13){
                    oTxt2.innerHTML+=oTxt1.value+'\n';
                    oTxt1.value='';
                }
            }

        }
    </script>

按ctrl和回车提交：

<script>
        window.onload=function(){
            var oTxt1=document.getElementById('txt1');
            var oTxt2=document.getElementById('txt2');

            oTxt1.onkeydown=function(ev){
                var oEvent=ev||event;
                if(oEvent.keyCode==13&&oEvent.ctrlKey){
                    oTxt2.innerHTML+=oTxt1.value+'\n';
                    oTxt1.value='';
                }
            }

        }
    </script>

蔡蔡动起来

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js事件基础（事件event对象,事件冒泡，鼠标键盘事件）

事件对象（获取事件的详细信息）和事件冒泡：什么是event对象：获取事件的详细信息：鼠标位置、键盘按键。 document本质：document.childNodes[0].tagName获取event对象（兼容性写法）：var oEvent=ev||event;//点击界面没有反应。因为body里面没有内容，没有撑开。&lt;script&gt...
复制链接

扫一扫