React-----学习笔记-----事件监听(六)

• React.js里监听事件，只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性：

class Title extends Component {
    handleClickOnTitle = () => {
        console.log('click on title')
    }
    render () {
        return (
            <h1 onClick={this.handleClickOnTitle}>my-react</h1>
        )
    }
}

• React.js中 不需要手动调用浏览器原生的addEventListener进行事件监听,自己封装好了一系列的 on*的属性，当你需要为某个元素监听某个事件的时候，只需要加上 on* ,而且你不需要考虑不同浏览器兼容性的问题
• 没有经过特殊处理的话，这些on*的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上

event对象

• React.js 中的event 对象不是浏览器提供的，是它自己内部所构建的，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致,它具有类似于event.stopPropagation、event.preventDefault这种常用的方法

事件中的this

• React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.handleClickOnTitle），而是直接通过函数调用 （handleClickOnTitle），所以事件监听函数内并不能通过 this 获取到实例。
• 在事件函数当中使用当前的实例，需要手动地将实例方法 bind 到当前实例上再传入给 React.js,或者将事件函数改写为箭头函数形式