react事件

//总组件！！！！！！！，这里引入其他组件的
/*组件名应该和文件名一样 */
const App=()=>{




    const onClickHandler=(event)=>{
        event.preventDefault();//取消默认行为
        event.stopPropagation();//取消事件的冒泡传递
        alert("我是防止网站跳转的")
    };

    return <div 
    onClick={()=>{
        alert("我是父亲事件");
    }
    }
    style={{width:200,height:200,margin:"100px auto",background:"red"}}>
        {
            /**
             * 在react中，事件需要通过元素的属性来设置，
             * 和原生的js不同，react里面的事件需要使用驼峰命名法
             * 
             * 属性值不能直接执行代码，必须需要一个回调函数
             * onClick={()=>{alter(123)}}
             * 
             * 
             */
        }
        <button onClick={()=>{alert(123);}}>点我一下</button>
        <botton onClick={onClickHandler}>哈哈哈</botton>
        {
            /**
             * onClickHandler加不加括号？？？
             * 一般情况下是不能加的，加了括号就直接变成了创建的时候调用这个函数,
             * 相当于把这个函数的返回值设置给了这个东西
             * 
             * 不加括号就代表这个函数是事件的响应函数
             * 那么什么时候可以加括号了？？？？？？
             * 我们onClickHandler函数的返回值是一个函数的时候我们就可以加括号
             * 
             * 在react无法通过函数return false来取消默认行为，比如说网站的跳转
             * 那怎么取消默认行为:使用事件对象
             * react事件中同样会传递事件对象，可以在响应函数中定义参数来接收事件对象
             * react中的事件对象同样不是原生的事件对象，是经过react包装过后的事件对象
             * 由于对象进行过包装，所以使用过程中，我们无需再去考虑兼容性问题！！！！！！！！
             * 
             * 
             * 
             冒泡怎么解决呢？？什么是冒泡，就是点击子元素的时候，父元素也会触发！！！！！！时间的向上传播
             */
        }
        <a href="www.baidu.com" onClick={onClickHandler}>超链接</a>
    </div>
};  

//导出组件
export default App;