React 事件

一：事件流

①onClick:冒泡型：下面示例输出顺序：child /parent /ancestor

②onClickCapture:捕获型 ：下面示例输出顺序：ancestor/parent/child 

const styles = { child: { width: "50px", height: "50px", backgroundColor: 'red' }, parent: { width: "100px", height: "100px", backgroundColor: 'black' }, ancestor: { width: "150px", height: "150px", backgroundColor: 'blue' }, }

//格式如下图

export default class extends React.Component {

    render() {

        return (

            <div style={styles.ancestor} onClick={()=>console.log('ancestor')}>

                <div style={styles.parent} onClick={()=>console.log('parent')}>

                    <div style={styles.child} onClick={()=>console.log('child')}>

                    </div>

                </div>

            </div>

        )

    }

} //

onClickCapture