第二十天H5进阶
来源：互联网 发布：lockin china 知乎 编辑：程序博客网 时间：2024/06/05 18:20
绑定响应函数
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 定义一个为元素绑定响应函数的方法可以兼容所有的浏览器 */ function bind(obj , eventStr , callback){ //判断obj中是否包含addEventListener if(obj.addEventListener){ //兼容ie8以上的浏览器 obj.addEventListener(eventStr , callback , false); }else{ //兼容ie8以下的浏览器 //这个方法绑定的回调函数中this永远都是window //手动指定函数的this obj.attachEvent("on"+eventStr , function(){ //在匿名函数中调用回调函数 //使用obj作为this来调用函数 callback.call(obj); }); } } window.onload = function(){ var btn = document.getElementById("btn"); bind(btn , "click" , function(){ alert(this); }); }; </script> </head> <body> <button id="btn">我是一个按钮</button> </body></html>事件的传播（事件流）
- 当触发了一个页面中某一个事件时，它实际上经过了三个阶段： 1.捕获阶段 - 指从最外层的元素开始向目标元素捕获事件（由外向内） 2.目标阶段 - 事件传播到了触发事件的对象 3.冒泡阶段 - 冒泡阶段指的是事件由目标元素，向他的祖先元素传导。（由内向外）- 一般来说我们的事件都是在冒泡阶段执行的，在IE8以下的浏览器中没有捕获阶段， 如果我们希望事件在捕获阶段执行，则需要使用addEventListener()来绑定响应函数， 还要将它的第三个参数指定为true。
事件的委派
- 当需要为多个元素去绑定响应函数时，我们可以将这些事件统一绑定给他们的父元素， 这样当后代元素上的事件触发时，会调用祖先元素上的响应函数，这样只需要绑定一个响应函数 所有的后代元素都会触发，这样简化我们的开发，同时提高了程序的性能，这个我们就称为事件的委派。
拖拽
拖拽相关的三个事件： onmousedown：当鼠标按下时触发 onmousemove: 当鼠标移动时触发 onmouseup：当鼠标松开时触发注意： 1.onmousedown给被拖拽的对象绑定 2.onmousemove和onmouseup需要给document绑定 3.onmousemove和onmouseup这两个事件需要在onmousedown响应函数内绑定 4.onmouseup时需要清除两个事件：onmousemove和onmouseup<!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"> /** * 提取出一个拖拽的函数 */ function drag(obj){ //为box1绑定一个鼠标按下的事件 obj.onmousedown = function(event){ //处理事件对象的兼容性问题 event = event || window.event; try{ //设置box1捕获所有的事件 obj.setCapture(); }catch(e){ } //获取鼠标和元素的相对的位置 //位置 = 鼠标的坐标 - 元素的偏移量 var mLeft = event.clientX - obj.offsetLeft; var mTop = event.clientY - obj.offsetTop; //当鼠标移动时改变元素的位置 //如果将onmousemove事件绑定给移动的元素，则如果鼠标移动过快 //则鼠标很容易移出元素，这样元素将不能跟随鼠标的位置，所以这个事件绑定给box1并不合适 document.onmousemove = function(event){ //处理事件对象的兼容性问题 event = event || window.event; //获取垂直和水平的坐标 var top = event.clientY - mTop; var left = event.clientX - mLeft; //处理水平方向的边界 if(left < 10){ left = 0; }else if(left > document.documentElement.clientWidth - obj.offsetWidth -10){ //如果left > 总宽度 - 元素的宽度 left = document.documentElement.clientWidth - obj.offsetWidth; } //处理垂直方向的边界 if(top < 10){ top = 0; }else if(top > document.documentElement.clientHeight - obj.offsetHeight - 10){ //如果left > 总宽度 - 元素的宽度 top = document.documentElement.clientHeight - obj.offsetHeight; } //修改元素的坐标 /* * 简单的设置元素坐标为鼠标的坐标，这样元素的左上角总是和鼠标重叠 * 但是我们希望，元素和鼠标的相对位置是不变 */ obj.style.left = left + "px"; obj.style.top = top + "px"; }; //为box1绑定一个鼠标松开的事件 /* * 如果将鼠标松开的事件绑定给box1，当鼠标移入到到其他元素上时，将不能触发事件 * 导致鼠标松开以后元素依然会移动，所以绑定在box1上不合适 */ document.onmouseup = function(){ //鼠标一松开，元素的位置就固定了 //取消元素的鼠标移动事件 document.onmousemove = null; //清空onmouseup document.onmouseup = null; //取消box1对事件的捕获 try{ //releaseCapture可以释放当前元素对所有事件的捕获 obj.releaseCapture(); }catch(e){ } } /* * 在页面中当选中了文字或者图片时，浏览器会默认启动内部的拖动事件 * 使这些文字，图片可以直接在新窗口中打开，或者是在搜索引擎中搜索 * 所有这些操作实际上都是浏览器对onmousedown的默认的行为 * 所以如果不希望产生这些行为，可以取消默认行为 * * 取消默认行为这招在IE8中不好使 */ return false; }; } window.onload = function(){ /* * 使用鼠标拖动元素，可以将元素拖动到页面中的任意位置 * 拖拽的流程： * 1.当鼠标在被拖拽的元素上按下时，开始拖拽 onmousedown * 2.当鼠标指针移动时，同时修改元素的位置 onmousemove * 3.当鼠标松开时，则将元素定位 onmouseup */ //alert(document.documentElement.clientWidth); //alert(document.documentElement.clientHeight); //获取box1 var box1 = document.getElementById("box1"); //获取box2 var box2 = document.getElementById("box2"); //获取img1 var img1 = document.getElementById("img1"); //为box1设置拖拽 drag(box1); //为box2设置拖拽 drag(box2); //为图片设置拖拽 drag(img1); }; </script> </head> <body> <div id="box1"></div> <div id="box2" style="width: 100px; height: 100px; background-color: #ff0; position: absolute; top:200px; left: 500px;"></div> <img id="img1" src="img/an.jpg" style="position: absolute;"/> </body></html>滚轮滚动事件
其他浏览器： onmousewheel火狐： DOMMouseScroll - 注意火狐中的事件必须通过addEventListener()来绑定滚轮方向的判断： 其他浏览器中：使用：event.wheelDelta 当值大于0时，向上滚动，当值小于0是，向下滚动 火狐浏览器：使用：event.detail 当值大于0时，向下滚动，当值小于0是，向上滚动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: red; } </style> <script type="text/javascript"> window.onload = function(){ /* * 使box1可以根据滚轮的滚动方向增长或缩短 */ //获取box1 var box1 = document.getElementById("box1"); //处理函数 function wheel(event){ event = event || window.event; //根据滚轮的滚动方向增长或缩短box1 //滚轮向上滚动时，div缩短，向下滚动时div增长 /* * 判断滚轮滚动方向时，数值本身我们是不使用的，只是使用它来判断滚轮滚动的方向 */ //向上滚动 +120 向下滚-120（IE和chrome） //wheelDelta这个属性火狐不支持 //alert(event.wheelDelta); //向上滚-3 向下滚+3（火狐） //alert(event.detail); //指定一个默认的高度 var height = 0; //判断滚轮滚动的方向 if((event.wheelDelta && event.wheelDelta > 0) || event.detail < 0){ //向上滚动，缩短长度 height = -10; }else{ //向下滚动，增加长度 height = 10; } //修改div的高度 box1.style.height = box1.offsetHeight + height + "px"; /* * 当页面中有滚动条时，会导致页面中的滚动条滚动，而div是不变 * 这个也是浏览器的默认行为，所以如果不希望滚动条滚动，取消默认行为 * * 注意：通过addEventListener()绑定的响应函数不能通过return false来取消默认行为 * event.preventDefault() */ //停止火狐的默认行为 /* * ie中不支持preventDefault方法，使用会抛出异常 */ /*try{ event.preventDefault(); }catch(e){ }*/ event.preventDefault && event.preventDefault(); return false; } //为box1绑定鼠标滚轮滚动的事件 //onmousewheel火狐不支持 box1.onmousewheel = wheel; /* * 火狐中鼠标滚轮滚动的事件： * DOMMouseScroll，而且这个事件必须通过addEventListener()方法来绑定 */ bind(box1,"DOMMouseScroll",wheel); }; function bind(obj , eventStr , callback){ //判断obj中是否包含addEventListener if(obj.addEventListener){ //兼容ie8以上的浏览器 obj.addEventListener(eventStr , callback , false); }else{ //兼容ie8以下的浏览器 //这个方法绑定的回调函数中this永远都是window //手动指定函数的this obj.attachEvent("on"+eventStr , function(){ //在匿名函数中调用回调函数 //使用obj作为this来调用函数 callback.call(obj); }); } } </script> </head> <body style="height: 3000px;"> <div id="box1"></div> </body></html>键盘事件：
- 一般情况键盘事件都会绑定给输入框或者是documentonkeydown --> 当按键按下时触发onkeyup --> 当按键被松开时触发 - 键盘相关的事件属性： keyCode：按键的编码（可以获取到哪个按键被按下） altKey ctrlKey shiftKey - 这三个用来检查alt ctrl shift是否被按下，如果按下则返回true，否则返回false<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: red; position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ /* * 根据键盘的按键来移动div * <- 向左移动37 * -> 向右动 39 * v 向下移动 40 * ^ 向上移动 38 */ var box1 = document.getElementById("box1"); document.onkeydown = function(event){ event = event || window.event; //定义一个变量 var speed = 10; //当ctrl键按下时要求加快速度 if(event.ctrlKey){ speed = 300; } switch(event.keyCode){ case 37: //向左 ，减小left值 box1.style.left = box1.offsetLeft - speed +"px"; break; case 38: //向上，减少top值 box1.style.top = box1.offsetTop - speed +"px"; break; case 39: //向右,增加left值 box1.style.left = box1.offsetLeft + speed +"px"; break; case 40: //向下，增加top值 box1.style.top = box1.offsetTop + speed +"px"; break; } }; }; </script> </head> <body> <div id="box1"></div> </body></html>阅读全文
0 0
- 第二十天H5进阶
- 第四天H5进阶
- 第六天H5进阶
- 第十天H5进阶
- 第十二天H5进阶
- 第十六天H5进阶
- 第二十二天H5进阶(H5知识点开始)
- Java进阶学习第二十天——分页与Listener
- 第二十天
- 第二十天
- 第二十天
- 第三天 H5进阶
- 第五天H5进阶
- 第七天H5进阶
- 第八天H5进阶
- 第九天H5进阶
- 第十一天H5进阶
- 第十三天H5进阶
- boost库之tcp实例（异步方式）
- 你真的了解WebSocket吗？
- Hexo静态博客搭建+个人定制
- JavaWeb三大组件之一Servlet【HttpServlet类】
- 搭建SpringCloud服务配置中心
- 第二十天H5进阶
- JDK动态代理的实现及原理
- centos7没有安装ifconfig命令的解决方法
- Mysql和oracle区别(未完待续...)
- onsubmit和submit事件处理函数怎么不生效呢？
- bootstrap3中使用bootstrap-datetimepicker日期插件的用法
- Hystrix 使用与分析
- Spring基础学习教程(经典的Spring面试问答)-08
- SBT构建工具
