lovecoding
/
VIP32


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        // 事件绑定
        // 1.DOM中 事件绑定： onClick onChange onBlur onSubmit.....
        // 2.事件流中的事件绑定： addEventListener('click/mousedown...',function(){},true(鼠键捕获)/false（事件冒泡）) removeEventListener.....
        // jsx语法 在 script标签书写 不需要获取元素了
        function App() {
            function handleClick() {
                // alert("点击触发了")
                console.log("触发")
            }
            // 调用 名字（） => 立即执行
            return (
                <div>
                    {/*点击事件绑定*/}
                    <p onClick={handleClick}>点击</p>
                    {/*不提倡在标签内写方法 页面排版错乱*/}
                    <input type="text" onChange={function(){
                        alert("改变了")
                    }} />
                    <input type="text" onBlur={() => {
                        console.log("失焦了")
                    }} />
                    <input type="submit" onClick={handleClick()} />
                </div>
            )
        }
        root.render(<App/>)
    </script>
</body>
</html>