jQuery事件相關
阿新 • • 發佈：2018-07-09
value 支持 html中 body default clas related src prevent 
一， 事件的概念
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。
1， 事件流
事件流描述的是從頁面中接收事件的順序
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
① 事件捕獲階段；
② 處於目標階段；
③ 事件冒泡階段
js中還有另外一種綁定事件的方式：
1、addEventListener
addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
2、document、documentElement和document.body三者之間的關系：
document代表的是整個html頁面；
document.documentElement代表的是<html>標簽；
document.body代表的是<body>標簽；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <script> window.onloadjs中另外綁定事件的方式= function(){ var oBtn = document.getElementById(‘btn‘); oBtn.addEventListener(‘click‘,function(){ console.log(‘btn處於事件捕獲階段‘); }, true); oBtn.addEventListener(‘click‘,function(){ console.log(‘btn處於事件冒泡階段‘); }, false); }; </script> </head> <body> <a href="javascript:;" id="btn">按鈕</a> </body> </html>
二，jQuery中的常用事件：
三，事件對象 event
- 在觸發的事件的函數裏面我們會接收到一個event對象,通過該對象我們需要的一些參數,比如說我們需要知道此事件作用到誰身上了,就可以通過event的屬性
target來獲取到(IE暫且不談),或者想阻止瀏覽器的默認行為可以通過方法preventDefault()來進行阻止.以下是event對象的一些屬性和方法
| 屬性 | 描述 |
|---|---|
| altKey | 返回當事件被觸發時，”ALT” 是否被按下。 |
| button | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 |
| clientX | 返回當事件被觸發時，鼠標指針的水平坐標。 |
| clientY | 返回當事件被觸發時，鼠標指針的垂直坐標。 |
| ctrlKey | 返回當事件被觸發時，”CTRL” 鍵是否被按下。 |
| metaKey | 返回當事件被觸發時，”meta” 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標節點相關的節點。 |
| screenX | 返回當某個事件被觸發時，鼠標指針的水平坐標。 |
| screenY | 返回當某個事件被觸發時，鼠標指針的垂直坐標。 |
| shiftKey | 返回當事件被觸發時，”SHIFT” 鍵是否被按下 |
IE屬性(除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性)
| 屬性 | 描述 |
|---|---|
cancelBubble |
如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。 |
| fromElement | 對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。 |
| keyCode | 對於 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup |
| offsetX,offsetY | 發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。 |
returnValue |
如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 |
srcElement |
對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。 |
| toElement | 對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。 |
| x,y | 事件發生的位置的 x 坐標和 y 坐標，它們相對於用CSS動態定位的最內層包容元素。 |
- 標準 Event 屬性 下面列出了 2 級 DOM 事件標準定義的屬性。
| 屬性和方法 | 描述 |
|---|---|
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 |
cancelable |
返回布爾值，指示事件是否可用可取消的默認動作。 |
currentTarget |
返回其事件監聽器觸發該事件的元素。 |
| eventPhase | 返回事件傳播的當前階段。 |
target |
返回觸發此事件的元素（事件的目標節點）。 |
| timeStamp | 返回事件生成的日期和時間。 |
type |
返回當前 Event 對象表示的事件的名稱。 |
| initEvent() | 初始化新創建的 Event 對象的屬性。 |
preventDefault() |
通知瀏覽器不要執行與事件關聯的默認動作。 |
stopPropagation() |
不再派發事件。 |
Event對象的一些兼容性寫法
- 獲得event對象兼容性寫法
event || (event = window.event); - 獲得target兼容型寫法
event.target||event.srcElement - 阻止瀏覽器默認行為兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false); - 阻止冒泡寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
jQuery事件相關