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

事件的传播

事件的传播关于事件的传播网景公司和微软公司有不同的理解微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。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.当鼠标按下的时候，开始拖拽 onmousedown2.鼠标移动，div也移动  onmousemove3.鼠标松开时，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也移动  onmousemovedocument.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固定在当前位置 onmouseupdocument.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  向下滚 3alert(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 键盘被松开键盘事件，一般绑定给可以获取焦点的元素和documentonkeydown如果一直按着某个按键不松手，则事件会一直被触发当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。keyCode 获取按键的编码ASCIIkey返回按键是什么，返回键名document.οnkeydοwn=function(){// console.log("ffff");console.log(event.keyCode);}document.οnkeyup=function(){console.log("松开了");}*//*altkeyctrlkeyshiftkey这三个用来判断alt,ctrl,shift是否同时被按下，按下返回truedocument.ο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>