2021-05-13js中事件的传播及BOM元素

最新推荐文章于 2024-08-28 14:58:40 发布

到处是知识盲区~

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量47

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55679349/article/details/116749308

版权

Js事件的传播：

事件捕获：
1）捕获阶段：w3c认定捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认不会触发事件
2）目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3）冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
拖拽练习
拖拽的流程：当鼠标在被拖拽元素上按下时，开始拖拽，元素跟随鼠标移动，当鼠标松开，固定到当前位置
键盘事件
键盘事件一般可以绑定给一些可以获取到焦点的对象或者是document
onkeyup是键盘抬起，onkeydown键盘按下，keyCode按键对应的编码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
          /*  //按键被按下
            document.οnkeyup=function(){
                console.log("键盘松开了")
            }
            //按键被松开
            document.οnkeydοwn=function(){
                console.log("键盘按下了")
            }*/
            var ipt=document.getElementsByTagName("input")[0];
            ipt.onkeydown=function(event){
                event=event||window.event;
                if(event.keyCode>=48&&event.keyCode<=57){
                    //在文本框中输入内容，属于onkeydown的默认行为，取消返回false
                    return false;
                }
            }

        }
    </script>
</head>
<body>
<input type="text" placeholder="请输入姓名"/>
</body>
</html>

方块随按键移动事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: darkred;
            position: relative;
        }
    </style>
    <script>
        window.onload=function(){
            //为document绑定按键事件
            document.onkeydown=function(event){
                event=event||window.event;
                var speed=10;
                if(event.ctrlKey){
                    speed=500;
                }
                switch(event.keyCode){
                    case 37:
                        box.style.left=box.offsetLeft - speed+"px";
                        break;
                    case 39:
                        box.style.left=box.offsetLeft + speed+"px";
                        break;
                    case 38:
                        box.style.top=box.offsetTop - speed+"px";
                        break;
                    case 40:
                        box.style.top=box.offsetTop + speed+"px";
                        break;
                }
            }
        }
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

在这里插入图片描述
BOM元素：浏览器对象模型
可以通过js来操作浏览器
BOM对象：
Window，代表整个浏览器窗口，同时window也可以是网页的全局对象
Navigator，代表当前浏览器的信息，通过该对象来识别不同的浏览器
Location，代表当前浏览器的地址栏信息
History，代表浏览器历史记录，由于隐私原因，该对象不能获取具体历史记录，只能操作浏览器向前或向后翻页
Screen，代表用户屏幕信息，通过该对象可以获取用户的显示器的相关信息
Netscape网景公司
UserAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
在这里插入图片描述
reload刷新
confirm（）显示有确认和取消按钮的对话框

定时器简介：
在这里插入图片描述
延时调用
//延时调用
setTimeout(function(){
console.log(num++);
},3000)
延时调用的函数不会立即执行，而会隔一段时间后执行，而且只会执行一次

到处是知识盲区~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-05-13js中事件的传播及BOM元素

Js事件的传播：事件捕获：1）捕获阶段：w3c认定捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认不会触发事件2）目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件3）冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件拖拽练习拖拽的流程：当鼠标在被拖拽元素上按下时，开始拖拽，元素跟随鼠标移动，当鼠标松开，固定到当前位置键盘事件键盘事件一般可以绑定给一些可以获取到焦点的对象或者是documentonkeyup是键盘抬起，onkeydown键盘
复制链接

扫一扫