JavaScript事件对象

1.事件的含义事件就是文档或浏览器窗口发生的一些特定的交互瞬间，是用户与浏览器的交互行为Javascript与HTML之间的交互是通过事件实现的。对于web应用来说，有下面这些代表性是事件：单击事件、鼠标移入移出事件、键盘按下\弹起事件等等2.常用事件     onclick 鼠标点击某个对象   ondblclick 鼠标双击某个对象   onerror 当加载文档或图像时发生某个错误    onfocus 元素获得焦点   onblur 元素失去焦点 onkeydown 某个键盘的键被按下   onkeypress 某个键盘的键被按下或按住   onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载   onmousedown 某个鼠标按键被按下   onmousemove 鼠标被移动   onmouseout 鼠标从某元素移开   onmouseover 鼠标被移到某元素之上   onmouseup 某个鼠标按键被松开   onreset 重置按钮被点击   onresize 窗口或框架被调整尺寸   onselect 文本被选定 onsubmit 提交按钮被点击   onunload 用户退出页面onload  页面加载事件浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行的时候就运行一行，如果将script标签写在上面，在执行代码时，页面还没有加载,会报错注：代码若要放前，要为window绑定一个onload事件，onload事件会在整个页面加载完成之后触发  window.onload 在页面上只能出现一次，后面的代码会覆盖前面的代码，即只执行最后一个代码3.事件对象     当事件的响应被函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘那个按键被按下，鼠标滚轮滚动的方向                           鼠标/键盘属性属性 描述            altKey返回当事件被触发时，“ALT” 是否被按下button 返回当事件被触发时，哪个鼠标按钮被点击。            clientX返回当事件被触发时，鼠标指针的水平坐标            clientY返回当事件被触发时，鼠标指针的垂直坐标            ctrlKey返回当事件被触发时，“CTRL” 键是否被按下            metaKey返回当事件被触发时，“meta” 键是否被按下            relatedTarget 返回与事件的目标节点相关的节点screenX 返回当某个事件被触发时，鼠标指针的水平坐标            screenY返回当某个事件被触发时，鼠标指针的垂直坐标            shiftKey返回当事件被触发时，“SHIFT” 键是否被按下  clientX  可以获取鼠标指针的水平坐标， clientY  可以获取鼠标指针的垂直坐标 var X=event.clientX; var Y=event.clientY;在IE8中，响应函数被触发时，浏览器不会传递事件对象(undefined) 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 event=event||window.event;   //解决兼容性问题    4.事件冒泡  所谓冒泡指的是：事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消       取消冒泡： event.cancelBunn;e=true; 5.事件的委派     事件委派指：事件统一绑定给共同的祖先元素，这样当后代元素上遇到的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能事件对象的属性target：返回触发事件的元素（事件的目标节点） 例：list.οnclick=function(event){ event=event||window.event;   处理兼容性问题 console.log(event.target); 点击什么获取到什么 console.log(event.target.nodeName); if(event.target.nodeName==“A”){ alert(“a标签被点击了”); } }6.事件的传播1含义：关于事件的传播网景公司和微软公司有不同的理解。微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发 当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素2三个阶段：W3C综合了两个公司的方案，将事件传播分成了三个阶段1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件3.冒泡阶段：事件从目标元素向他的祖先因素传递，依次触发祖先元素上的事件。如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true   一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false注：IE8及以下浏览器中没有捕获阶段 例：btn.addEventListener(“click”,function(){},false);7. 事件的绑定对象.事件=函数形式绑定事件它只能同时为同一个元素绑定同一事件一次，不能绑定多次，如果绑定多次，后面的会覆盖掉前面的 例：var btn=document.getElementById(“btn”); btn.οnclick=function(){ alert(1); }; btn.οnclick=function(){  //再次绑定后，只执行最后一次的代码 alert(2); };    大部分浏览器中给元素绑定事件  addEvenetListrner()  addEventListene()  通过这个方法也可以为元素绑定响应函数 参数：1、事件的字符串，不加on2、回调函数，当事件触发时函数会被调用3、是否在捕获阶段触发事件，需要一个布尔值，一般传false 使用addEventListener()可以同时为一个元素的相同事件定多个响应函数，这样当事件被触发时，响应韩式将按照韩式的绑定顺序执行（从上到下执行代码）注：这个方法不支持IE8及以下的浏览器 IE8及以下浏览器元素绑定事件 attachEvent这个方法在大部分的浏览器中不支持使用，只有在IE中可以使用addEventListener()来绑定事件参数：1、事件的字符串，要加on2、回调函数 注：这个方法也可以同时为一个是事件绑定多个处理函数，不同的是它是先绑定后执行，执行的顺序和addEventListene相反。IE8及IE8以下版本浏览器的代码执行顺序从下到上，IE8以上浏览器代码执行顺序从上到下 addEventListener()中的this，是绑定事件的对象 attachEvent()中的this，是window 需要统一两个方法的this8.自定义一个函数处理兼容性问题参数： obj 要绑定事件的对象eventStr 事件的字符串(不要on)callback 回调函数例：function bind(obj,evenStr,callback){if(obj.addEventListener){obj.addEventListener(evenStr,callback,false);  //大部分浏览器中给元素绑定事件}else{//ie8 及以下浏览器 //this的值由调用对象决定//需要统一两个方法的this   function(){callback.call(obj);obj.attachEvent(“on”+evenStr,function(){  //"on"字符串拼接callback.call(obj);});}} //方法的调用bind(btn,“click”,function(){ alert(1); console.log(this);}); bind(btn,“click”,function(){ alert(2);}); bind(btn,“click”,function(){ alert(3);});