首页 > 代码库 > javascript内置对象（BOM）及事件
javascript内置对象（BOM）及事件
BOM 浏览器对象模型，该对象模型提供了独立于内容的，与浏览器窗口进行交互的对象
该对象提供了以下操作：
| histroty对象 | 当前窗口的浏览历史 |
| location对象 | 当前文档的URL |
| screen对象 | 客户端显示屏幕信息 |
| Navigator | 用户所使用的浏览器信息 |
location.href = http://www.mamicode.com/‘url‘;//url跳转
history子对象：（操作浏览历史）
无刷新返回上一页：
history.back();
1 <a href="http://www.mamicode.com/?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://www.mamicode.com/‘http://qiutianjia.com‘; 9 </script>10 <script type="text/javascript">11 var result = window.confirm(‘您确定要删除吗？‘); //弹出确认框12 console.log(result); //true false13 var result = prompt(‘请输入您的用户名‘); //弹出输入框14 console.log(result); //输入的内容 false15 </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 div3 </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 word3 </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="http://www.mamicode.com/请输入用户名"> 3 <input type="submit" value="http://www.mamicode.com/提交"> 4 </input> 5 </input> 6 </form> 7 <script type="text/javascript"> 8 var oUser = document.getElementById(‘user‘); 9 oUser.onfocus = function(){10 this.value = http://www.mamicode.com/‘‘;11 }12 oUser.onblur = function(){13 if (this.value =http://www.mamicode.com/= ‘‘) {14 this.value = http://www.mamicode.com/‘请输入用户名‘;15 }16 }17 </script>
change：<select>标签下拉列表内容改变的行为
load：html文档加载完毕行为，通过window.onload监视行
javascript内置对象（BOM）及事件