2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

? ? ?大家好，在學(xué)習(xí)H5的過程中，我們接觸了許許多多不同的事件，它們各自都有自己獨(dú)到的用途，且在自己的領(lǐng)域發(fā)揮了重要的作用，下面就跟隨我一起看看它們都做了些啥，Let's?go!!!

---

鼠標(biāo)事件、鍵盤事件

? ?? ?首先在這里我們要注意到獲取鼠標(biāo)事件、鍵盤事件的時(shí)候，火狐瀏覽器是一個(gè)特殊的存在，其他的瀏覽器可以通過window.event拿到對象，但火狐瀏覽器在函數(shù)里需要傳遞一個(gè)參數(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)移動)

實(shí)現(xiàn)幾個(gè)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代碼：幾個(gè)相同的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(按下，抬起)

實(shí)現(xiàn)一個(gè)div的點(diǎn)擊拖拽//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(抬起鍵盤)? ?

實(shí)現(xiàn)一個(gè)div鍵盤控制上下左右運(yùn)動（此處不考慮碰壁檢測）//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)事件

// 點(diǎ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. 輸入框焦點(diǎn)事件

使用onfocus實(shí)現(xiàn)輸入框的placeholder效果var txt=document.getElementById(“txt1");txt.onfocus=function(){this.value="";}txt.onblur=function(){this.value="用戶名";}

6. 事件冒泡

? ? 事件冒泡：是指子標(biāo)簽發(fā)生事件后，一直傳遞到父級，一直追溯到document,如點(diǎn)擊一個(gè)在div標(biāo)簽里的button標(biāo)簽，那么div、body、document的點(diǎn)擊事件會依次觸發(fā)

window.onload=function(){var box=document.getElementById("box");var btn=document.getElementsByTagName("input")[0];//點(diǎn)擊后，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];//點(diǎn)擊后，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. 事件綁定

????????除以上所講的綁定方法外，還有一個(gè)方法即addEventListener給標(biāo)簽綁定事件，優(yōu)點(diǎn)：可以綁定多個(gè)不同的事件。缺點(diǎn)：兼容性問題，????

解決兼容性問題：attachEven 兼容ie8及以下,本次以點(diǎn)擊事件舉例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);} }

? ? ?注意點(diǎn)：二者區(qū)別是執(zhí)行的優(yōu)先級不一樣

允許向同個(gè)元素添加多個(gè)事件，也可以向同個(gè)元素添加不同類型的事件，且不會覆蓋已存在的事件：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->method3

8. 冒泡和捕獲

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發(fā)的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點(diǎn)擊 <p> 元素, 哪個(gè)元素的 "click" 事件先被觸發(fā)呢？

在?冒泡?(false)中，內(nèi)部元素的事件會先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點(diǎn)擊事件先觸發(fā)，然后會觸發(fā) <div> 元素的點(diǎn)擊事件。

在?捕獲(true)?中，外部元素的事件會先被觸發(fā)，然后才會觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點(diǎn)擊事件

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é)

以上是生活随笔為你收集整理的事件大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。