react 合成事件和原生事件混用
2020-05-14 本文已影响0人
叫我苏轼好吗
<!--suppress ALL -->
<html>
<head>
<meta charset="utf-8">
<title>react的合成事件</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script type="text/babel">
class MessageBox extends React.Component {
componentDidMount() {
// documemt层的原生事件
// document.addEventListener('click', (e) => {
// alert('document 原生事件')
// e.stopImmediatePropagation()
// })
document.addEventListener('click', () => {
alert('document 原生事件')
})
document.body.addEventListener('click', () => {
alert('body 原生事件')
})
document.getElementById('parent').addEventListener('click', (e) => {
alert('parent 原生事件')
}, false)
document.getElementById('child').addEventListener('click', (e) => {
alert('child 原生事件')
// e.stopPropagation() //原生事件可以阻止合成事件
}, false)
}
parent = (e) => {
alert('父组件')
}
child = (e) => {
alert('子组件')
e.preventDefault()
// 1：无法阻止 document上面的原生事件，2.可以阻止合成事件的冒泡
e.stopImmediatePropagation()
// e.nativeEvent.stopImmediatePropagation()
// 1.阻止合成事件往最外层document上的事件冒泡
}
render() {
return (
<div id='parent' onClick={this.parent}>
父组件
<div id='child' onClick={this.child}>子组件</div>
</div>
);
}
}
// 渲染
ReactDOM.render(<MessageBox />, document.getElementById('app'), function () {
// console.log('渲染完成啦！！');
});
</script>
</body>
</html>
<!-- 合成事件 react
1:最先执行原生方法 然后是合成事件
2:如果点击子节点,父类上绑定了原生事件，会先执行父类的原生事件，然后再执行子类的合成事件
3: 原生事件可以阻止合成事件, 合成事件无法阻止冒泡事件, 但是
1- e.nativeEvent.stopImmediatePropagation() 可以阻止document上的事件冒泡
2- e.stopImmediatePropagation() 可以阻止连续相同的事件绑定
-->
