事件大全
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
? ? ?大家好,在學(xué)習(xí)H5的過程中,我們接觸了許許多多不同的事件,它們各自都有自己獨到的用途,且在自己的領(lǐng)域發(fā)揮了重要的作用,下面就跟隨我一起看看它們都做了些啥,Let's?go!!!
鼠標(biāo)事件、鍵盤事件
? ?? ?首先在這里我們要注意到獲取鼠標(biāo)事件、鍵盤事件的時候,火狐瀏覽器是一個特殊的存在,其他的瀏覽器可以通過window.event拿到對象,但火狐瀏覽器在函數(shù)里需要傳遞一個參數(shù)e/ev/event,其中嚴(yán)謹(jǐn)?shù)氖莈vent
1.火狐兼容問題解決方案
document.onmousedown = function (e) {var ev = e || window.event; console.log(ev); }? ? 對象(鼠標(biāo)、鍵盤)獲取到了之后,接下來就可以執(zhí)行一些鼠標(biāo)和鍵盤能執(zhí)行的事了,大家想想在日常生活中購物、玩游戲、微博留言啥的,鼠標(biāo)和鍵盤是不是都是我們達(dá)到目的的得利助手?
2. 鼠標(biāo)事件
? ? ev.clientX ?可視區(qū)中,鼠標(biāo)的X坐標(biāo);
? ? ev.clientY ?可視區(qū)中,鼠標(biāo)的Y坐標(biāo);? ?
case-one: ?onmousemove(鼠標(biāo)移動)
實現(xiàn)幾個div的鼠標(biāo)移動跟隨//css樣式:注意需要絕對定位 div{width: 100px;height: 100px;border: 1px solid #ccc;border-radius: 50%;position: absolute;top: 0;left: 0;background-color: red;}//body代碼:幾個相同的div(大小可以自定,建議相同,后面的js定位在div中心,好看而已)<div></div><div></div><div></div><div></div><div></div>//js代碼: <script type="text/javascript">var adiv=document.getElementsByTagName("div");document.onmousemove=function(e){var ev=e||window.event;var l=ev.clientX;var t=ev.clientY;for (var i = 0; i<adiv.length; i++) {function move(i){setTimeout(function(){adiv[i].style.left=(l-50)+"px";adiv[i].style.top=(t-50)+"px";},i*30)}move(i);}} </script>case-two: ?onmousedown、onmouseup(按下,抬起)
實現(xiàn)一個div的點擊拖拽//css樣式: *{margin: 0;padding: 0;} //通配符 #box{width: 20px;height: 20px;background-color: red;position: absolute;}//body代碼: <div id="box"></div>//js代碼: var box=document.getElementById("box"); box.onmousedown=function(e){var ev=e||window.event;var x=ev.clientX-box.offsetLeft;var y=ev.clientY-box.offsetTop;document.onmousemove=function(e){var ev=e||window.event;box.style.left= ev.clientX-x+"px";box.style.top= ev.clientY-y+"px";}document.onmouseup=function(){document.onmousemove=null;} }case-three: ?ondblclick(鼠標(biāo)左鍵雙擊)
case-four: ?oncontextmenu(鼠標(biāo)右擊)
document.oncontextmenu = function (){alert('a'); return false; //阻止默認(rèn)事件即右鍵的菜單事件}case-five: ?onmousewheel、DOMMouseScroll?(滾輪事件)
function wheel(target,upfn,downfn){//獲取的兼容性寫法var Firefox=window.navigator.userAgent.indexOf("Firefox");//是==-1,沒有 if (Firefox==-1) {target.onmousewheel=fn;}else{target.addEventListener("DOMMouseScroll",fn,false);}function fn(e){var ev=e||window.event;if (ev.detail) {// 火狐if (ev.detail>0) {// alert("向上");upfn();}else{// alert("向下");downfn();}}else{//谷歌if (ev.wheelDelta>0) {// alert("向下");downfn();}else{// alert("向上");upfn();} }}} // 滾輪事件封裝函數(shù)function wheel(obj,upFn,downFn) {if(arguments.length < 3){alert('Sorry,你輸入的參數(shù)不夠');}obj.onmousewheel = fn; obj.addEventListener && obj.addEventListener('DOMMouseScroll',fn,false);function fn(ev){var ev = ev || window.event;var bool = true;if(ev.wheelDelta){bool = ev.wheelDelta > 0 ? true : false;}else if(ev.detail){bool = ev.detail < 0 ? true : false;}bool && upFn();(!bool) && downFn();//prevent(ev);}}3. 鍵盤事件
case: ?onkeydown(按下鍵盤)、onkeyup(抬起鍵盤)? ?
實現(xiàn)一個div鍵盤控制上下左右運動(此處不考慮碰壁檢測)//css樣式和body代碼如上case-two相同//js代碼: <script type="text/javascript">var box=document.getElementById("box");document.onkeydown=function(e){var ev=e||window.event;if (ev.keyCode==37) {box.style.left=box.offsetLeft-10+"px";}else if (ev.keyCode==39) {box.style.left=box.offsetLeft+10+"px";}else if (ev.keyCode==38) {box.style.top=box.offsetTop-10+"px";}else if (ev.keyCode==40) {box.style.top=box.offsetTop+10+"px";}} </script>?特殊的按鍵:ctrlKey,shiftKey,altKey
?鍵盤數(shù)字對應(yīng)的ASCII碼(keycode代碼)
4.表單事件、阻止默認(rèn)事件
// 點擊submit按鈕(在form里提交至百度),彈出提示框var form1 = document.querySelector("#form1");form1.onsubmit = function (ev){alert('a');//ev.preventDefault 不兼容ie6-ie8//return false 阻止默認(rèn)事件(此處就不會跳轉(zhuǎn)至百度窗口了)}5. 輸入框焦點事件
使用onfocus實現(xiàn)輸入框的placeholder效果var txt=document.getElementById(“txt1");txt.onfocus=function(){this.value="";}txt.onblur=function(){this.value="用戶名";}6. 事件冒泡
? ? 事件冒泡:是指子標(biāo)簽發(fā)生事件后,一直傳遞到父級,一直追溯到document,如點擊一個在div標(biāo)簽里的button標(biāo)簽,那么div、body、document的點擊事件會依次觸發(fā)
window.onload=function(){var box=document.getElementById("box");var btn=document.getElementsByTagName("input")[0];//點擊后,btn事件觸發(fā)btn.onclick=function(e){box.style.display="block";alert("a");}//btn的父級,也會隨后被觸發(fā)document.onclick=function(){box.style.display="none";alert("b")}}????取消事件冒泡的做法:
window.onload=function(){var box=document.getElementById("box");var btn=document.getElementsByTagName("input")[0];//點擊后,btn事件觸發(fā)btn.onclick=function(e){var ev=e||window.event;box.style.display="block";alert("a");ev.cancelBubble=true; //取消事件冒泡// event.stopPropagation(); 也是取消事件冒泡// return false 也可以取消冒泡,還可以阻止默認(rèn)事件}//由于取消事件冒泡,btn的父級,不會隨后被觸發(fā)document.onclick=function(){box.style.display="none";alert("b")}}7. 事件綁定
????????除以上所講的綁定方法外,還有一個方法即addEventListener給標(biāo)簽綁定事件,優(yōu)點:可以綁定多個不同的事件。缺點:兼容性問題,????
解決兼容性問題:attachEven 兼容ie8及以下,本次以點擊事件舉例var Btn = document.getElementById("Btn"); if (Btn.addEventListener) {Btn.addEventListener("click", myFunction,false);//false指的是不事件捕捉,一般用false } else if (Btn.attachEvent) {Btn.attachEvent("onclick", myFunction); // 包含on } function myFunction() {alert("Hello World!"); }?case-add:
結(jié)合下面的 case-removevar func = function(){}; //例子 addEvent(window,"load",func)function addEvent(elem, type, fn){ if(elem.attachEvent){elem.attachEvent('on'+type,fn); return; } if(elem.addEventListener){ elem.addEventListener(type,fn,false);} }? ? ?注意點:二者區(qū)別是執(zhí)行的優(yōu)先級不一樣
允許向同個元素添加多個事件,也可以向同個元素添加不同類型的事件,且不會覆蓋已存在的事件:ele.attachEvent("onclick",method1); ele.attachEvent("onclick",method2);ele.attachEvent("onclick",method3);執(zhí)行的順序:method3->method2->method1ele.addEventListener("mousedown",method1,false); ele.addEventListener("click",method2,false);ele.addEventListener("mouseup",method3,false);執(zhí)行的順序:method1->method2->method38. 冒泡和捕獲
事件傳遞有兩種方式:冒泡與捕獲。
事件傳遞定義了元素事件觸發(fā)的順序。 如果你將 <p> 元素插入到 <div> 元素中,用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發(fā)呢?
在?冒泡?(false)中,內(nèi)部元素的事件會先被觸發(fā),然后再觸發(fā)外部元素,即: <p> 元素的點擊事件先觸發(fā),然后會觸發(fā) <div> 元素的點擊事件。
在?捕獲(true)?中,外部元素的事件會先被觸發(fā),然后才會觸發(fā)內(nèi)部元素的事件,即: <div> 元素的點擊事件先觸發(fā) ,然后再觸發(fā) <p> 元素的點擊事件
9. 事件移除
case-remove:
非ie瀏覽器target.removeEventListener(type,listener,useCapture);ie瀏覽器target.detachEvent(on+type, listener);//下面代碼要結(jié)合上述的case-addvar func = function(){};removeEvent(window,"load",func)function removeEvent(elem, type, fn) { if(elem.detachEvent){ elem.detachEvent('on' + type, fn); return; } if(elem.removeEventListener){ elem.removeEventListener(type, fn, false);} }?
轉(zhuǎn)載于:https://my.oschina.net/sundaren/blog/710977
總結(jié)
- 上一篇: Unity3dShader_边缘发光效果
- 下一篇: [Array]Pascal's Tria