js学习第12天

最新推荐文章于 2024-11-13 17:27:29 发布

不爱吃kfc.

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量57

点赞数

文章标签：键盘事件事件监听事件委托 JavaScript 事件绑定

本文链接：https://blog.csdn.net/weixin_50915530/article/details/126635992

版权

### 键盘事件及键盘事件对象

键盘事件的事件元素全都是document

1：键盘弹起的时刻触发 onkeyup

2：键盘按下的时刻触发，缺陷单独了录入功能字符（shift,ctrl)也会触发

onkeydown

3：生成一个字符时触发 onkeypress

键盘的事件对象 key是键盘录入的字符 e.key

获取键盘录入的ASC码

(e.keyCode)(e.which)(e.charCode)三种

兼容写法：var myKeyCode = e.keyCode || e.which || e.charCode

判断ctrl是否被按下:e.ctrlKey

### 事件绑定的三种方式

1：通过html元素绑定

2：通过js对象绑定

两者都有缺陷 1>无法为同一元素多次绑定相同的事件

2>无法决定事件流的传递是冒泡还是捕获

3：第三种事件绑定：事件监听（先捕获再冒泡）

dom对象.addEventListener("去掉on的事件","回调函数","[是否捕获]")

true为捕获false为冒泡,默认不写是false

好处：可以为同一元素多次绑定相同的事件

可以决定事件流的传递是冒泡还是捕获

解绑：1:js对象的解绑目的就是将事件右值赋值为null

2:事件监听的解绑，必须保证回调函数是同一个

### 事件的委托

委托的概念：（你的事让别人干），依赖于冒泡机制，将子元素触发的事件通过父元素实现

好处1：可以批量将子元素的事件绑定通过父元素实现，提高运行效率

好处2：可以为还没绑定的子元素提前绑定

完美拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            left: 200px;
            top: 200px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
      var obox = document.querySelector("#box")
      obox.onmousedown = function(evt){
                    var e = evt || event;
                    var offsetX = e.offsetX;
                    var offsetY = e.offsetY;
               document.onmousemove = function(evt){
                    var e = evt || event;
                   var left = e.pageX - offsetX;
                   var top = e.pageY - offsetY;
                   if(left <0){
                       left = 0
                   }
                   var maxleft = innerWidth - obox.offsetWidth;
                   if(left>maxleft){
                       left = maxleft;
                   }
                   
                   if(top<0){
                       top = 0;
                   }

                   var maxtop = innerHeight - obox.offsetHeight;
                   if(top>maxtop){
                       top = maxtop;
                   }

                    obox.style.left = left+ "px"
                    obox.style.top = top + "px"
               }  
               document.onmouseup = function(){
                document.onmousemove = null
               }   
      }




</script>