JavaScript-事件-BOMDOM-平芜编程栈

JavaScript-事件-BOM&DOM

事件(Event)

事件概述

javascript是一门事件驱动型语言，通常服务于html页面中，对于html页面中的元素必然会存在一些动作，这些动作的触发，称之为事件驱动。

事件分类

浏览器窗体事件
事件名描述
onload 当窗体内容被加载时触发
onunload 当窗体中内容卸载时触发
onbeforeunload 当窗体内容被卸载之前触发
onresize 当窗体大小被改变时出发

事件名	描述
onload	当窗体内容被加载时触发
onunload	当窗体中内容卸载时触发
onbeforeunload	当窗体内容被卸载之前触发
onresize	当窗体大小被改变时出发

鼠标事件

事件名	描述
onclick	当鼠标单击时触发
ondblclick	当鼠标双击时触发
onmouseover	当鼠标悬停到元素上时触发
onmouseout	当输入从元素中移出时触发
onmouseenter	当鼠标进入时触发
onmouseleave	当鼠标离开时触发
onmousedown	当鼠标按下时触发
onmouseup	当鼠标抬起时触发

键盘事件
事件名描述
onkeydown 当键盘按键被按下时触发
onkeyup 当键盘按键抬起触发
onkeypress 当键盘按键被按压时触发

事件名	描述
onkeydown	当键盘按键被按下时触发
onkeyup	当键盘按键抬起触发
onkeypress	当键盘按键被按压时触发

表单事件

事件名	描述
onchange	当控件内容改变时触发
onselect	当控件内容被选中时触发
onblur	当控件失去焦点时触发
onfocus	当控件获得焦点时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

事件使用方式

1. 直接在元素上使用onXXX属性设置事件

<buttononclick="btnClick()">按钮</button>

2. 通过DOM对象为元素绑定事件（常见）

<buttonid="btn">按钮</button><script>varbtn=document.getElementById('btn')； btn.addEventListener('click',function(){//do...})</script>

3.通过DOM对象获取元素后设置事件函数

<buttonid="btn">按钮</button><buttonid="btn2">按钮</button><script>varbtn=document.getElementById('btn')； btn.onclick=function(){//do...}varbtn2=document.getElementById('btn2')； btn2.onclick=btnClick;functionbtnClick(){//do...}</script>

事件流（事件冒泡和事件捕获）

事件流描述的是从页面中接受事件的顺序，但有意思的是，早期的微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

事件冒泡

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止；事件冒泡是一个由内向外触发的过程，当通过元素的addEventListener方法绑定事件时，默认使用不给第三个参数(默认值为false)时，此时事件为冒泡机制。

举例说明:

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><style>#box1{position:relative;top:0;left:0;width:500px;height:500px;background-color:#f00;}#box2{position:absolute;left:100px;top:100px;width:300px;height:300px;background-color:#0f0;}#box3{position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#00f;}</style></head><body><divid="box1">box1<divid="box2">box2<divid="box3">box3</div></div></div><script>varbox1=document.getElementById('box1');varbox2=document.getElementById('box2');varbox3=document.getElementById('box3');box1.addEventListener('click',function(e){console.log('box1 click')})box2.addEventListener('click',function(){console.log('box2 click')})box3.addEventListener('click',function(e){console.log('box3 click');})</script></body></html>

事件捕获

事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止；事件捕获是一个由外向内的触发过程，当通过元素的addEventListener方法绑定事件时，如果将函数的第三个参数设置为true，则事件冒泡会转为事件捕获。

举例说明:

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><style>/*略*/</style></head><body><divid="box1">box1<divid="box2">box2<divid="box3">box3</div></div></div><script>varbox1=document.getElementById('box1');varbox2=document.getElementById('box2');varbox3=document.getElementById('box3');box1.addEventListener('click',function(e){console.log('box1 click')},true)box2.addEventListener('click',function(){console.log('box2 click')},true)box3.addEventListener('click',function(e){console.log('box3 click');},true)</script></body></html>

阻止事件冒泡

通过以上例子可以看出，事件冒泡和事件捕获都会导致事件的同时执行，如何避免事件的传播呢?因此我们可以使用以下方式实现：

event.cancelBubble = true
event.stopPropagation()

varbox1=document.getElementById('box1');varbox2=document.getElementById('box2');varbox3=document.getElementById('box3');box1.addEventListener('click',function(e){console.log('box1 click')})box2.addEventListener('click',function(){console.log('box2 click')})box3.addEventListener('click',function(e){console.log('box3 click');//阻止事件传播1// e.stopPropagation();//阻止事件冒泡2// e.cancelBubble = true;})

BOM对象

BOM(Browser Object Model)，浏览器对象模型，与所使用的浏览器直接相关的一些内置对象，目前浏览器的内核一般两个：（webkit，gecko）;BOM通常包含以下几个常见的内置对象

Window
1. Screen
2. Location
3. Navigator
4. History
5. Document

window对象

window对象提供的弹窗组件:

open：打开一个新窗口
alert：打开警告框
confirm：打开确认框
prompt：打开消息输入框

screen对象

screen表示屏幕信息，通过screen可以获取屏幕大小以及实际可用高宽（以像素为单位），常用属性有以下:

width：获取屏幕宽度
height：获取屏幕高度
availWidth：可用宽度(减去状态栏宽度(侧边))
availHeight：可用高度(减去状态栏高度(底部))

location对象

location对象表示当前页面的url地址信息，一个完整的URL地址如下:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用 location.href 获取。要获得URL各个部分的值，可以这么写：

location.protocol;// 'http'location.host;// 'www.example.com'location.port;// '8080'location.pathname;// '/path/index.html'location.search;// '?a=1&b=2'location.hash;// 'TOP'

history对象

history 对象保存了浏览器的历史记录，JavaScript可以调用 history 对象的 back() 或 forward () ，相当于用

户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用

history.back() 可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用 history.back() ，试图回到登录前的页面。这是一种错误

的方法。

任何情况，你都不应该使用 history 这个对象了。

DOM对象

DOM（Document Object Model）,文档对象模型，将html网页中的所有的元素当做一个对象进行操作，可以通过document对象操作指定元素的属性以及行为（函数）；HTML中将整个网页文档当做一颗倒置的文档树来理解

JavaScript-事件-BOMDOM