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 上面的方法。