React之事件处理 - ellaha

一，总结

1，React通过onXxx属性指定事件处理函数

React通过自定义（合成）事件，而不是使用原生DOM事件，目的为了更好的兼容性，适用于IE9及以上
React中的事件是通过事件委托方式（冒泡）处理的（委托给组件最外层的元素）

2，通过event.target得到发生事件的DOM元素对象

二，show1函数中接到的event是React封装的事件对象，这个event拥有和原生event同样的属性。

但原生的事件对象效率低，把所有属性都挂载到对象上，封装好的event对象是属性都准备好了，但没有值。

<body>
    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                    <div onClick={this.show}>
                        <button onClick={this.show1}>按钮1</button>
                        <button onClick={this.show2}>按钮2</button>
                        <div onClick={this.show3}>xxx</div>
                    </div>
                )
            }
            show(){        
                console.log('触发外层点击事件')
            }
            show1(event){
                // 阻止事件冒泡
                event.stopPropagation()
                // 接到的event是React封装的事件对象，这个event拥有和原生event同样的属性
                console.log('按钮1', event)
            }
            show2(){
                console.log('按钮2')
            }
            show3(){
                console.log('按钮3')
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

三，js中的自定义事件

1，js中原生事件

js自动将事件对象传入，根据情况用的话，在函数的形参中接下event，event就是发生事件的事件对象

<body>
    <button id="btn">点击</button>
    <script>
        const btn = document.getElementById('btn')
        btn.addEventListener('click', (event)=>{
            console.log('你点我了')
　　　　　　　console.log(event)
        })
    </script>
</body>

2，js中自定义事件

<body>
    <button id="btn2">自定义haha点击事件</button>
    <script>
        const btn2 = document.getElementById('btn2')
        // 1，创建haha事件
        const haha = new Event('haha')
        // 2，给btn2绑定haha事件
        btn2.addEventListener('haha', ()=>{
            console.log('触发haha事件')
        })
        // 3，触发haha事件
        btn2.dispatchEvent(haha)
    </script>
</body>

posted on 2022-01-16 16:02 ellaha 阅读(238) 评论(0) 收藏举报

刷新页面返回顶部