JavaScript之事件（重点）

最新推荐文章于 2022-08-30 19:39:59 发布
最新推荐文章于 2022-08-30 19:39:59 发布
阅读量495 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 按键事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41171409/article/details/122988332
版权

目录

事件对象

获取鼠标的坐标

事件的冒泡（Bubble）

事件的委派 

事件的绑定

事件的传播

常用事件

滚轮事件（onwheel）

键盘事件

事件对象

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

可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

代码示例：

元素.事件 = function(event){  
    event = event || window.event;  
};  
  
元素.事件 = function(e){  
	e = e || event;  
	  
};

获取鼠标的坐标

  • clientX和clientY

用于获取鼠标在当前的可见窗口的坐标。（div的偏移量，是相对于整个页面的，如果页面大于了可见窗口的大小，那么容易出现问题）

  • pageX和pageY

可以获取鼠标相对于当前整个页面的坐标。（但是这两个属性在IE8中不支持）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div跟随鼠标移动</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: #3e9dee;
            /*开启box1的绝对定位或者相对定位*/
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
        //    div可以跟随鼠标移动
        //    1 获取box1
            var box1 = document.getElementById("box1");
        //    2 绑定鼠标移动事件
        //    如果这里document是box1，给box1绑定，那只有鼠标在box1里面，才能移动。document则是整个文档
            document.onmousemove = function (event) {
                // 3 解决兼容问题
                event = event || window.event;
            //    获取鼠标的坐标
                var x = event.clientX;
                var y = event.clientY;
            //   设置div的偏移量
                box1.style.left = x+"px";
                box1.style.top = y+"px";
            };
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

优化代码示例（针对于鼠标和拖动目标的相对位置优化） ：

<!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，即documentElement.scrollTop
                 */
                //哪个有则用哪个 
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                //var st = document.documentElement.scrollTop;


                //获取到鼠标的坐标
                /*
                 *
                 * div的偏移量，是相对于整个页面的
                 *
                 * clientX和clientY是相对于当前可视窗口的坐标
                 * 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>

事件的冒泡（Bubble）

事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true，即可取消冒泡

取消冒泡示例：

元素.事件 = function(event){  
    event = event || window.event;  
    event.cancelBubble = true;  
};

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #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";

            };

            var box2 = document.getElementById("box2");
            box2.onmousemove = function(event){
                event = event || window.event;

                event.cancelBubble = true;
            };



        };


    </script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>

事件的委派 

事件的委派指的是统一给元素的共同的祖先元素，这样当后代元素上的时间出发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

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

如果希望只绑定一次事件，即可应用到多个元素上（即使元素是后天添加的也可以）。可以尝试将其绑定给元素的共同祖先元素。

target：event中的target表示的触发事件的对象。

代码示例：

<!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()  通过这个方法也可以为元素绑定响应函数。

参数：

  • 事件的字符串，如onclink，但是不要on。
  • 回调函数，当事件触发时该函数会被调用。
  • 是否在捕获阶段触发事件，需要设定一个布尔值，一般是传false

注意细节：

  • addEventListener() 可以同时为一个元素的相同事件绑定多个响应函数。但事件被触发时，响应函数会按照函数的绑定顺序进行执行。
  • 此方法不支持IE8及其以下的浏览器。

代码示例：

btn01.addEventListener("click",function(){  
	alert(1);  
},false);  
  
btn01.addEventListener("click",function(){  
	alert(2);  
},false);

attachEvent() 方法

参数： 

  • 事件的字符串，要on。
  • 回调函数。

注意细节：

  • 此方法可以同时为一个事件绑定多个处理函数。
  • 相较于addEventListener()的是：此方法是后绑定先执行，且执行顺序和addEventListener()相反。
  • 此方法支持IE8浏览器。

代码示例：

btn01.attachEvent("onclick",function(){  
alert(1);  
});  
  
btn01.attachEvent("onclick",function(){  
alert(2);  
});

代码示例：（执行创建bind函数，解决兼容性问题）

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function(){

            /*点击按钮以后弹出一个内容*/
            //获取按钮对象
            var btn01 = document.getElementById("btn01");
            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浏览器及以下
                //前面不要事件字符串不要on，在这里将其加上
                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>

滚轮事件（onwheel）

<!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按键被按下（只要不松手事件会一直触发）
onkeyup按键被松开
keyCode可以通过keyCode来获取按键的编码
altKey判断alt是否被按下（按下返回true，否则返回false，下同）
ctrlKey判断ctrl是否被按下
shiftKey判断shift是否被按下

注意细节：

  • 当onkeydown连续触发的情况，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
  • 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

检测y和ctrl是否同时被按下，代码示例：

//console.log(event.keyCode);  
  
//判断一个y是否被按下  
//判断y和ctrl是否同时被按下  
if(event.keyCode === 89 && event.ctrlKey){  
	console.log("ctrl和y都被按下了");  
}

 检测数字是否被按下，代码示例：

