事件处理函数绑定

DOM事件处理 addEventListener or onclick = function(){} 纯小写
React元素也采用了类似DOM0标准中的事件属性定义的方法小驼峰

JSX <button onClick={ this.doSth }></button>
直接创建React元素

React.createElement('button',{onClick: { this.doSth }},'按钮'
)

阻止a标签默认行为

a标签锚点

class MyAlink extends React.Component {handleClick() {console.log('点击')}render() {return <a href="#" onClick={this.handleClick}>a链接</a>}
}
ReactDOM.render(<MyAlink />,document.getElementById('app')
)

使用伪协议在React中会报warning

<a href="javascript:;" onClick={this.handleClick}>a链接</a>

阻止默认事件 e（React事件对象，并非js原生的e）

class MyAlink extends React.Component {handleClick(e) {e.preventDefault()console.log('点击', e)}render() {return <a href="#" onClick={this.handleClick}>a链接</a>}
}

事件对象

SyntheticBaseEvent 合成基础事件对象
这个SBE是遵守W3C事件对象的规范的，不存在任何的浏览器兼容性问题

React为什么要将事件处理直接绑定在元素上

React认为事件处理和视图有直接关系，写在一起可以更直观地表述视图与逻辑的关系，便于维护

this指向

ES6 class模块默认不对事件处理函数进行this的再绑定

class MyButton extends React.Component {handleClick() {console.log('this', this)// this默认undefined}render() {return <button onClick={this.handleClick}>按钮</button>}
}
ReactDOM.render(<MyButton />,document.getElementById('app')
)

function outerClick() {console.log('outher-this', this)// 依然是undefined
}
class MyButton extends React.Component {render() {return <button onClick={outerClick}>按钮</button>}
}
ReactDOM.render(<MyButton />,document.getElementById('app')
)

DOM0事件

// this指向button
<button onclick="console.log(this)">123</button>

解决this指向建议使用134

在构造器中bind this 隐式传入e
在视图中bind this 隐式传入e
回调 + 箭头函数 + 方法执行（render函数每次执行时都会创建新的回调）
注意：给子组件的属性传递函数时，由于每次都创建一个回调，子组件每次都接收一个新的函数，可能触发子组件的render 显式传入e
class field写法：class内部的箭头函数

事件对象都在最后一个参数

// 在构造器中bind this
class MyButton extends React.Component {constructor(props) {super(props)this.handleClick = this.handleClick.bind(this)}handleClick() {console.log('this', this)// this指向类MyButton}render() {return <button onClick={this.handleClick}>按钮</button>}
}

// 在视图中bind this
class MyButton extends React.Component {constructor(props) {super(props)}handleClick(e) {// bind方法要使用e，无须传入，是隐式传入的 console.log('this', this, e)// this指向类MyButton}render() {return <button onClick={this.handleClick.bind(this)}>按钮</button>}
}

// 回调 + 箭头函数 + 方法执行
class MyButton extends React.Component {constructor(props) {super(props)}handleClick(e) {// 要使用e则需要传入econsole.log('this', this)// this指向类MyButton}render() {return <button onClick={(e) => this.handleClick(e)}>按钮</button>}
}

用在子组件上时，父组件每次render都创建一个新的回调，fn是响应的，会触发子组件的render

    render() {return (<div><button onClick={() => this.handleClick()}>按钮</button><Title fn={() => this.doSth} /></div>)}

// class内部的箭头函数
class MyButton extends React.Component {constructor(props) {super(props)}// 实验性写法outerClick = () => {console.log('outher-this', this)// 箭头函数的this是稳定的 指向button}render() {return (<div><button onClick={this.outerClick}>按钮</button></div>)}
}

06 事件处理函数绑定与事件对象相关推荐

【原创翻译】深入理解javascript事件处理函数绑定三部曲（一）——早期的事件处理函数...
原文并非是是三部曲,而是一系列讲解javascript基础的文章.我是把其中三篇抽出来,作为一个整体,对理解事件绑定模型相当有帮助,原文在这里http://www.quirksmode.org/js/ ...
Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
如何把多个js函数绑定到事件上面
为什么需要绑定事件和多个事件在给网页加一些特效时,经常要加入"onload"事件,即在网页加载完后执行某事件,例如:<body onload="alert('欢迎 ...
Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件
事件处理函数绑定事件 = 绑定事件的处理函数(事件本身是存在的,绑定的是相应的反馈) 事件 + 事件的反馈 = 前端交互 (前端核心) 绑定事件的方式 1. 句柄绑定默认(只能)是事件冒泡这种事件 ...
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

06 事件处理函数绑定与事件对象

事件处理函数绑定

阻止a标签默认行为

事件对象

React为什么要将事件处理直接绑定在元素上

this指向

解决this指向建议使用134

06 事件处理函数绑定与事件对象相关推荐

最新文章

热门文章

06 事件处理函数绑定与事件对象

事件处理函数绑定

阻止a标签默认行为

事件对象

React为什么要将事件处理直接绑定在元素上

this指向

解决this指向 建议使用134

06 事件处理函数绑定与事件对象相关推荐

最新文章

热门文章

解决this指向建议使用134