JavaScript07-事件

最新推荐文章于 2024-07-17 20:16:35 发布
最新推荐文章于 2024-07-17 20:16:35 发布
阅读量111 收藏
点赞数
分类专栏： JavaScript基础笔记 文章标签： javascript 开发语言 ecmascript 事件 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1066223647/article/details/124966693
版权

JavaScript07-事件

文章目录

一、事件对象

10.1 事件对象基本使用（显示鼠标指针坐标为例）

onmousemove

该事件将会在鼠标在元素中移动时被触发

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。

在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

   #areaDiv {
      border: 1px solid black;
      width: 300px;
      height: 50px;
      margin-bottom: 10px;
   }
   
   #showMsg {
      border: 1px solid black;
      width: 300px;
      height: 20px;
   }

</style>
<script type="text/javascript">

   window.onload = function(){
      /*
       * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
       */
      //获取两个div
      var areaDiv = document.getElementById("areaDiv");
      var showMsg = document.getElementById("showMsg");
      
      /*
       * onmousemove
       *     - 该事件将会在鼠标在元素中移动时被触发
       * 
       * 事件对象
       *     - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
       *        在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
       */
      areaDiv.onmousemove = function(event){
         
         /*
          * 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
          *     在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
          */
         /*if(!event){
            event = window.event;
         }*/
         
         //解决事件对象的兼容性问题
         event = event || window.event;
         
         /*
          * clientX可以获取鼠标指针的水平坐标
          * cilentY可以获取鼠标指针的垂直坐标
          */
         var x = event.clientX;
         var y = event.clientY;
         
         //alert("x = "+x + " , y = "+y);
         
         //在showMsg中显示鼠标的坐标
         showMsg.innerHTML = "x = "+x + " , y = "+y;
         
      };
      
   };

</script>
</head>
<body>

   <div id="areaDiv"></div>
   <div id="showMsg"></div>

</body>
</html>

10.2 div追踪鼠标指针练习

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*
             * 开启box1的绝对定位
             */
            position: absolute;
         }
         
      </style>
      
      <script type="text/javascript">
         window.onload = function(){
            
            /*
             * 使div可以跟随鼠标移动
             */
            
            //获取box1
            var box1 = document.getElementById("box1");
            //绑定鼠标移动事件
            document.onmousemove = function(event){
               
               //解决兼容问题
               event = event || window.event;
               
               //获取滚动条滚动的距离
               /*
                * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                * 火狐等浏览器认为浏览器的滚动条是html的，
                */
               var st = document.body.scrollTop || document.documentElement.scrollTop;
               var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
               //var st = document.documentElement.scrollTop;
               
               
               //获取到鼠标的坐标
               /*
                * clientX和clientY
                *     用于获取鼠标在当前的可见窗口的坐标
                * div的偏移量，是相对于整个页面的
                * 
                * pageX和pageY可以获取鼠标相对于当前页面的坐标
                *     但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                */
               var left = event.clientX;
               var　top = event.clientY;
               
               //设置div的偏移量
               box1.style.left = left + sl + "px";
               box1.style.top = top + st + "px";
               
            };
            
            
         };
         
         
      </script>
   </head>
   <body style="height: 1000px;width: 2000px;">
      <div id="box1"></div>
   </body>
</html>

10.3 事件的冒泡

事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
         }
         
         #s1{
            background-color: yellow;
         }
         
         
      </style>
      <script type="text/javascript">
         
         window.onload = function(){

            
            //为s1绑定一个单击响应函数
            var s1 = document.getElementById("s1");
            s1.onclick = function(event){
               event = event || window.event;
               alert("我是span的单击响应函数");
               
               //取消冒泡
               //可以将事件对象的cancelBubble设置为true，即可取消冒泡
               event.cancelBubble = true;
            };
            
            //为box1绑定一个单击响应函数
            var box1 = document.getElementById("box1");
            box1.onclick = function(event){
               event = event || window.event;
               alert("我是div的单击响应函数");
               
               event.cancelBubble = true;
            };
            
            //为body绑定一个单击响应函数
            document.body.onclick = function(){
               alert("我是body的单击响应函数");
            };
            
            
         };
         
         
      </script>
   </head>
   <body>
      
      <div id="box1">
         我是box1
         <span id="s1">我是span</span>
      </div>
      
   </body>
