Capturing vs Bubbling
5992 ワード
import React from 'react'
export default function EventComponent() {
const handleButtonClick = () => {
console.log('handleButtonClick');
}
const handleClickCapture = () => {
console.log('handleClickCapture');
}
const handleClickCapture2 = () => {
console.log('handleClickCapture2');
}
const handleClickBubble = () => {
console.log('handleClickBubble');
}
const handleMouseLeave = () => {
console.log('handleMouseLeave');
}
//React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화한다.
//다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출된다.
//capturing -> capturing ->capturing < bubbleing
//자식보다 부모가 먼저 click을 인지하고 싶을때 onClickCapture를 사용하자.
//합성 이벤트 -> 인터페이스는 같지만 직접 대응되지 않는다. systhentic event객체를 받고 그안에 native이벤트가 있으니깐 찾아서 써라
//Bubble(자식 ->부모) /Capture(부모 ->자식) -> Capture > target >Bubble
//return false(원래는 default이벤트를 안동작하게 할수있는데 react에서는 동작하지 않는다.) -> e.preventDefault()를 해줘야함.
return (
<div onClickCapture={handleClickCapture}>
<div onClickCapture={handleClickCapture2} onClick={handleClickBubble} >
<button onClick={handleButtonClick} onMouseLeave={handleMouseLeave}>button</button>
</div>
</div>
)
}
Reference
この問題について(Capturing vs Bubbling), 我々は、より多くの情報をここで見つけました https://velog.io/@sangwookp9591/Capturing-vs-Bubblingテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol