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

1, 鼠标事件

JavaScript—事件—# 一串跟着鼠标移动的Div # 键盘回车提交留言_第1张图片
文本:
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—事件—# 一串跟着鼠标移动的Div # 键盘回车提交留言_第2张图片

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>

你可能感兴趣的:(JavaScript)