</html>

二、事件的委派

为每一个超链接都绑定一个单击响应函数，这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，而且这些操作只能

为已有的超链接设置事件，而新添加的超链接必须重新绑定

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

我们可以尝试将其绑定给元素的共同的祖先元素，但是有bug

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素

的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript">
         
         window.onload = function(){
            
            var u1 = document.getElementById("u1");
            
            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
               //创建一个li
               var li = document.createElement("li");
               li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
               
               //将li添加到ul中
               u1.appendChild(li);
            };
            
            
            /*
             * 为每一个超链接都绑定一个单击响应函数
             * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
             *     而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
             */
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            /*for(var i=0 ; i<allA.length ; i++){
               allA[i].onclick = function(){
                  alert("我是a的单击响应函数！！！");
               };
            }*/
            
            /*
             * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
             * 我们可以尝试将其绑定给元素的共同的祖先元素
             * 
             * 事件的委派
             *     - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
             *        从而通过祖先元素的响应函数来处理事件。
             *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
             */
            
            //为ul绑定一个单击响应函数
            u1.onclick = function(event){
               event = event || window.event;
               
               /*
                * target
                *     - event中的target表示的触发事件的对象
                */
               //alert(event.target);
               
               
               //如果触发事件的对象是我们期望的元素，则执行否则不执行
               if(event.target.className == "link"){
                  alert("我是ul的单击响应函数");
               }
               
            };
            
         };
         
      </script>
   </head>
   <body>
      <button id="btn01">添加超链接</button>
      
      <ul id="u1" style="background-color: #bfa;">
         <li>
            <p>我是p元素</p>
         </li>
         <li><a href="javascript:;" class="link">超链接一</a></li>
         <li><a href="javascript:;" class="link">超链接二</a></li>
         <li><a href="javascript:;" class="link">超链接三</a></li>
      </ul>
      
   </body>
</html>

三、事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()

  • 通过这个方法也可以为元素绑定响应函数

  • 参数：

    1. 事件的字符串，不要on

    2. 回调函数 ，当事件触发时该函数会被调用

    3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
      使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
      这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
      这个方法不支持IE8及以下的浏览器

attachEvent()：在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

定义一个函数，用来为指定元素绑定响应函数

addEventListener()中的this，是绑定事件的对象

attachEvent()中的this，是window

需要统一两个方法this

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         window.onload = function(){
            
            /*
             * 点击按钮以后弹出一个内容
             */
            //获取按钮对象
            var btn01 = document.getElementById("btn01");
            
            /*
             * 使用 对象.事件 = 函数 的形式绑定响应函数，
             *     它只能同时为一个元素的一个事件绑定一个响应函数，
             *     不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
             */
            
            //为btn01绑定一个单击响应函数
            /*btn01.onclick = function(){
               alert(1);
            };*/
            
            //为btn01绑定第二个响应函数
            /*btn01.onclick = function(){
               alert(2);
            };*/
            
            /*
             * addEventListener()
             *     - 通过这个方法也可以为元素绑定响应函数
             *  - 参数：
             *        1.事件的字符串，不要on
             *        2.回调函数，当事件触发时该函数会被调用
             *        3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             * 
             * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
             *     这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
             * 
             * 这个方法不支持IE8及以下的浏览器
             */
            /*btn01.addEventListener("click",function(){
               alert(1);
            },false);
            
            btn01.addEventListener("click",function(){
               alert(2);
            },false);
            
            btn01.addEventListener("click",function(){
               alert(3);
            },false);*/
            
            /*
             * attachEvent()
             *     - 在IE8中可以使用attachEvent()来绑定事件
             *  - 参数：
             *        1.事件的字符串，要on
             *        2.回调函数
             * 
             *  - 这个方法也可以同时为一个事件绑定多个处理函数，
             *        不同的是它是后绑定先执行，执行顺序和addEventListener()相反
             */
            /*btn01.attachEvent("onclick",function(){
               alert(1);
            });
            
            btn01.attachEvent("onclick",function(){
               alert(2);
            });
            
            btn01.attachEvent("onclick",function(){
               alert(3);
            });*/
            
            /*btn01.addEventListener("click",function(){
               alert(this);
            },false);*/
            
            /*btn01.attachEvent("onclick",function(){
               alert(this);
            });*/
            
            bind(btn01 , "click" , function(){
               alert(this);
            });
         
            
         };
         
         //定义一个函数，用来为指定元素绑定响应函数
         /*
          * addEventListener()中的this，是绑定事件的对象
          * attachEvent()中的this，是window
          *  需要统一两个方法this
          */
         /*
          * 参数：
          *     obj 要绑定事件的对象
          *     eventStr 事件的字符串(不要on)
          *  callback 回调函数
          */
         function bind(obj , eventStr , callback){
            if(obj.addEventListener){
               //大部分浏览器兼容的方式
               obj.addEventListener(eventStr , callback , false);
            }else{
               /*
                * this是谁由调用方式决定
                * callback.call(obj)
                */
               //IE8及以下
               obj.attachEvent("on"+eventStr , function(){
                  //在匿名函数中调用回调函数
                  callback.call(obj);
               });
            }
         }
         
      </script>
   </head>
   <body>
      
      <button id="btn01">点我一下</button>
   </body>
</html>

四、事件的传播

关于事件的传播网景公司和微软公司有不同的理解，微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素

上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给

后代元素
W3C综合了两个公司的方案，将事件传播分成了三个阶段

​ 1.捕获阶段

​ 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

​ 2.目标阶段

​ 事件捕获到目标元素，捕获结束开始在目标元素上触发事件

​ 3.冒泡阶段

​ 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

IE8及以下的浏览器中没有捕获阶段

五、拖拽练习

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         
         #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
         }
         
         #box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            
            left: 200px;
            top: 200px;
         }
         
      </style>
      
      <script type="text/javascript">
         
         window.onload = function(){
            /*
             * 拖拽box1元素
             *  - 拖拽的流程
             *        1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
             *        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
             *        3.当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
             */
            
            //获取box1
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var img1 = document.getElementById("img1");
            
            //开启box1的拖拽
            drag(box1);
            //开启box2的
            drag(box2);
            
            drag(img1);
            
            
            
            
         };
         
         /*
          * 提取一个专门用来设置拖拽的函数
          * 参数：开启拖拽的元素
          */
         function drag(obj){
            //当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
            obj.onmousedown = function(event){
               
               //设置box1捕获所有鼠标按下的事件
               /*
                * setCapture()
                *     - 只有IE支持，但是在火狐中调用时不会报错，
                *        而如果使用chrome调用，会报错
                */
               /*if(box1.setCapture){
                  box1.setCapture();
               }*/
               obj.setCapture && obj.setCapture();
               
               
               event = event || window.event;
               //div的偏移量 鼠标.clentX - 元素.offsetLeft
               //div的偏移量 鼠标.clentY - 元素.offsetTop
               var ol = event.clientX - obj.offsetLeft;
               var ot = event.clientY - obj.offsetTop;
               
               
               //为document绑定一个onmousemove事件
               document.onmousemove = function(event){
                  event = event || window.event;
                  //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
                  //获取鼠标的坐标
                  var left = event.clientX - ol;
                  var top = event.clientY - ot;
                  
                  //修改box1的位置
                  obj.style.left = left+"px";
                  obj.style.top = top+"px";
                  
               };
               
               //为document绑定一个鼠标松开事件
               document.onmouseup = function(){
                  //当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
                  //取消document的onmousemove事件
                  document.onmousemove = null;
                  //取消document的onmouseup事件
                  document.onmouseup = null;
                  //当鼠标松开时，取消对事件的捕获
                  obj.releaseCapture && obj.releaseCapture();
               };
               
               /*
                * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
                *     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
                *     如果不希望发生这个行为，则可以通过return false来取消默认行为
                * 
                * 但是这招对IE8不起作用
                */
               return false;
               
            };
         }
         
         
      </script>
   </head>
   <body>
      
      我是一段文字
      
      <div id="box1"></div>
      
      <div id="box2"></div>
      
      <img src="img/an.jpg" id="img1" style="position: absolute;"/>
   </body>
</html>

六、鼠标滚轮事件练习

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         
         #box1{
            width: 100px;
            height: 100px;
            background-color: red;
         }
         
      </style>
      <script type="text/javascript">
         
         window.onload = function(){
            
            
            //获取id为box1的div
            var box1 = document.getElementById("box1");
            
            //为box1绑定一个鼠标滚轮滚动的事件
            /*
             * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
             *     但是火狐不支持该属性
             * 
             * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
             *     注意该事件需要通过addEventListener()函数来绑定
             */
            
            
            box1.onmousewheel = function(event){
               
               event = event || window.event;
               
               
               //event.wheelDelta 可以获取鼠标滚轮滚动的方向
               //向上滚 120   向下滚 -120
               //wheelDelta这个值我们不看大小，只看正负
               
               //alert(event.wheelDelta);
               
               //wheelDelta这个属性火狐中不支持
               //在火狐中使用event.detail来获取滚动的方向
               //向上滚 -3  向下滚 3
               //alert(event.detail);
               
               
               /*
                * 当鼠标滚轮向下滚动时，box1变长
                *     当滚轮向上滚动时，box1变短
                */
               //判断鼠标滚轮滚动的方向
               if(event.wheelDelta > 0 || event.detail < 0){
                  //向上滚，box1变短
                  box1.style.height = box1.clientHeight - 10 + "px";
                  
               }else{
                  //向下滚，box1变长
                  box1.style.height = box1.clientHeight + 10 + "px";
               }
               
               /*
                * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                * 需要使用event来取消默认行为event.preventDefault();
                * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
                */
               event.preventDefault && event.preventDefault();
               
               
               /*
                * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
                * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                */
               return false;
               
               
               
               
            };
            
            //为火狐绑定滚轮事件
            bind(box1,"DOMMouseScroll",box1.onmousewheel);
            
            
         };
         
         
         function bind(obj , eventStr , callback){
            if(obj.addEventListener){
               //大部分浏览器兼容的方式
               obj.addEventListener(eventStr , callback , false);
            }else{
               /*
                * this是谁由调用方式决定
                * callback.call(obj)
                */
               //IE8及以下
               obj.attachEvent("on"+eventStr , function(){
                  //在匿名函数中调用回调函数
                  callback.call(obj);
               });
            }
         }
         
      </script>
   </head>
   <body style="height: 2000px;">
      
      <div id="box1"></div>
      
   </body>
</html>

七、键盘事件

键盘事件：

onkeydown：按键被按下

对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发，当onkeydown连续触发时，第一次和第二次之间会间隔稍微长

一点，其他的会非常的快，这种设计是为了防止误操作的发生。

在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中

onkeyup：按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

可以通过keyCode来获取按键的编码

​ 通过它可以判断哪个按键被按下

除了keyCode，事件对象中还提供了几个属性

​ altKey

​ ctrlKey

​ shiftKey

这个三个用来判断alt ctrl 和 shift是否被按下，如果按下则返回true，否则返回false

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         window.onload = function(){
            

            
            document.onkeydown = function(event){
               event = event || window.event;
               
               /*
                * 可以通过keyCode来获取按键的编码
                *     通过它可以判断哪个按键被按下
                * 除了keyCode，事件对象中还提供了几个属性
                *     altKey
                *     ctrlKey
                *     shiftKey
                *        - 这个三个用来判断alt ctrl 和 shift是否被按下
                *           如果按下则返回true，否则返回false
                */
               
               //console.log(event.keyCode);
               
               //判断一个y是否被按下
               //判断y和ctrl是否同时被按下
               if(event.keyCode === 89 && event.ctrlKey){
                  console.log("ctrl和y都被按下了");
               }
               
               
            };
            
            /*document.onkeyup = function(){
               console.log("按键松开了");
            };*/
            
            //获取input
            var input = document.getElementsByTagName("input")[0];
            
            input.onkeydown = function(event){
               
               event = event || window.event;
               
               //console.log(event.keyCode);
               //数字 48 - 57
               //使文本框中不能输入数字
               if(event.keyCode >= 48 && event.keyCode <= 57){
                  //在文本框中输入内容，属于onkeydown的默认行为
                  //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                  return false;
               }
               
               
            };
         };
         
         
      </script>
   </head>
   <body>
      
      <input type="text" />
      
   </body>
</html>

