JavaScript—事件—# 一串跟着鼠标移动的Div # 键盘回车提交留言

最新推荐文章于 2022-08-21 21:55:02 发布

fuzuxian

最新推荐文章于 2022-08-21 21:55:02 发布

阅读量117

点赞数

分类专栏： JavaScript 文章标签： js javascript 事件

本文链接：https://blog.csdn.net/image_fzx/article/details/103794927

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，鼠标事件

一串跟着鼠标移动的Div——javascript
文本：
event对象：用来获取事件的详细信息：鼠标位置、键盘按键
例子：获取鼠标位置：clientX
document的本质：document.childNodes[0].tagName

获取event对象(兼容性写法) —— var oEvent=ev||event;

事件流 —— 事件冒泡
取消冒泡：oEvent.cancelBubble=true

鼠标位置 ? 可视区位置：clientX、clientY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一串跟着鼠标移动的Div@Cookie_fzx</title>
</head>
    <style>
        div{width:10px; height:10px; background: darkviolet; position: absolute;}
    </style>
    <script>
        function getPos(ev) {    // 获取鼠标在页面的绝对位置
            var scrollTop=document.documentElement.scrollTop ||  document.body.scrollTop  ;
            var scrollLeft=document.documentElement.scrollLeft   ||  document.body.scrollLeft;
            return {y: ev.clientY+scrollTop, x: ev.clientX+scrollLeft };
        }
        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>
<body>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div> 
</body>
</html>

2. 键盘事件

键盘回车提交——javascript

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

其他属性： ctrlKey、shiftKey、altKey

zEvent.keyCode == 13 && zEvent.ctrlKey

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件—键盘回车提交留言</title>
    <script>
        window.onload=function () {
            var zText1=document.getElementById('text1');
            var zText2=document.getElementById('text2');

            zText1.onkeydown=function (ev) {
                var zEvent= ev || event;
                if(zEvent.keyCode == 13   &&   zEvent.ctrlKey){   //  entry  并且   ctrl
                    zText2.value+= zText1.value + '\n';
                    zText1.value='';
                }
            };
        };
    </script>
</head>
<body>
<input id="text1" type="text" />
<br/><br/>
<textarea id="text2"   type="text"   rows="10"  cols="40" ></textarea>
</body>
</html>

fuzuxian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—事件—# 一串跟着鼠标移动的Div # 键盘回车提交留言

文本：event对象：用来获取事件的详细信息：鼠标位置、键盘按键例子：获取鼠标位置：clientXdocument的本质：document.childNodes[0].tagName获取event对象(兼容性写法) —— var oEvent=ev||event;事件流 —— 事件冒泡取消冒泡：oEvent.cancelBubble=true鼠标位置 ? 可视区位置...
复制链接

扫一扫