2019獨角獸企業重金招聘Python工程師標準>>>

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

---

鼠標事件、鍵盤事件

? ?? ?首先在這里我們要注意到獲取鼠標事件、鍵盤事件的時候，火狐瀏覽器是一個特殊的存在，其他的瀏覽器可以通過window.event拿到對象，但火狐瀏覽器在函數里需要傳遞一個參數e/ev/event,其中嚴謹的是event

1.火狐兼容問題解決方案

document.onmousedown = function (e) {var ev = e || window.event; console.log(ev); }

? ? 對象（鼠標、鍵盤）獲取到了之后，接下來就可以執行一些鼠標和鍵盤能執行的事了，大家想想在日常生活中購物、玩游戲、微博留言啥的，鼠標和鍵盤是不是都是我們達到目的的得利助手？

2. 鼠標事件

? ? ev.clientX ?可視區中，鼠標的X坐標；

? ? ev.clientY ?可視區中，鼠標的Y坐標；? ?

case-one: ?onmousemove(鼠標移動)

實現幾個div的鼠標移動跟隨//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(按下，抬起)

實現一個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(鼠標左鍵雙擊)

case-four: ?oncontextmenu(鼠標右擊)

document.oncontextmenu = function (){alert('a'); return false; //阻止默認事件即右鍵的菜單事件}

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();} }}} // 滾輪事件封裝函數function wheel(obj,upFn,downFn) {if(arguments.length < 3){alert('Sorry,你輸入的參數不夠');}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(抬起鍵盤)? ?

實現一個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

?鍵盤數字對應的ASCII碼（keycode代碼）

4.表單事件、阻止默認事件

// 點擊submit按鈕（在form里提交至百度），彈出提示框var form1 = document.querySelector("#form1");form1.onsubmit = function (ev){alert('a');//ev.preventDefault 不兼容ie6-ie8//return false 阻止默認事件（此處就不會跳轉至百度窗口了）}

5. 輸入框焦點事件

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

6. 事件冒泡

? ? 事件冒泡：是指子標簽發生事件后，一直傳遞到父級，一直追溯到document,如點擊一個在div標簽里的button標簽，那么div、body、document的點擊事件會依次觸發

window.onload=function(){var box=document.getElementById("box");var btn=document.getElementsByTagName("input")[0];//點擊后，btn事件觸發btn.onclick=function(e){box.style.display="block";alert("a");}//btn的父級，也會隨后被觸發document.onclick=function(){box.style.display="none";alert("b")}}

????取消事件冒泡的做法：

window.onload=function(){var box=document.getElementById("box");var btn=document.getElementsByTagName("input")[0];//點擊后，btn事件觸發btn.onclick=function(e){var ev=e||window.event;box.style.display="block";alert("a");ev.cancelBubble=true; //取消事件冒泡// event.stopPropagation(); 也是取消事件冒泡// return false 也可以取消冒泡，還可以阻止默認事件}//由于取消事件冒泡，btn的父級，不會隨后被觸發document.onclick=function(){box.style.display="none";alert("b")}}

7. 事件綁定

????????除以上所講的綁定方法外，還有一個方法即addEventListener給標簽綁定事件，優點：可以綁定多個不同的事件。缺點：兼容性問題，????

解決兼容性問題：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:

結合下面的 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);} }

? ? ?注意點：二者區別是執行的優先級不一樣

允許向同個元素添加多個事件，也可以向同個元素添加不同類型的事件，且不會覆蓋已存在的事件：ele.attachEvent("onclick",method1); ele.attachEvent("onclick",method2);ele.attachEvent("onclick",method3);執行的順序：method3->method2->method1ele.addEventListener("mousedown",method1,false); ele.addEventListener("click",method2,false);ele.addEventListener("mouseup",method3,false);執行的順序：method1->method2->method3

8. 冒泡和捕獲

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

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

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

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

9. 事件移除

case-remove:

非ie瀏覽器target.removeEventListener(type,listener,useCapture);ie瀏覽器target.detachEvent(on+type, listener);//下面代碼要結合上述的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);} }

?

轉載于:https://my.oschina.net/sundaren/blog/710977

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。