JS事件


關於事件

什么是事件?

事件是可以被Javascript偵測到的行為,通俗的講就是當用戶與Web頁面進行某些交互時,解釋器就會創建響應的event對象以描述事件信息。

常見的事件有

  • 用戶點擊頁面上的某項內容
  • 鼠標經過特定的元素
  • 用戶按下鍵盤的某個按鍵
  • 用戶滾動窗口或改變窗口大小
  • 頁面元素加載完成或加載失敗

事件句柄

 通俗講就是事件發生時調用的那個函數。

 

事件定義

定義事件的步驟:

  • 獲取事件對象
  • 給事件對象綁定一個事件類型
  • 編寫事件句柄

html中寫js代碼,強耦合,不利於復用代碼。不推薦

解決了強耦合性,但只能給一個事件對象綁定一個事件類型。 同樣的事件類型,綁定兩次,以 后一次 為准。

同樣的事件類型,綁定多次,每個都會執行,可以設置時捕獲還是冒泡。

 

 第三個參數默認false(如果設置為true是事件捕獲,false是事件冒泡)

DOM事件流

DOM0級與DOM2級區別:

  • DOM2支持同一dom元素注冊多個同種事件
  • DOM2新增了捕獲和冒泡的概念

添加事件

移除事件

事件解綁成功的主要原因就是:保持addEventListener和removeaddEventListener里面的參數是一致的。

IE事件流(IE事件處理程序)

添加事件

 IE瀏覽器不支持事件捕獲,默認就是事件冒泡,所有沒有第三個參數。

移除事件

 

在ie中attachEvent是特殊的,這樣觸發的事件中,this總是指向window的

http://img.mukewang.com/climg/5d2d59e7000110ec06610233.jpg

http://img.mukewang.com/climg/5d2d5a190001d11302300041.jpg

 跨瀏覽器事件處理程序(解決兼容性)

事件周期

直系親屬樹結構

一般的情況都是采用事件冒泡,很少使用事件捕獲 

事件委托 (原理就是事件冒泡)

使用事件委托,只添加一次就能實現多次的效果。 

ul 是 父

li  是 子 

因為li沒有綁定事件,所以會往上冒泡,實現這樣的效果。

上述的代碼可以實現最終的效果。點擊不同的li標簽,執行不同的函數。 

事件的冒泡處理機制

event對象常用屬性和方法

 event對象

事件處理函數的參數。

event對象常用屬性和方法

type:事件類型

target:點擊誰,誰就是target ,事件源

currentTarget:事件綁定在誰身上,誰就是currentTarget

preventDefault():阻止默認行為。 

stopPropagation():阻止事件冒泡或捕獲。 

clientX/ clientY:從瀏覽器(左邊)/(頂部底邊)到鼠標點擊的位置,之間的距離

pageX/pageY:從瀏覽器(左邊)/(頂部底邊)到鼠標點擊的位置,之間的距離 + 滾動軸滾動的距離

screenX/screenY:屏幕最(左端)/(頂端)距離鼠標的位置

IE8及以下瀏覽器中的Event對象屬性與方法 

Event對象跨瀏覽器兼容寫法 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Event對象跨瀏覽器兼容寫法</title>
 7     </head>
 8 
 9     <body>
10         <div id="parent">
11             <div id="child">點擊我</div>
12         </div>
13         <a href="http://www.baidu.com" id="a">跳轉鏈接</a>
14         <script type="text/javascript">
15             //Event addEventListener chrome firefox  IE9  event.target   preventDefault    stopPropagation
16             //Event attachEvent  IE8系列的     event.srcElement     returnValue    cancelBubble 
17             var EventUtil = {
18                 addHandler: function(element, type, handler) {
19                     //綁定事件
20                     //Chrome Firefox IE9等     addEventListener 
21                     //IE8及IE8以下的瀏覽器     attachEvent 
22                     if(element.addEventListener) {
23                         element.addEventListener(type, handler, false);
24                     } else if(element.attachEvent) {
25                         element.attachEvent("on" + type, handler);
26                     } else {
27                         element["on" + type] = handler
28                     }
29                 },
30                 removeHandler: function(element, type, handler) {
31                     //移除事件
32                     //Chrome Firefox IE9等      
33                     //IE8及IE8以下的瀏覽器     
34                     if(element.removeEventListener) {
35                         element.removeEventListener(type, handler, false);
36                     } else if(element.detachEvent) {
37                         element.detachEvent("on" + type, handler);
38                     } else {
39                         element["on" + type] = handler
40                     }
41                 },
42                 getTarget: function(event) {
43                     return event.target || event.srcElement;
44                 },
45                 preventDefault: function(event) {
46                     if(event.preventDefault) {
47                         event.preventDefault();
48                     } else {
49                         event.returnValue = false;
50                     }
51                 },
52                 stopPropagation: function(event) {
53                     if(event.stopPropagation) {
54                         event.stopPropagation()
55                     } else {
56                         event.cancelBubble = true;
57                     }
58                 }
59             }
60             
61             var parent = document.getElementById("parent");
62             EventUtil.addHandler(parent, "click", function(event) {
63                 alert("parent被觸發了")    
64             })
65             
66             var child = document.getElementById("child");
67             EventUtil.addHandler(child, "click", function(event) {
68                 //alert(111) 
69                 alert("child被觸發了")    
70                 var target = EventUtil.getTarget(event);
71                 console.log(target);
72                 //阻止事件冒泡
73                 EventUtil.stopPropagation(event)
74             })
75             var a = document.getElementById("a");
76             EventUtil.addHandler(a, "click", function(event) {
77                 EventUtil.preventDefault(event);    
78             })
79         </script>
80     </body>
81 
82 </html>