八、键盘控制移动div

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
         }
         
         
      </style>
      
      <script type="text/javascript">
         
         //使div可以根据不同的方向键向不同的方向移动
         /*
          * 按左键，div向左移
          * 按右键，div向右移
          * 。。。
          */
         window.onload = function(){
            
            //为document绑定一个按键按下的事件
            document.onkeydown = function(event){
               event = event || window.event;
               
               //定义一个变量，来表示移动的速度
               var speed = 10;
               
               //当用户按了ctrl以后，速度加快
               if(event.ctrlKey){
                  speed = 500;
               }
               
               /*
                * 37 左
                * 38 上
                * 39 右
                * 40 下
                */
               switch(event.keyCode){
                  case 37:
                     //alert("向左"); left值减小
                     box1.style.left = box1.offsetLeft - speed + "px";
                     break;
                  case 39:
                     //alert("向右");
                     box1.style.left = box1.offsetLeft + speed + "px";
                     break;
                  case 38:
                     //alert("向上");
                     box1.style.top = box1.offsetTop - speed + "px";
                     break;
                  case 40:
                     //alert("向下");
                     box1.style.top = box1.offsetTop + speed + "px";
                     break;
               }
               
            };
            
         };
         
         
      </script>
   </head>
   <body>
      <div id="box1"></div>
   </body>
</html>
MarxistVive
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript课件-07.pptx
03-14
在JavaScript课件-07.pptx中，主要讲述了JavaScript基础，特别是关于事件处理、BOM（Browser Object Model）以及表单对象的详细内容。下面将深入探讨这些知识点。 首先，JavaScript事件是网页与用户交互的核心机制...
exercicios-javascript-07-2014:Javascript练习
04-27
标题“exercicios-javascript-07-2014:Javascript练习”表明这是一个关于JavaScript编程的练习集合，可能是某个课程或个人学习项目的一部分。2014年7月的日期可能暗示这是针对初学者或者当时JavaScript语言版本的...
W3C Javascript 2010-07-19.zip
12-21
W3C，即万维网联盟，是制定互联网标准的重要组织，这个压缩包“W3C Javascript 2010-07-19.zip”很可能包含了2010年7月19日时W3C关于JavaScript的官方文档或指南。 JavaScript的核心特性包括： 1. 动态类型：变量...
m07-node
03-19
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程，实现了全栈开发的可能性。 在描述中，同样只提到了"m07-node"，这可能是课程的章节编号或者是特定项目的名字...
node-07-weather
03-26
在本项目"node-07-weather"中，我们探讨的是使用JavaScript进行服务器端编程，特别是在Node.js环境下构建一个简单的天气查询应用。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript...
更新商品前端接口编写
weixin_55639995的博客
07-12 413
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 539
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 536
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 316
解决页面放大，图片模糊的问题
高职软件技术实训室
whwzzc的博客
07-17 740
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。
ReactRouter v6升级的步骤
feixin369的博客
07-14 367
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 167
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 289
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
基于JAVA+SpringBoot+Vue+uniapp+协同过滤算法+爬虫+AI的减肥小程序
azhou的代码园
07-15 1397
小程序用户登录，注册，然后填写自己的个人信息（姓名，性别，出生日期，身高，当前体重），然后可以为自己添加减肥计划（比如 需要通过几周减肥XX斤变成目标体重，并且选择自己的运行类型（久坐不动，少量运行，中等运动），如果设置目标体重时，经计算得出每日减肥体重大于健康减肥体重系统（初始体重的%1）给出提示），系统获取到用户计划之后 为用户进行相关计算。
javascript的高级用法(循环实现数组map方法)
阿乐的博客
07-13 517
值得一提的是，map的第二个参数就是第一个参数回调中的这个点。如果第一个参数是箭头函数，则设置第二个 this 将无效，因为箭头函数的词法绑定。另一个是稀疏数组的处理，HasOwnProperty 用于判断当前下标的元素是否存在于数组中，欢迎大家在评论区交流。使用方法：将selfMap注入到Array.prototype中（下面数组的迭代方法也是如此）
style-components使用手册
最新发布
m0_62323931的博客
07-17 408
div><MyButton $primary $color="black">按钮</MyButton></div>
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 91
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
深入理解JS中的排序
jingsi1991的博客
07-17 454
在JavaScript开发中，排序是一项基础而重要的操作。本文将探讨JavaScript中几种常见的排序算法，包括它们的原理、实现方式以及适用场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MarxistVive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值