js事件机制

1事件机制 1.1常见事件类型 鼠标事件类型 onclick ondblclick onmousedown:鼠标按下时触发 onmousemove:鼠标移动时触发 onmouseup:鼠标抬起时触发 onmouseover:鼠标移到元素上时触发 onmouseout:鼠标移出元素时触发 onmouseenter:鼠标移入元素内触发,触发一次 onmouseleave:鼠标移出元素时触发一次 oncontextmenu:鼠标右键时出现菜单时触发 键盘事件类型 onkeydown:当用户按下键盘上任意键触发，若是按住不放，会重复触发 onkeypress:当用户按下键盘上的字符键触发，若是按住不放，会重复触发 onkeyup:当用户释放键盘上的键触发 HTML事件 onload:当页面（包含图片资源、音频、视频等资源）彻底加载后在window 上面触发，或当框架集加载完毕后在框架集上触发。 onresize:窗口调整大小是触发 onscroll:当窗口的滚动条滚动时触发 HTML 表单事件 onselect: 当用户选择文本框(input 或textarea)中的一个或多个字符触发并松开鼠标时触发 onchange: 当文本框(input 或textarea)内容改变且失去焦点后触发或者Select 选中的内容变化 oninput:当用户输入是开始执行 onfocus:当元素获取焦点时触发 onblur:当元素失去焦点时触发 focus/blur事件能够用在window上，当用户切出标签或者最小化win窗口时，触发blur，当用户切回标签或者切回窗口时触发。 onsubmit:当用户提交(单击提交按钮)表单时触发 onreset:当用户点击reset按钮时触发 模拟事件 模拟事件就是和事件触发时的效果同样，但不是事件而是对象的一个方法。 input.focus() 让input获取焦点 input.blur 让input失去焦点 button.click() 让按钮等元素被单击 form.submit() 让表单被提交 form.reset() 让表单被重置 1.2事件流 1.2.1事件流原理 事件流分三个阶段:事件捕获阶段、目标阶段、冒泡阶段 事件捕获阶段:当一个事件发生了，从HTML最外层(body)向目标元素靠近的阶段。 目标阶段：事件处于目标元素时 冒泡阶段：事件从目标元素流向body的阶段 事件流原理 事件处理程序:事件处理程序就是对一个事件进行响应的程序。开发者能够经过绑定的方式给一个元素添加一个事件处理程序。 dom.addEventListener(eventType,listener,useCapture):给元素添加一个事件监听者。 eventType:事件类型 listener:监听者 => 监听程序 useCapture:执行时机。true:捕获阶段执行 false:冒泡阶段执行 在事件流动的过程当中，开发者能够绑定事件处理程序。 1.2.2兼容性 addEventListener IE 非IE addEventListener IE九、IE十、IE十一、Edge ✔ Chrome/firefox/safari/opera ✔ attachEvent IE五、IE六、IE七、IE8 ✔ ✘ attachEvent的事件处理程序默认就是冒泡阶段执行，IE5-IE8不支持捕获阶段。 function addEvent(aDom,type,fun){ if(aDom.addEventListener){ aDom.addEventListener(type,fun,false); }else if(aDom.attachEvent){ aDom.attachEvent("on"+type,fun); }else{ aDom.setAttribute("on"+type,fun); } } 能够给一个Dom设置多个监听者,先监听的先处理。 // 能够给一个对象设置多个监听者 oMain.addEventListener("click",function(){ console.log("main1") },false); oMain.addEventListener("click",function(){ console.log("main2") },false); 1.3事件对象 事件对象是事件执行过程当中的一个对象，包含事件的一些特定信息。 通常鼠标事件产生MouseEvent对象，键盘事件产生KeyboardEvent，MouseEvent和KeyBoardEvent都继承了Event对象，其中Event对象存储共有的属性。 type:事件类型 cancelBubble:关闭冒泡机制 target/srcElement:目标元素 1.3.1事件的目标元素 target/srcElement 能够获取事件的目标元素，其存在兼容性。 e.target for w3c/ie9/ie9+ e.srcElement for ie6/ie7/ie8 var target = e.target || e.srcElement 1.3.2阻止事件冒泡 阻止事件冒泡就是在事件的冒泡阶段，不在让事件继续向上传递。 e.stopPropagation for w3c/ie9/ie9+ e.cancelBubble for ie6/ie7/ie8 function stopBubble(event){ if(event.stopPropagation){ // for w3c/ie9/ie9+ event.stopPropagation(); }else{ event.cancelBubble = true; } } 1.3.3阻止默认事件 一些元素例如a、submit、reset等元素都存在默认事件，若是要阻止默认事件 event.preventDefault event.returnValue = false 在事件处理程序中，若是让事件处理程序直接返回false，能够阻止默认事件。且兼容ie6/ie7/ie8 <a id="test" href="###" onclick="javascript:return false;">百度</a> 1.3.4事件委托(事件代理) 通俗地讲，就是当你须要完成某件事时，因为时间或者其余缘由致使你不能直接去作这件事，此时你委托别人帮你完成这件事。帮你完成这件事的人就是委托者。 事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件 addEvent(oMsgs,"click",function(event){ var e = event||window.event; var target = e.target || e.srcElement; // console.log(target); if(target.nodeName.toLowerCase() === 'a'){ var oLi = target.parentNode.parentNode; var start = oLi.offsetHeight; var end = 0; var change = end - start; animateFn(start,change,oLi,function(){ oMsgs.removeChild(oLi); }); } stopBubble(e); }); 1.3.5MouseEvent clientX/clientY screenY/screen 1.3.6KeyboardEvent keyboardevent中特有属性 key:表示按键盘上的任意键 keyCode:键盘标号。a-65/回车-13/空格-32/ crtlKey/altKey/shiftKey:默认是false，若是按了就是true // 添加快捷键ctrl+enter提交 addEvent(document,"keyup",function(event){ var e = event||window.event; if(e.ctrlKey && e.keyCode == 13){ // console.log("提交"); sendMsg(); } }); 1.4DOM ready DOMContentLoaded表示文档结构加载完成时执行，不等待stylesheets, images, and subframes加载结束。咱们把这个过程称为DOM ready。 ie6/7/8 浏览器经过document的onreadystatechange事件监测dom是否加载完成 function addDomContentLoadedEvent(fn){ // for w3c if(document.addEventListener){ console.log("addEventListener"); document.addEventListener("DOMContentLoaded",function(event){ fn && fn(e); },false); }else if(document.attachEvent){ // for ie6/7/8 document.attachEvent("onreadystatechange",function(){ if(document.readyState === 'complete'){ fn && fn(window.event); } }); } } 1.5MouseWheel onmousewheel:当鼠标滚轮滚动时触发，ie6/7/8/9/9+、edge、chrome、safari、opera wheelDelta:表示滚轮的滚动，向上滚动一格+120；向下滚动一格-120 firefox 经过DOMMouseScroll事件支持。 detail:表示滚动的滚动，向上滚动一格-3；向下滚动一格+3 function wheelFn(fn){ var down = false; if(window.navigator.userAgent.indexOf("Firefox") > -1){ document.addEventListener("DOMMouseScroll",function(event){ var e = event || window.event; if(e.detail > 0){ down = true; }else{ down = false; } fn && fn(down); },false); }else{ document.onmousewheel = function(event){ var e = event||window.event; console.log(e.wheelDelta); if(e.wheelDelta < 0){ down = true; }else{ down = false; } fn && fn(down); } } } 1.6TouchEvent 在移动端(手机、平板)，能够经过手势的来操做设备。 touchstart:当手指触摸屏幕时触发；即便已经有一个手指放在了屏幕上也会触发。 touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。 touchend:当手指从屏幕上移开时触发。 touchcanel:当手持设备来电话、自动关机时触发，通常不用。 Touch事件也拥有事件对象(TouchEvent),其中包含一个Touches数组，里面存的是手指(Touch) Touch中有一些属性 clientX:触摸目标在视口中的X坐标。 clientY:触摸目标在视口中的Y坐标。 identifier：表示触摸的惟一ID。 pageX：触摸目标在页面中的x坐标。 pageY：触摸目标在页面中的y坐标。 screenX:触摸目标在屏幕中的x坐标。 screenY:触摸目标在屏幕中的y坐标。 target:触摸的DOM节点坐标 oMain.addEventListener("touchstart",function(event){ // event是TouchEvent类型 console.log(event); var touch = event.touches[0]; var startX = touch.clientX; var startY = touch.clientY; var left = this.offsetLeft; var top = this.offsetTop; function move(event){ var touch = event.touches[0]; var endX = touch.clientX; var endY = touch.clientY; var dltX = endX - startX; var dltY = endY - startY; this.style.left = (left + dltX) +'px'; this.style.top = (top+dltY)+'px'; } oMain.addEventListener("touchmove",move,false); oMain.addEventListener("touchend",function(){ // console.log("end"); oMain.removeEventListener("touchmove",move,false); },false); },false); 研究Touch.js Hammer.js 1.7碰撞检测 [1]必定要定位 [2]必定要计算上下左右的距离 1.7.1设备相关(C) window.addEventListener("deviceorientation",function(){ div1.innerHTML=event.alpha; // alpha,beta,gamma },false)