常用事件類型

UI事件
1.load 
當頁面完全加載后在window上觸發,也可以應用在image標簽上,圖片加載完畢后彈框,可用於圖片預加載,js動態加載,動態加載css EventUtil.addHandler(window,"load",function(e){ alert("loaded"); }) //img標簽加載完畢 var image = document.getElementById("img"); EventUtil.addHandler(image, "load", function(e) { alert("圖片加載完畢 "); }) image.src = "1.png"; 圖片預加載 var image = new Image();//將圖片存在了內存中 緩存在內存空間上 EventUtil.addHandler(image,"load",function(event){ alert("Image loaded!"); }); image.src = "smile.gif"; // js動態加載完畢 var script = document.createElement("script"); EventUtil.addHandler(script, "load", function(event){ alert("js Loaded"); }); script.src = "jquery.js"; document.body.appendChild(script); // css動態加載完畢 var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; EventUtil.addHandler(link, "load", function(event){ alert("css Loaded"); }); link.href = "example.css"; document.getElementsByTagName("head")[0].appendChild(link); 2.unload事件
用戶從一個頁面切換到另一個頁面 3.resize
窗口大小發生變化時觸發,重復執行,損耗性能 EventUtil.addHandler(window, "resize", function(event){ alert("Resized"); }); 4.scroll事件
主要針對新舊瀏覽器,滾動輪上下滾動觸發 5.焦點事件 blur 元素失去焦點的時候觸發 focus 元素獲取焦點的時候觸發,不支持冒泡 focusin 同focus一樣 元素獲取焦點的時候觸發,支持事件瀏覽器是IE5.5+,Safari5.1+,chrome等 focuout 同blur一樣,支持事件瀏覽器是IE5.5+,Safari5.1+,chrome等

最新的瀏覽器可能也會生效

6.鼠標事件
click
dblclick 雙擊事件
mousedown 鼠標按下時候觸發的事件
mouseup 鼠標松開
mousedown+mouseup=click事件
mousemove鼠標在對象上移動,重復觸發,注意代碼性能優化。
mouseout鼠標離開元素時觸發(離開目標對象或子元素都觸發,范圍比較廣)
mouseover鼠標進入元素時觸發。(進入目標對象或子元素都觸發,范圍比較廣)
mouseenter鼠標進入目標元素。(只能進入 目標元素 觸發,如其還有子元素不能觸發。)
mouseleave鼠標離開目標對象。(只能離開 目標元素 觸發)

event.button
//高級瀏覽器:
event.button ==0鼠標左鍵 event.button==1鼠標中鍵 event.button==2鼠標右鍵 //IE8派系 // event.button == 0 沒有按下按鈕 //event.button == 1 按下主鼠標按鈕 //event.button == 2 按下次鼠標按鈕 //event.button == 3 按下同時按下主、次鼠標按鈕 //event.button == 4 按下中間鼠標按鈕

7 鍵盤事件 

event.shiftKey表示當我鼠標點下去時同時按下鍵盤的shift鍵
 1 var div = document.getElementById("myDiv"); EventUtil.addHandler(div, "clcik", function(event) {
 2 var keys = new Array();
 3 if(event.shiftKey) {
 4 keys.push("shift");
 5 }
 6 if(event.ctrlKey) {
 7 keys.push("ctrl");
 8 }
 9 if(event.altKey) {
10 keys.push("alt");
11 }
12 if(event.metaKey) {
13 keys.push("meta");
14 }
15 console.log("keys:" + keys.join(","))
16 ; });
1.keydown 返回鍵碼,任意鍵觸發
EventUtil.addHandler(myText,"keydown",function(event){
console.log(event.keyCode);
})
2.keyup 釋放某鍵的時候觸發,支持keyCode
3.keypress 按下字符鍵,更適用於使用 charCode(字符碼,ASCII碼),而不是keyCode。
對於keycode的支持有限制,有的瀏覽器支持,有的不支持

理解:

①  keypress事件中keyCode是不穩定的。

