JavaScript事件对象

clientWidth, clientHeight：这两个属性可以获取元素可见宽度和高度，这些属性都是不带px的，返回都是一个数字，可以直接进行计算，会获取元素宽度和高度，包括内容区和内边距，这些属性都是只读的，不能修改。

offsetWidth.offsetHeight：获取元素整个的宽度和高度，包括内容区，内边距和边框。

offsetParent：可以用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素，如果所以的祖先元素都没有开启定位，则会返回body。

var op = box1.offsetParent;

offsetLeft：当前元素相对于其他定位父元素的水平偏移量。

offfsetTop：当前元素相对于其他定位父元素的垂直偏移量。

scrollWidth，scrollWidth：可以获取元素整个滚动区的宽度和高度。

scrollLeft：可以获取水平滚动条滚动的距离。

scrollTop：可以获取垂直滚动条滚动的距离。

当满足scrollHeight - scrollTop == clientHeight  时说明垂直滚动条到底了

当满足scrollWidth - scrollLeft == clientWidth  时说明水平滚动条到底了

onmousemove：该事件会在鼠标移动时被触发。

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标、键盘哪个键被按下、鼠标滚轮滚动反向....

clientX：可以获取鼠标指针的水平坐标。

clientY：可以获取鼠标指针的垂直坐标。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。 说的通俗一点就是，event是JS的一个系统内置对象。 平时无法使用，当DOM元素发生按键、鼠标等等各种事件时，系统会自动根据DOM元素触发的事件生成一个event对象。

当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标

window.onload = function(){

//获取两个div

var areaDiv = document.getElementById('areaDiv');

var showMsg = document.getElementById('showMsg');

areaDiv.onmousemove = function(event){

var x = event.clientX;

var y = event.clientY;

showMsg.innerHTML = 'x ='+x+', y ='+y;   //在showMsg中显示鼠标坐标

div跟随鼠标移动

#box1{width :100px; height: 100px backfroud-color:red; position:absolute;

window.onload = function(){

var box1 = document.getElementById('box1'); // 获取box1

document.onmousemove = function(event){ //获取鼠标移动事件

//获取滚动条滚动距离

var st =document.body.scrollTop||document.documentElement.scrollTop;

var sl =document.body.scrollLeft||document.documentElement.scrollLeft;

//clientX和clientY,用与获取鼠标在当前的可见窗口坐标，div的偏移量，是相对于整个页面的。

pageX和pageY可以获取鼠标相对于当前页面的坐标。

var left = event.pageX;

var top = event.pageY;

//设置div偏移量

box1.style.left = left + sl+'px';

box1.style.top = top +st+'px';

事件的冒泡：所谓的冒泡指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。

<div id='box1'>我是box1<span id='sl'>我是span</span></div>

//为sl绑定一个单击响应函数

var  sl = document.getElementById('sl');

sl.onclick = function(){

alert('我是span的单击响应函数'}

}

//box1绑定一个单击响应函数

var  box1 = document.getElementById('box1');

box1.onclick = function(){

alert('我是box1的单击响应函数'}

}

//为body绑定一个单击响应函数

document.body.onclick = function(){

alert('我是body的单击响应函数')；

}

点击span时 box1 和body也会出现。

在开发中大部分情况冒泡是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

event.cancelBubble = true// 取消冒泡,可以将事件对象的cancelBubble设置为true，即可取消冒泡

事件的委派：指将事情统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。事件的委派是利用了冒泡，通过事件的委派可以减少事件绑定的次数，提高程序的性能。

target：event中的target表示的触发事件的对象。

事件的绑定

var btn01 = document.getElementById('btn01');

使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后面的会覆盖掉前面的。

addEventListener()：通过这个方法可以为元素绑定响应函数，参数：1.事件的字符串，不要on。2.回调函数，当事件触发时该函数会被调用。3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时。响应函数将会按照函数绑定好的顺序执行。

btn01.addEventListener('click',function(){

alert(1);

),false);

btn01.addEventListener('click',function(){

alert(2);

),false);

attachEvent（）：在IE8中可以使用attachEvent（）来绑定事件，参数：1.事件的字符串，要on。2.回调函数。这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是先绑定后执行，执行顺序和addEventListener（）相反。

定义一个函数，用来为指定元素绑定响应函数。

addEventListener()中的this，是绑定事件的对象，attachEvent中的this，是window。需要统一两个方法的this。参数：obj 要绑定事件的对象。eventStr 事件的字符串。 callback 回调函数。

function bind(obj,eventStr,cakkback){

if(obj.addEventListener){

obj.addEventListener(eventStr,callback,false);

}else{

//this是谁由调用方式决定

callback（obj）;

事件的传播
-关于事件的传播网景公司和微软公司有不同的理解
-微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件
然后在向内传播给后代元素
-W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
一在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
一事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
一事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

-如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器中没有捕获阶段。