React 事件和 Dom 事件

注意：Chrome 中打印的對象展開的時候顯示的是當前對象的值，可能已經不是打印的時候的值了，因此須要經過在打印的地方打斷點的形式來查看準確的值。或者直接經過打斷點查看。

React 事件和 dom 事件

二者很像，只是有一些語法上的不同。

1. 事件名 jsx 中採用駝峯命名。
2. 參數是一個事件處理函數

原生的 dom 事件

click 事件和 href 的優先級：

click >>> href

第一種：Dom 元素中直接綁定

1. 直接在 html 中寫爲字符串

若是在後面寫 return false 能夠阻止默認事件。注意只能是字符串形式的 js 代碼，方法調用不行。

<span onclick="console.log('我被點擊了！！！')">Click me</span>
複製代碼

2. 將 js 代碼放到 js 函數中

<span onclick="handle()">Click me</span>
    function handle() {
        console.log('我被點擊了！！！); } 複製代碼

第二種：在 JavaScript 代碼中綁定

1. DOM0 的寫法：直接在 dom 對象上註冊事件名稱

此時返回 false 能夠阻止默認事件。

elementObject.onclick = function(){
        // 事件處理代碼
    }
複製代碼

2. Dom 2 的寫法：

   1. DOM2 支持同一dom元素註冊多個同種事件。
   2. DOM2 新增了捕獲和冒泡的概念。
   3. DOM2 事件經過 addEventListener 和 removeEventListener 管理

ele.addEventListener(‘click’, handle, false);
複製代碼

事件對象

不管在DOM0仍是DOM2仍是DOM3中都會在事件函數中傳入事件對象;

經常使用屬性：

currentTarget ： 當前時間程序正在處理的元素, 和this同樣的;
    target || srcElement： 事件的目標
    view ： 與元素關聯的window， 咱們可能跨iframe；
    eventPhase： 若是值爲1表示處於捕獲階段， 值爲2表示處於目標階段，值爲三表示在冒泡階段
    preventDefault() 取消默認事件；
    stopPropagation() 取消冒泡或者捕獲；
    stopImmediatePropagation 阻止綁定在事件觸發元素其餘同類事件的callback的運行
    
    trusted： 爲ture是瀏覽器生成的，爲false是開發人員建立的（DOM3）
複製代碼

注意誤區：

1. 在同一個對象上註冊事件，並不必定按照註冊順序執行

事件目的地節點既綁定了冒泡事件也綁定了捕獲事件，若是是同一類型則按照代碼執行順序執行

2. event.stopPropagation(); 就是阻止事件的冒泡？

除了阻止事件的冒泡，還阻止事件的繼續捕獲，簡而言之就是阻止事件的進一步傳播。

React 事件

接口和原來的 dom 事件一致。綁定處理函數分兩種狀況：

包裝了瀏覽器的原生的事件，而且是跨瀏覽器的。

1. 不傳參數

<div className="box1" onClick={this.handleClickOne}>
複製代碼

2. 傳遞參數有兩種寫法：

1. 箭頭函數：<div className="box2" onClick={e => this.handleClickTwo(e)}
    2. bind 方法：<div className="box2" onClick={this.handleClickTwo.bind(this, e, others)}
複製代碼

事件重用

Event Pooling：事件池

react 中的事件會被重用，每一次事件對應的回調函數執行後事件上的全部屬性都會失效。

好比經過 setTimeout 異步方式訪問事件會報錯。

此時的解決方法是調用 persist() 方法移出事件池從而保留事件對象。

事件處理函數的執行時機

事件處理函數都是在冒泡階段執行，若是要讓事件處理函數在捕獲階段執行，事件名後面加 Capture 就行。

onClick  ==> onClickCapture 
複製代碼

React 中阻止事件冒泡的三種方式

合成事件中的 currentTarget 指向當前 dom 元素，可是 nativeEvent 的 currentTarget 指向 document

1. 阻止合成事件間的冒泡，用e.stopPropagation();
2. 阻止合成事件與最外層 document 上的事件間的冒泡

nativeEvent 的 currentTarget 指向 document
    e.nativeEvent.stopImmediatePropagation();
複製代碼

3. 阻止合成事件與 除最外層document上的原生事件 上的冒泡，經過判斷 e.target 來避免

document.body.addEventListener('click',e=>{
        // 經過e.target判斷阻止冒泡
        if(e.target&&e.target.matches('a')){
            return;
        }
        console.log('body');
    })
複製代碼

自定義 dom 事件

使用到的事件對象有 Event 和 CustomEvent

自定義事件和觸發事件：

// 經過 Event 建立新的事件
	const event = new Event('newEvent');

	box1.addEventListener('newEvent', function() {
		console.log('newEvent 事件被觸發了！！！！')
	});

	setTimeout(function() {
	    // 經過調用元素的 dispatchEvent 方法在該元素上面觸發該事件
 		box1.dispatchEvent(event);
	}, 2000);
複製代碼

自定義事件的時候，爲事件對象添加數據：

const customEvent = new CustomEvent('customEvent', { 'data': '2121212' });
	box1.addEventListener('customEvent', function(e) {
		console.log('customEvent 事件被觸發了！！！！', e, customEvent)
	});
	setTimeout(function() {
		box1.dispatchEvent(customEvent);
	}, 2000);
複製代碼

代碼控制觸發內置事件

box1.addEventListener('click', function(e) {
		console.log('代碼控制觸發內置事件', e)
	});

	setTimeout(function() {
		const click = new MouseEvent('click')
		box1.dispatchEvent(click)
	}, 2000)
複製代碼

其中 click 事件還能夠經過 HTMLElement 對象上面的 的 click() 方法模擬。

其中 querySelector 和 querySelectorAll 是 Element 上面的方法。