阅读量:0
文章目录
121 滚轮事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> #box1 { width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ /* 当鼠标滚轮向下滚动时，box1变长 当滚轮向上滚动时，box1变短 */ var box1 = document.getElementById("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); // 判断鼠标滚轮滚动的方向 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", function(){ });*/ 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, callback); obj.attachEvent("on" + eventStr, function(){ // 在匿名函数调用回调函数 callback.call(obj); }); } } </script> </head> <body> <div id="box1"></div> </body> </html> 122 键盘事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> #box1 { width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ /* 键盘事件： onkeydown：按键被按下 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发， 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快， 这种设计是为了防止误操作的发生。 onkeyup：按键被松开 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document */ document.onkeydown = function(event){ event = event || window.event; /* 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下 除了keyCode，事件对象中还提供了几个属性 altKey、ctrlKey、shiftKey 这个三个用来判断alt ctrl 和 shift是否被按下， 如果按下则返回true，否则返回false */ //console.log(event.keyCode); // ctrl：17 // 判断一个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（0） - 57（9） // 使文本框中不能输入数字 if(event.keyCode >= 48 && event.keyCode <= 57){ // 在文本框中输入内容，属于onkeydown的默认行为 // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中 return false; } }; }; </script> </head> <body> <input type="text" /> </body> </html> 123 键盘移动div
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <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> 124 BOM
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> #box1 { width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script type="text/javascript"> /* BOM 浏览器对象模型 BOM可以使我们通过JS来操作浏览器 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 BOM对象 Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象 Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页， 而且该操作只在当次访问时有效 Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 这些BOM对象在浏览器中都是作为window对象的属性保存的， 可以通过window对象来使用，也可以直接使用 */ //console.log(navigator); //console.log(location); //console.log(history); /* Navigator 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了 一般我们只会使用userAgent来判断浏览器的信息， userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， 不同的浏览器会有不同的userAgent 火狐的userAgent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 Chrome的userAgent Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 IE8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) IE9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) IE10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) IE11 Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了 */ //alert(navigator.appName); var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("你是火狐"); }else if(/chrome/i.test(ua)){ alert("你是Chrome"); }else if(/msie/i.test(ua)){ alert("你是IE浏览器"); }else if("ActiveXObject" in window){ alert("你是IE11"); } /* 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息 比如：ActiveXObject */ /*if("ActiveXObject" in window){ alert("你是IE"); }else{ alert("你不是IE"); }*/ /*alert("ActiveXObject" in window);*/ </script> </head> <body> <div id="box1"></div> </body> </html> 125 History
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> <style type="text/css"> </style> <script type="text/javascript"> /* History：对象可以用来操作浏览器向前或向后翻页 */ window.onload = function(){ // 获取按钮对象 var btn = document.getElementById("btn"); btn.onclick = function(){ /* length：属性，可以获取到当成访问的链接数量 */ alert(history.length); /* back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样 */ history.back(); /* forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样 */ history.forward(); /* go()：可以用来跳转到指定的页面 它需要一个整数作为参数 1:表示向前跳转一个页面 相当于forward() 2:表示向前跳转两个页面 -1:表示向后跳转一个页面 -2:表示向后跳转两个页面 */ history.go(-2); }; }; </script> </head> <body> <button id="btn">点我一下</button> <h1>History</h1> <a href="01.BOM.html">去BOM</a> <div id="box1"></div> </body> </html> 