emit
emit 메서드를 사용하면 이벤트를 능동적으로 트리거할 수 있으며, 트리거된 이벤트에는 버블링 메커니즘이 있습니다. 버블링 메커니즘은 이벤트가 내부 요소에서 외부 요소로 전파되어 안쪽에서 바깥쪽 순으로 이벤트가 발생함을 의미합니다.
다음은 emit 메소드를 사용하여 사용자 정의 이벤트를 발생시키고, 버블링 메커니즘을 활용하여 이벤트를 외부 요소로 전달하는 방법을 보여주는 예시입니다：
-
나는 타겟이다
-
-
이 예시에서 우리는 <ul> 요소와 <li> 요소에 각각 동일한 커스텀 이벤트 custom-event 핸들러를 등록했습니다. emit 메서드를 사용하여 이벤트를 트리거할 때, 이 이벤트는 <li> 요소에서 <ul> 요소로 버블링되어 두 개의 이벤트 핸들러를 트리거합니다.
사용자 정의 데이터
data 매개변수를 사용하면 이벤트 핸들러에 사용자 정의 데이터를 전달할 수 있습니다.
-
I am target
-
-
이 예제에서는 data 매개변수를 통해 이벤트 핸들러에 사용자 정의 데이터를 전달했습니다. 이벤트 핸들러는 event.data로 전달된 데이터를 가져올 수 있습니다.
버블링되지 않는 이벤트 트리거
이벤트 버블링을 원하지 않는다면 이벤트를 트리거할 때 bubbles: false 매개변수를 전달할 수 있습니다:
-
나는 타겟입니다
-
-
이 예제에서는 bubbles: false 매개변수를 사용하여 사용자 지정 이벤트를 트리거했습니다. 이 이벤트는 상위 요소로 버블링되지 않으므로 <li> 요소의 이벤트 핸들러만 트리거됩니다.
루트 노드 투과
기본적으로 이벤트는 사용자 정의 컴포넌트의 shadow DOM을 통과하지 않습니다. 그러나 composed: true를 설정함으로써 사용자 정의 이벤트가 루트 노드를 통과하여 루트 노트 외부의 요소를 트리거할 수 있습니다.
{{loggerText}}
이 예제에서는 사용자 정의 컴포넌트 composed-test를 생성했으며, 이는 쉐도우 DOM 내의 요소와 이벤트를 트리거하는 버튼을 포함합니다. 기본적으로 이벤트는 쉐도우 DOM을 통과하여 루트 노드로 도달하지 않습니다. 하지만 이벤트 트리거 시 composed: true 매개변수를 사용하여, 이벤트가 루트 노드까지 통과하도록 하여 루트 노드 외부의 요소를 트리거했습니다.