React的事件

React事件系统

事件处理程序通过 合成事件(SyntheticEvent)的实例传递,SyntheticEvent是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有 stopPropagation()、preventDefault() 接口,而且这些接口跨浏览器兼容。

  1. 原生事件
document.querySelector('xxx').addEventListener('click', () => {
    console.log(event);
})
// 输出1:windowEvent ====>  chorme
// 输出2:   undefined  ====>  Firefox

可以看出event参数不加的话,有的浏览器会兼容,像火狐就不兼容,因此需要在事件handler中写

document.querySelector('xxx').addEventListener('click', event => {
    event = event || window.event;
    event.stopPropagation();
    event.preventDefault();
})

如果不写event而是在函数中传了某种参数,如果是chorme还好,会给你补充一个window.event,某些不支持的浏览器就会把你的参数当event了,当然会报错了;

  1. React的事件
  • 0.12版本之前可以使用在event handler(onclick = xxx.bind(this))函数中使用return false来代替stopPropagation 和 preventDefault, 目前已经被移除,请不要使用。
  • 使用 合成事件(SyntheticEvent)(类似jquery的$event)是对各种浏览器兼容的event相关封装,目前支持以下属性
    • boolean bubbles
    • boolean cancelable
    • DOMEventTarget currentTarget
    • boolean defaultPrevented
    • Number eventPhase
    • boolean isTrusted
    • DOMEvent nativeEvent
    • void preventDefault()
    • void stopPropagation()
    • DOMEventTarget target
    • Date timeStamp
    • String type
  • 默认所有事件都在冒泡阶段被触发,如果想使用事件捕获有两种方法
    1. 使用原生addEventListener('click', handler, true)第三个参数给true
    2. 使用onClickCapture = xxx.bind(this);
  • 传统开发方式在元素较多时建议使用事件委托 / 事件代理方式在父级进行代理事件,但React独特的事件处理系统会先把所有事件处理函数都收集到父级,再根据组件进行派发,因此无需特意写事件代理函数,即使一个列表有一万个组件元构成,onClick函数也可以写在组件元中。
  • 事件池
    event在React是一个虚拟对象,在事件被收集后到父级元素中时,虚拟对象会被合并,在该事件处理的回调后属性就没用了,如果用setState这种异步方法调用的话就没有用了。
function onClick(event) {
  console.log(event); // =>无效的对象
  console.log(event.type); // => "click"
  var eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 将只包含空值.
  this.setState({eventType: event.type}); // 您依然可以导出事件属性
}

如果您想以一个异步的方式来访问事件属性,您应该对事件调用event.persist()。这将从事件池中取出合成的事件,并允许该事件的引用,使用户的代码被保留。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,074评论 1 10
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,567评论 1 19
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 打断喂食的鹰 鹰当然不开心 但鹰不计较 不代表世界太平 隐忍是个一时词汇 忍耐也是过渡的语气 包容是未上高楼的境界...
    翔于阅读 210评论 0 1
  • 待我长发及腰,将军归来可好?此身君子意逍遥,怎料山河萧萧。天光乍破遇,暮雪白头老。 寒剑默听奔雷,长枪独守空壕。醉...
    花儿笑微微阅读 191评论 0 1