舉個例子:

http://img1.sycdn.imooc.com/climg/5d5538ef0001c71309140497.jpg

打印結果顯示s的鍵碼值是83,
http://img1.sycdn.imooc.com/climg/5d5538b00001c26f09490307.jpg

將keyCode放到keypress中;

http://img1.sycdn.imooc.com/climg/5d55396c0001a07411030556.jpg

打印結果顯示s的鍵碼是115:

http://img1.sycdn.imooc.com/climg/5d5539a3000153f906690367.jpg

所以說:keypress事件中keyCode是不穩定的。

②  這個兼容性的寫法只是適用於keypress這個事件中哦,在keypress事件中如果瀏覽器支持charcode就返回charcode,如果瀏覽器不支持就返回keyCode。

http://img1.sycdn.imooc.com/climg/5d55342000012eff07680211.jpg

4.textInput
輸入什么字符就會打印什么
EventUtil.addHandler(myText, "textInput", function(event) {
console.log(event.data);
})

5.DOMNodeRemoved document中任意元素被刪除就會觸發
EventUtil.addHandler(document, "DOMNodeRemoved", function(event) {
console.log(111111);
})

6. DOMSubtreeModified document結構中發生任何變化都會觸發

EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
console.log(111111);
})
同樣也可以綁定除document外的其他元素。
7.DOMNodeRemovedFromDocument 從文檔中移除之前被觸發
8.DOMNodeInserted document中任意元素被添加就會觸發
9.DOMNodeInsertedIntoDocument 從文檔中添加之前被觸發

H5新增事件
10.DOMContentLoaded 在DOM樹結構創建好之后就會觸發,不理會圖像、javascript文件、css文件或其他資源是否已經下載,速度比load事件快
11.readstatechange 支持IE、firfox、opera,提供文檔或者元素加載過程,但是與load事件一起使用時候很難預料,情緒化,限制IE.很難預料。不一定按順序,或每個步驟都執行。   ①document.readState == uninitialized 尚未初始化   ②loading 對象正在加載數據   ③interactive 可以操作對象,單還沒有完全加載
  ④對象已經加載完畢
12.hashchange 一定給window添加,,地址#后面的值變化,
EventUtil.addHandler(window, "hashchange", function(event) {
console.log(event.oldURL + ":"+event.newURL);
})

url地址#后的值發生變化時觸發。

8 移動端觸摸屏事件

touchstart手指觸摸屏幕觸發   三個屬性:     event.touches當前觸摸屏幕的觸摸點的數組,記錄觸摸點的信息有可能四個手指一起觸摸     event.changedTouches 一個數組,數組中只包含引起事件的觸摸點信, 如果四個手指可能移動了2個,這兩個移動的觸摸點信息。(移動的觸摸信息)     event.targetTouches一個數組,只包含放在元素上的觸摸點信息,如果四個手指有兩個在觸發元素button外,兩個在它上面,在上面的觸摸點信息。(在事件對象上的觸摸信息) touchmove手指移動划動觸發,重復觸發 touchend手指離開屏幕事件

 

小項目

實現:點擊某個按鈕,div的背景顏色變成相應的顏色。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>小項目</title>
 5     <style type="text/css">
 6         *{
 7             margin: 0;
 8             padding: 0;
 9             list-style: none;
10         }
11         #canvas{
12             height: 500px;
13         }
14         li{
15             float: left;
16             width: 100px;
17             height: 30px;
18             border-radius: 10px;
19             background: #333;
20             text-align: center;
21             line-height: 30px;
22             color:#fff;
23         }
24         ul li:nth-child(1){
25             background:red;
26         }
27         ul li:nth-child(2){
28             background:black;
29         }
30         ul li:nth-child(3){
31             background:blue;
32         }
33         ul li:nth-child(4){
34             background:yellow;
35         }
36         ul li:nth-child(5){
37             background:green;
38         }
39     </style>
40 </head>
41 <body>
42     <div id="canvas"></div>
43     <ul id="ul">
44         <li>紅色</li>
45         <li>黑色</li>
46         <li>藍色</li>
47         <li>黃色</li>
48         <li>綠色</li>
49     </ul>
50     <script type="text/javascript">
51         var ul = document.getElementById('ul');
52         var canvas = document.getElementById('canvas');
53         ul.addEventListener('click', function(e){//事件委托
54             var that = e.target;//事件源
55             console.log(e);
56             if(that.innerHTML == "紅色"){
57                 canvas.style.background = "red";
58             }else if(that.innerHTML == "黑色"){
59                 canvas.style.background = "black";
60             }else if(that.innerHTML == "藍色"){
61                 canvas.style.background = "blue";
62             }else if(that.innerHTML == "黃色"){
63                 canvas.style.background = "yellow";
64             }else{
65                 canvas.style.background = "green";
66             }
67         });
68     </script>
69 </body>
70 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM