js基础5 事件的传播/拖拽/键盘事件/div移动

木一叶liuyue

已于 2022-04-02 09:28:03 修改

阅读量808

点赞数

分类专栏：前段文章标签： css 媒体 css3

于 2022-03-26 17:14:32 首次发布

本文链接：https://blog.csdn.net/kerryliuyue/article/details/123759528

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

事件的传播

事件的传播

关于事件的传播网景公司和微软公司有不同的理解
		微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
		网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

W3C综合了两个公司的方案，将事件传播分成了三个阶段：
1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

  如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，IE8及以下的浏览器中没有捕获阶段。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			#box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			#box3 {
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 分别为三个div绑定单击响应函数
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
 
				bind(box1, "click", function() {
					alert("我是box1的响应函数")
				});
				bind(box2, "click", function() {
					alert("我是box2的响应函数")
				});
				bind(box3, "click", function() {
					alert("我是box3的响应函数")
				});
			};
 
			function bind(obj, eventStr, callback) {
				if (obj.addEventListener) {
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr, callback, true);
				} else {
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function() {
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

拖拽

<!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>拖拽</title>
    <script type="text/javascript">
        window.onload = function () {
            /*
            拖拽流程
                    1.当鼠标按下的时候，开始拖拽 onmousedown
                    2.鼠标移动，div也移动  onmousemove
                    3.鼠标松开时，div固定在当前位置 onmouseup
            */

            var box1 = document.getElementById("box1");
            box1.onmousedown = function (event) {
               /*设置box1 捕获所有鼠标按下的事件
               box1.setCapture();*/
               
                /*求出div的偏移量
                        鼠标的clientX-元素的offsetleft
                        鼠标的clientY-元素的offsetright
                */
               event=event||window.event;
               var ol=event.clientX-box1.offsetLeft;
               var ot=event.clientY-box1.offsetTop;


                //鼠标移动，div也移动  onmousemove
                document.onmousemove = function (event) {
                    event = event || window.event;

                    var x = event.clientX;
                    var y = event.clientY;
                    //这个地方用top和left一定要设置position，否则不生效
                    box1.style.left = x -ol + "px";
                    box1.style.top = y -ot + "px";
                };

                //    鼠标松开时，div固定在当前位置 onmouseup
                document.onmouseup = function () {
                    //当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
                    //取消document的onmousemove事件
                    document.onmousemove = null;
                    //取消up事件
                    document.onmouseup = null;
                    /*鼠标松开的时候，取消捕获
                    box1.releasCapture(); ie8*/

                }
                /*当我们去拖拽一个网页中的内容，浏览器会默认去搜索选中的内容
                此时会导致拖拽功能的异常
                可以通过return false取消默认行为
                */
               return false;
            }
        }
    </script>
</head>
<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: relative;
    }
    #box2 {
        width: 100px;
        height: 100px;
        background-color: rgb(206, 71, 139);
        position: relative;
    }
</style>

<body>
    <p>wship</p>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

</html>

请添加图片描述

这个题目的意思就是想把蓝色的移动到红色那，保证鼠标拖拽时，鼠标在div中所点的位置保持不变，所以需要在原来ClientX的基础上减去他们的差距，差距是多少呢，是绿色减去红色

鼠标滚轮

<!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>鼠标滚轮</title>
    <script type="text/javascript">
        window.onload = function () {
            /*
            当滚轮向下滚动时，box1变长
            当滚轮向上滚动时，box1变短
            */
            var box1 = document.getElementById("box1");
            //为box1 绑定一个鼠标滚轮滚动的事件
            box1.onmousewheel = function (event) {
                event = event || window.event;
                //    alert("滚动");
                /*判断鼠标滚轮滚动的方向
                        event.wheelDelta 可以获取鼠标滚轮滚动的方向
                        向上滚120 向下滚-120(只看正负，不看大小)
                */

                /*wheelDelta这个属性火狐中不支持
					在火狐中使用event.detail来获取滚动的方向
					向上滚 -3  向下滚 3
					alert(event.detail);
*/
                alert(event.wheelDelta);

            }

            //现在的方法
            box1.onwheel=function(){
                this.style.fontSize = "35px";
            }
        }
    </script>
</head>
<style>
    #box1 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
    }
</style>

<body>
    <div id="box1">2222</div>
</body>

</html>

键盘事件

<!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>键盘事件</title>
    <script type="text/javascript">
        window.onload = function () {
            /*键盘事件：
                    onkeydown键盘被按下
                    onkeyup 键盘被松开
            键盘事件，一般绑定给可以获取焦点的元素和document
            onkeydown如果一直按着某个按键不松手，则事件会一直被触发
                    当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，
                    其他的会非常的快。这种设计是为了防止误操作的发生。
            keyCode 获取按键的编码ASCII
            key返回按键是什么，返回键名
            
            document.οnkeydοwn=function(){
            // console.log("ffff");
            console.log(event.keyCode);
           }
           document.οnkeyup=function(){
            console.log("松开了");
           }
            */



            /*
            altkey
            ctrlkey
            shiftkey
            这三个用来判断alt,ctrl,shift是否同时被按下，按下返回true
              document.οnkeydοwn=function(){
            
           if(event.keyCode==89&&event.ctrlKey){
               console.log("ctrl和y都被按下了");
           }
           }
            */
            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function (event) {

                // console.log("按键按下了");
                // 
                if (event.keyCode >= 48 && event.keyCode <= 57) {//输入的是个数字
                    //在文本框中输入内容，属于默认行为，如果取消默认行为，则输入的内容，不会出现在文本框中
                    return false;
                }
                console.log(event.keyCode);
            }

        }
    </script>
</head>
<style>

</style>

<body>
    <div id="box1" style="width: 100px; height: 100px; background-color: aqua;"></div>
    <input type="text" name="" id="">
</body>

</html>

div移动

<!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>div移动游戏</title>
    <script type="text/javascript">
        window.onload = function () {
            var box1 = document.getElementById("box1");
            document.onkeydown = function (event) {
                var speed=10;
//摁Ctrl，加速运动
                if(event.ctrlKey){
                    speed=50;
                }
                if (event.key == "ArrowUp") {
                    box1.style.top = box1.offsetTop - speed + "px";
                    console.log("上");
                } else if (event.key == "ArrowDown") {
                    box1.style.top = box1.offsetTop + speed + "px";
                    console.log("xia");

                }
                else if (event.key == "ArrowRight") {
                    box1.style.left = box1.offsetLeft+speed + "px";
                    console.log("左");
                }
                else if (event.key == "ArrowLeft") {
                    box1.style.left = box1.offsetLeft - speed + "px";

                }

            }
        }
    </script>
</head>

<style>
/*如果不加这句话，向上移动或者向左移动，速度大小都是不对的*/
   *{
        margin: 0;
        padding: 0;
    }
    #box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        position: relative;
    }
</style>

<body>
    <div id="box1"></div>
</body>

</html>

木一叶liuyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础5 事件的传播/拖拽/键盘事件/div移动

事件的传播事件的传播关于事件的传播网景公司和微软公司有不同的理解微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。W3C综合了两个公司的方案，将事件传播分成了三个阶段：1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发
复制链接

扫一扫

专栏目录