JavaScript事件

Js常用的事件：{ onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onblur 元素失去焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标移动事件 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseenter 鼠标被移到某元素之上 onmouseleave 鼠标从某元素移开 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 onChange 改变事件 } mouseover 事件，mouseenter 事件的区别： mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

var div= document.getElementById('div'); // 进入test节点以后，该事件只会触发一次 // event.target 是 ul 节点 div.addEventListener('mouseenter', function (event) { console.log(123); }); // 进入test节点以后，只要在子Element节点上移动，该事件会触发多次 div.addEventListener('mouseover', function (event) { console.log(123); });

mouseout 事件，mouseleave 事件的区别： mouseout事件会冒泡，mouseleave事件不会。子节点的mouseout事件会冒泡到父节点，进而触发父节点的mouseout事件。mouseleave事件就没有这种效果，所以离开子节点时，不会触发父节点的监听函数。

绑定事件有两种方法： 1、 内部绑定 2、 外部绑定 该方法中的event为事件对象： { Event: -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息。 -在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下浏览器中，是将事件对象作为window对象的属性进行保存的。 （所以要考虑兼容性问题event=event||window。event）

–事件对象event的属性:{ altKey 返回当事件被触发时，“ALT” 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。 clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，“CTRL” 键是否被按下。 metaKey 返回当事件被触发时，“meta” 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时，“SHIFT” 键是否被按下。 keycode 返回当前按下键盘的编码 target 返回触发此事件的元素(事件的目标节点、可以得知当前是哪个子元素冒泡来调用祖先的函数) } 以下为事件对象的简单利用： （1） 事件监听键盘事件，使物块以帧数移动：

window.onload=function(){ var code={}; //转载key值 var box=document.getElementById("box"); //事件监听 //键盘按下事件 addEventListener("keydown",function(event){ code[event.keyCode]=true; //获取触发事件对象的key值 }); //键盘松开事件 addEventListener("keyup",function(event){ delete code[event.keyCode]; }) //87 83 65 68 上W下S左A右D function move(){ event=event||window.event; console.log(event.keyCode); if(87 in code){ //87=>W if(box.offsetTop<=1){ return; }else{ box.style.top=box.offsetTop-1+"px"; } } if(83 in code){ //83=>S if(box.offsetTop>=window.innerHeight){ return; }else{ box.style.top=box.offsetTop+1+"px"; } } if(65 in code){ //65=>A if(box.offsetLeft<=8){ return; }else{ box.style.left=box.offsetLeft-1+"px"; } } if(68 in code){ //68=>D if(box.offsetLeft>=window.innerWidth){ return; }else{ box.style.left=box.offsetLeft+1+"px"; } } } function play(){ move(); requestAnimationFrame(play); //帧数移动 } play(); }

*在使用键盘事件时，keydown默认第一次是为空字符串，所以使用keydown时会让人感觉有延迟。也就是当你第一次触发事件时，他先触发的是默认的字符串，当每下一次触发事件时，他触发的key值都是上一次触发的key值

（2） 点击物块随着鼠标移动，松开保留在移动的位置：

var box=document.getElementById("box"); box.onmousedown=function(event){ //事件兼容性 event=event||window.event; //为了保持点击后，鼠标位置留在点击时的位置 var ol=event.pageX-box.offsetLeft; var ot=event.pageY-box.offsetTop; document.onmousemove=function(event){ event=event||window.event; var left=event.pageX; var top=event.pageY; box.style.left=left-ol+"px"; box.style.top=top-ot+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } }

一些常用的偏移量： pageX pageY:鼠标指针的位置，相对于文档开头左上角的位置。（会随着滚动条的移动而移动）IE8不支持 offsetX offsetY:鼠标相对于事件源元素左上角的x,y坐标（元素内的左上角） offsetLeft:元素相对于左顶点（窗口）的距离 offsettop:元素相对于顶部（窗口）的距离 clientX clientY：鼠标指针相对与游览器窗口可视区左上角的位置（不会随着滚动条的移动而移动，意思是可视域与文档有一定的距离（有一定的高度）） screenX screenY 鼠标指针相对于显示器（电脑）左上角的位置

JS事件的传播（冒泡、委派）： 1、事件的传播：{ 微软认为事件应该有内向外传播，元素上的事件，传播给祖先元素 网景认为事件应该有外向内传播，由祖先上的事件，传播给元素 W3c综合两者说法，将事件传播分为三个阶段： 1、 捕获阶段-在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获， 但不会触发事件

//当为捕获阶段时，无非就是顺序不同，由外向内，直到找到目标元素 //外div3--内div div.addEventListener("click", function () { alert(123); }); div2.addEventListener("click", function () { alert(456); }); div3.addEventListener("click", function () { alert(789); });

2、目标阶段 -事件捕获到目标元素，捕获结束开始在目标元素上触发事件 3、冒泡阶段 -事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 （如果不希望冒泡发生可以通过事件对象取消冒泡） （event.cancelBubble=true） （所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发） *上述的监听事件中，点击子元素div，除了本身的点击事件被触发外，其父元素的点击事件也会被触发，默认的触发顺序是从触发目标向外，但如果监听事件绑定的true，则触发顺序从外到触发目标

div.addEventListener("click", function () { alert(123); }, true); div2.addEventListener("click", function () { alert(456); }, true); div3.addEventListener("click", function () { alert(789); }, true);

事件委派： -指将事件统一绑定为元素共同的祖先元素（给祖先定方法），这样在 后代触发事件时会进入冒泡阶段，冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件 -事件委派是利用冒泡，通过委派可以减少事件的绑定次数，提高程序性能（可通过事件对象中的属性target来得知触发此事件的元素） 事件委派与冒泡： 1、 事件委派用于给子元素相同的事件响应函数时，把相同的事件响应函数绑定在祖元素上，当目标元素触发时会冒泡到祖元素上，从而去处理祖元素上的事件响应函数

2、冒泡为层级关系时，每个层级的事件响应函数，在后代元素触 发相同对应事件时，会从触发的元素开始向上冒泡使层级以上事件响应函数被触发。

onload事件： 1、 onload是整个页面加载完成后才触发的事件，通常写window.onload（只能出现一次） window。Onload这个方式能避免无法获取对象的情况，从而导致代码因获取不到对象，而出错