input.onkeydown = function(event) {  
    event = event || window.event;  
    //数字 48 - 57  
    //使文本框中不能输入数字  
    if(event.keyCode >= 48 && event.keyCode <= 57) {  
        //在文本框中输入内容，属于onkeydown的默认行为  
        //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中  
        return false;  
    }  
};

程序猿tu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript onmousemove事件实现物体随鼠标移动
aolyu的博客
05-27 1000
JavaScript onmousemove事件实现物体随鼠标移动代码 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style
JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
热门推荐
Faerieyw的博客
09-26 1万+
查看大图：http://img.blog.csdn.net/20170926152616874?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmFlcmlleXc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
JavaScript-事件之onmousemove
tian_tian_gong的博客
02-18 4868
onmousemove 监听鼠标移动事件。 注意，ie8及ie8以下监听不到event， 所以要用event=window.event;做一下兼容处理。 clientX/clientY获取当前鼠标在指定标签内的可见横纵坐标位置。 标签.onmousemove=function(event){ //兼容处理 if(!event){ event=window.event; } // 或者 // ...
JavaScript onmousemove 事件
weixin_30825199的博客
01-10 586
Definition and Usage定义与用法 The onmousemove event occurs when the mouse pointer is moved.当鼠标移动时触发onmousemove事件 Syntax语法 onmousemove="所要执行的代码" ...
javascript中onmousemove、onmouseover、onmouseenter 的不同
程序员秋风的博客
01-26 1283
在比较onmousemove、onmouseover、onmouseenter 的不同之前，首先我们先看看各种onmouse事件的作用： onmousedown 当元素上按下鼠标按钮时出发 onmousemove 当鼠标指针移动到水元素上时触发 onmouseover 当鼠标指针移动元素上时触发 onmouseout 当鼠标指针移出指定的对象时发生。 onmouseup
Javascript重点知识掌握
06-19
Javascript重点知识掌握
JavaScript重点知识掌握
最新发布
06-20
Java基本函数，Dom函数，常见错误
JavaScript基础重点(必看)
10-21
下面小编就为大家带来一篇JavaScript基础重点(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript复习重点.doc
06-09
JavaScript 语言是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。它可以使得信息和用户之间不仅仅是一种显示和浏览的关系，而是实现了一种实时性、动态的、交互式的表达能力。 ...
js使用onmousemove和onmouseout获取鼠标坐标的方法
10-24
主要介绍了js使用onmousemove和onmouseout获取鼠标坐标的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js学习之实现拖拽效果
qq_32021429的博客
11-06 251
JS原生实现拖拽效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,
事件（JS）
KennGum的博客
07-11 452
事件 事件对象 事件冒泡（Bubble） 事件的绑定 事件的传播 拖拽 滚轮事件 键盘事件 事件对象 onmousemove 该事件将会在鼠标在元素中移动时被触发 事件对象 当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下 鼠标滚轮滚动的方向 在IE8中，相应函数被处罚时，浏览器不会传递事件对象 在IE8及以下的浏览器中，是将事件对象作为 window对象的属性保存的
学习笔记（六）——JavaScript（三）
别呀的博客
05-24 5545
文章目录一、鼠标事件1.1、鼠标移动事件(onmousemove)1.2、鼠标按键按下与松开事件(onmousedown/onmouseup)1.3、鼠标滚轮事件(onmousewheel)1.4、鼠标触碰事件(onmouseover/onmouseout)二、键盘事件三、Bom 浏览器对象模型四、定时器 一、鼠标事件 鼠标事件种类： 事件名 描述 onclick 单击鼠标左键时触发 ondblclick 双击鼠标左键时触发 onmouseover 鼠标移动到元素上时触发 onm
JavaScript的拖拽事件。
weixin_43228946的博客
08-21 691
在浏览器可以随意的拖拽，我们来看下怎么实现？ 我们具体分析一下步骤： 第一步：鼠标选中需要拖拽的地方，鼠标按下。（需要使用事件onmousedown） 第二步：鼠标按下后，我们接着移动鼠标。（onmousemove） 第三步：鼠标松开，将拖拽的元素固定在那，也就是拖到就到哪。（onmouseup） 现在我们具体看下代码：
JavaScript入门 事件简介/事件对象位置属性 /鼠标事件/表单事件/键盘事件/浏览器相关事件/焦点事件/触摸事件 Day12
qq_63354840的博客
08-30 629
事件简介/事件对象位置属性 /鼠标事件/表单事件/键盘事件/浏览器相关事件/焦点事件/触摸事件
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1671
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4094
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
3D旋转视图演示
weixin_30906185的博客
07-11 152
主页代码（html）<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>3D图片环 - by 智能社 - www.zhinengshe.com</title><link href="style/zns_common.css" type="text/css" re...
JavaScript事件处理：鼠标移动与常见事件介绍
当这些事件发生时，浏览器会触发与之关联的JavaScript事件处理程序，从而执行相应的代码。本文将重点探讨“鼠标移动事件”及其在事件处理中的应用。 鼠标移动事件（onmousemove）是一种常见的浏览器事件，当用户在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序猿tu

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

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

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

打赏作者

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

抵扣说明：

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

余额充值