javascript内置对象（BOM）及事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript内置对象（BOM）及事件相关的知识，希望对你有一定的参考价值。
BOM 浏览器对象模型，该对象模型提供了独立于内容的，与浏览器窗口进行交互的对象
该对象提供了以下操作：
| histroty对象 | 当前窗口的浏览历史 |
| location对象 | 当前文档的URL |
| screen对象 | 客户端显示屏幕信息 |
| Navigator | 用户所使用的浏览器信息 |
location.href = ‘url‘;//url跳转
history子对象：（操作浏览历史）
无刷新返回上一页：
history.back();
1 <a href="?page=5">第5页</a> 2 <a href="javascript:history.back();">返回上一页</a>
history.go(-1);
history.go(0); 刷新当前页面
history.forward(); 前进一步
| navigator子对象 | （获得浏览器的信息） |
| navigator.appName | 返回浏览器内核名称 //console.log(navigator.appName); |
| navigator.appVersion | 返回浏览器和平台的版本信息 |
| navigator.platform | 返回运行浏览器的操作系统平台 |
| navigator.userAgent | 返回由客户机发送服务器的 user-agent 头部的值 |
Window对象是内置对象的父对象。
1 <script type="text/javascript"> 2 window.document.title = ‘窗口标题‘; 3 var arr = [‘湖人‘]; 4 window.arr.push(‘火箭‘); 5 console.log(arr); //Array [ "湖人", "火箭" ] 6 7 window.alert(‘hello word‘); //该方法也属于window对象的方法 8 window.location.href = ‘http://qiutianjia.com‘; 9 </script> 10 <script type="text/javascript"> 11 var result = window.confirm(‘您确定要删除吗？‘); //弹出确认框 12 console.log(result); //true false 13 var result = prompt(‘请输入您的用户名‘); //弹出输入框 14 console.log(result); //输入的内容 false 15 </script>
setInterval()、
设置间隔执行（每隔多少时间执行），定时器、开启之后，每隔一定的时间执行一次
参数1.每隔一段时间执行的代码，如果代码很多可以写到函数中
参数2.间隔的时间，单位是毫秒
clearInterval()、清除定时器
参数是定时器的返回值
1 <p id="num"></p> 2 <script type="text/javascript"> 3 var oP = document.getElementById(‘num‘); 4 window.setInterval(function(){ 5 var oDate = new Date(); 6 year = oDate.getFullYear(); 7 month = oDate.getMonth() + 1; 8 day = oDate.getDate(); 9 hour = oDate.getHours(); 10 minute = oDate.getMinutes(); 11 second = oDate.getSeconds(); 12 oP.innerhtml = ‘当前时间：‘ + year + ‘年‘ + month + ‘月‘ + day + ‘日 ‘ + hour + ‘:‘ + minute + ‘:‘ + second; 13 },100) 14 </script>
使用定时器时，每setInterval一次，就会在内存保存一份并执行，如果取消定时器，设置了多少，就应该取消多少次。
解决方法：始终只在内存中创建一个定时器
1 <p id="num"></p> 2 <a href="javascript:stop();">停止</a> 3 <a href="javascript:start();">开始</a> 4 <script type="text/javascript"> 5 var oP = document.getElementById(‘num‘); 6 function nowTime(){ 7 var oDate = new Date(); 8 year = oDate.getFullYear(); 9 month = oDate.getMonth() + 1; 10 day = oDate.getDate(); 11 hour = oDate.getHours(); 12 minute = oDate.getMinutes(); 13 second = oDate.getSeconds(); 14 oP.innerHTML = ‘当前时间：‘ + year + ‘年‘ + month + ‘月‘ + day + ‘日 ‘ + hour + ‘:‘ + minute + ‘:‘ + second; 15 } 16 var timer = setInterval(nowTime,1000); 17 function stop(){ 18 clearInterval(timer); 19 } 20 function start(){ 21 var timer = setInterval(nowTime,1000); 22 } 23 </script>
setTimeout()设置延迟执行
clearTimeout()清除延迟执行，用法同上、
js事件、指用户和网页发生交互时的一些行为，事件分类：
| click() | 鼠标单击 |
| dblclick() | 鼠标双击 |
| mouseover() | 鼠标移入 |
| mouserout() | 鼠标移出 |
| mousermove() | 鼠标移动 |
| mousedown() | 鼠标按下 |
| mouseup() | 鼠标按键被松开 |
| scroll | 滚动 |
| keydowm | 按键被按下 |
| keyup | 按键抬起 |
| submit | 表单提交事件 |
| select | 文本框的文本被选中 |
| focus | 获得焦点事件 |
| blur | 失去焦点 |
| change | 内容改变事件 |
页面加载完毕事件：load。
使用实例:
事件监听：
onclick： 监听点击事件
1 <div onclick="change()"> 2 div 3 </div> 4 <script type="text/javascript"> 5 function change(){ 6 var oDiv = document.getElementsByTagName(‘div‘)[0]; 7 oDiv.style.color = ‘red‘; 8 } 9 </script>
DOM 0级事件监听程序：
将事件监听器绑定到DOM节点对象上，也就是作为DOM对象的属性存在
1 <div onclick="change()">div</div> 2 <script type="text/javascript"> 3 var oDiv = document.getElementsByTagName(‘div‘)[0]; 4 function change(){ 5 oDiv.style.color = ‘red‘; 6 } 7 oDiv.onmouseover = function(){ 8 oDiv.style.color = ‘green‘; 9 } 10 oDiv.onmouseout = function(){ 11 oDiv.style.color = ‘black‘; 12 } 13 </script>
DOM 2级事件监听程序：
通过DOM对象.addEventListener()，（针对主流浏览器），attachEvent()，（非主流浏览器 IE6，7，8）进行绑定。
通常在使用DOM3级事件绑定程序的时候，先判断一下是否是主流浏览器
1 <div onclick="change()">div</div> 2 <script type="text/javascript"> 3 var oDiv = document.getElementsByTagName(‘div‘)[0]; 4 if (window.addEventListener){ //有成员即主流浏览器 5 //参数1 ：事件类型（没有on） 6 //参数2 ：事件发生时，执行的处理程序函数 7 //参数3 ：是否捕获，默认false不捕获（冒泡），反之true 8 //区别见：http://www.runoob.com/try/try.php?filename=tryjsref_element_addeventlistener_capture 9 [补充：主流浏览器通过：事件对象的stopPropogation()阻止。非主流通过：事件对象的cancelBubble = true阻止] 10 <div id="outer"> 11 <p id="inner">ppppp</p> 12 </div> 13 <script type="text/javascript"> 14 var outer = document.getElementById(‘outer‘); 15 var inner = document.getElementById(‘inner‘); 16 outer.addEventListener(‘click‘,function(ev){ 17 alert(‘outer‘); 18 if (ev.stopProagation) { 19 ev.stopProagation(); //阻止弹出 20 }else{ 21 ev.cancelBubble = true; 22 } 23 },true); 24 inner.addEventListener(‘click‘,function(){ 25 alert(‘inner‘); 26 },true) 27 </script> 28 [/补充结束] 29 oDiv.addEventListener("mouseover",function(){ 30 oDiv.style.backgroundColor = ‘pink‘; 31 },false); 32 oDiv.addEventListener("mouseout",function(){ 33 oDiv.style.backgroundColor = ‘red‘; 34 },false); 35 }else{ 36 //非主流浏览器 37 //参数1 ：事件类型（含on） 38 //参数2 ：事件发生时执行的函数 39 oDiv.attachEvent("onmouseover",function(){ 40 oDiv.style.backgroundColor = ‘pink‘; 41 }); 42 oDiv.attachEvent("onmouseout",function(){ 43 oDiv.style.backgroundColor = ‘red‘; 44 }); 45 } 46 </script>
可以将DOM 2级方法封装起来。
1 //参数1：监听哪个DOM对象的时间 2 //参数2：监视的事件类型 3 //参数3：事件发生时执行的回调函数 4 function bindEvent(obj,eventType,callback){ 5 if (window.addEventListener){ 6 obj.addEventListener(eventType,callback,false); 7 }else{ 8 obk.attachEvent(‘on‘ + eventType,callback); 9 } 10 }
封装通过id查询DOM节点对象的方法
1 function $(id){ 2 return document.getElementById(id); 3 }
js事件分类演示
鼠标单击： click
鼠标双击行为： dblclick
鼠标按下、抬起的行为：mousedown、mouseup
通常当mousedown这个行为发生的时候，通过事件对象的button属性获得是左击、还是右击
button属性的值是0表示左击、1表示按下的是滑轮、2表示右击。
获取js事件对象：event，当用户的行为发生时，自动产生对象，并且会自动给你传递到事件的处理程序中去，通常如果需要你接收一下，如果不需要就不用接收。
通过事件对象，可以获得当事件（用户的行为）发生时，事件主题的一些信息（左击、还是右击；鼠标的坐标等）
1 <script type="text/javascript"> 2 //监视body的鼠标按下行为 3 document.body.onmousedown = function(ev){ 4 console.log(ev.button); 5 } 6 </script>
鼠标移动的行为：mousemove
移动鼠标时产生行为，获得鼠标的实时坐标
通过clientX、clientY、pageX、pageY这些属性获得鼠标的坐标
1 <p id="div" style="width: 300px;height: 300px;"></p> 2 <script type="text/javascript"> 3 var oDiv = document.getElementById(‘div‘); 4 document.body.onmousemove = function(ev){ 5 oDiv.innerHTML = ‘X轴：‘+ev.pageX+‘Y轴：‘+ev.pageY; 6 } 7 </script>
鼠标滚动的行为：scrool
由于鼠标滚动的时候，控制的是body整体滚动，所以这个行为监视的是body，通过document.body.scrollTop获得、设置滚动条距离顶部的高度
1 document.body.onscroll = function(){ 2 document.title = document.body.scrollTop; 3 } 4 function gotop(){ 5 document.body.scrollTop = 0; 6 }
键盘事件：
用户通过键盘的按键和网页进行交互的行为
keydown：键盘按键被按下的行为，通常该行为发生的时候，通过事件对象的keyCode属性获得按下的是哪个按键
1 <script type="text/javascript"> 2 document.body.onkeydown = function(ev){ 3 alert(ev.keyCode); 4 } 5 </scrip
特殊的按键：ctrl、alt、shift
通过事件对象的ctrlKey属性获得，只有按下ctrl键的时候，ctrlKey属性的才为true；altKey、shiftKey一样，只有按下这两个键的时候，值才为true
keyup，键盘抬起事件
1 <textarea> 2 hello word 3 </textarea> 4 <script type="text/javascript"> 5 var oDiv = document.getElementsByTagName(‘textarea‘)[0]; 6 oDiv.onkeyup = function(ev){ 7 lert(this.value); 8 } 9 </script>
submit，表单提交的行为：
onsubmit事件处理程序中，return false则阻止表单提交，如果return true/function则继续往下执行/执行回调函数返回的值（例如正则验证表单）
select：监视输入框的内容被选中的行为
focus：获得焦点（光标）行为
blur：失去焦点（光标）行为
1 <form action="" method="get"> 2 <input id="user" type="text" value="请输入用户名"> 3 <input type="submit" value="提交"> 4 </input> 5 </input> 6 </form> 7 <script type="text/javascript"> 8 var oUser = document.getElementById(‘user‘); 9 oUser.onfocus = function(){ 10 this.value = ‘‘; 11 } 12 oUser.onblur = function(){ 13 if (this.value == ‘‘) { 14 this.value = ‘请输入用户名‘; 15 } 16 } 17 </script>
change：<select>标签下拉列表内容改变的行为
load：html文档加载完毕行为，通过window.onload监视行
以上是关于javascript内置对象（BOM）及事件的主要内容，如果未能解决你的问题，请参考以下文章