React 事件和 Dom 事件

3,248 阅读4分钟

注意:Chrome 中打印的对象展开的时候显示的是当前对象的值,可能已经不是打印的时候的值了,所以需要通过在打印的地方打断点的形式来查看准确的值。或者直接通过打断点查看。

React 事件和 dom 事件

两者很像,只是有一些语法上的不一样。

  1. 事件名 jsx 中采用驼峰命名。
  2. 参数是一个事件处理函数

原生的 dom 事件

click 事件和 href 的优先级:

click >>> href

第一种:Dom 元素中直接绑定

  1. 直接在 html 中写为字符串

如果在后面写 return false 可以阻止默认事件。注意只能是字符串形式的 js 代码,方法调用不行。

<span onclick="console.log('我被点击了!!!')">Click me</span>
  1. 将 js 代码放到 js 函数中
    <span onclick="handle()">Click me</span>
    function handle() {
        console.log('我被点击了!!!);
    }

第二种:在 JavaScript 代码中绑定

  1. DOM0 的写法:直接在 dom 对象上注册事件名称

此时返回 false 可以阻止默认事件。

    elementObject.onclick = function(){
        // 事件处理代码
    }
  1. 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. 在同一个对象上注册事件,并不一定按照注册顺序执行

事件目的地节点既绑定了冒泡事件也绑定了捕获事件,如果是同一类型则按照代码执行顺序执行

  1. event.stopPropagation(); 就是阻止事件的冒泡?

除了阻止事件的冒泡,还阻止事件的继续捕获,简而言之就是阻止事件的进一步传播。

React 事件

接口和原来的 dom 事件一致。绑定处理函数分两种情况:

包装了浏览器的原生的事件,并且是跨浏览器的。

  1. 不传参数
    <div className="box1" onClick={this.handleClickOne}>
  1. 传递参数有两种写法:
    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 元素,但是 nativeEventcurrentTarget 指向 document

  1. 阻止合成事件间的冒泡,用e.stopPropagation();
  2. 阻止合成事件与最外层 document 上的事件间的冒泡
    nativeEvent 的 currentTarget 指向 document
    e.nativeEvent.stopImmediatePropagation();
  1. 阻止合成事件与 除最外层document上的原生事件 上的冒泡,通过判断 e.target 来避免
    document.body.addEventListener('click',e=>{
        // 通过e.target判断阻止冒泡
        if(e.target&&e.target.matches('a')){
            return;
        }
        console.log('body');
    })

自定义 dom 事件

使用到的事件对象有 EventCustomEvent

自定义事件和触发事件:

    // 通过 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 和 querySelectorAllElement 上面的方法。