JavaScript 이벤트 bubbling_javascript 기술 소개 및 적용

1. 이벤트 버블링이란 무엇입니까?
객체에서 특정 유형의 이벤트(예: 클릭 onclick 이벤트)를 트리거합니다. 객체가 이 이벤트에 대한 핸들러를 정의하면 이 이벤트가 이를 호출합니다. 핸들러, 이 이벤트 핸들러가 정의되지 않았거나 이벤트가 true를 반환하면 이 이벤트는 처리될 때까지 이 객체의 상위 객체에 내부에서 외부로 전파됩니다(상위 객체의 모든 유사한 이벤트가 활성화됩니다). , 또는 문서 개체(일부 브라우저의 창)인 개체 계층의 최상위 수준에 도달합니다.

예: 지방 법원에 사건을 항소하고 싶은 경우 해당 사건을 처리할 지방 법원이 없는 경우 관련 지방 부서에서 상급 법원 등에서 계속 항소할 수 있도록 도와줄 것입니다. 최종적으로 사건을 처리하기 위해 중앙 법원에 갈 때까지 지방자치단체 수준에서 지방 수준까지.

2. 이벤트 버블링의 역할은 무엇인가요?
(1) 이벤트 버블링을 사용하면 여러 작업을 중앙에서 처리할 수 있습니다(이벤트 핸들러 추가를 방지하려면 상위 요소에 이벤트 핸들러를 추가하세요). 여러 하위 요소에 적용)을 사용하면 개체 레이어의 다양한 수준에서 이벤트를 캡처할 수도 있습니다.

[중앙화 처리 예시]

코드 복사 코드는 다음과 같습니다.

< ;div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

(2) 서로 다른 개체가 동일한 이벤트를 동시에 캡처하고 고유한 처리기를 호출하여 고유한 작업을 수행하도록 합니다. 마치 상사가 명령을 내리면 직원들은 각자 자기 일을 하러 갔다.

[같은 이벤트를 동시에 캡쳐하는 예]

코드 복사 코드는 다음과 같습니다.

;div onclick="inSideWork() " id="inSide" style="width:100px; height:100px; background:#CCC">

script type="text/javascript" >
function outSideWork()
{
alert('내 이름은 outSide입니다. 저는 일하고 있었습니다...'); >function inSideWork()
{
alert('내 이름은 inSide입니다. 저는 일하고 있었습니다...')
}

//다음 프로그램이 자동으로 클릭 이벤트를 활성화하기 때문입니다. , 일부 브라우저에서는 허용하지 않으므로 회색 상자를 클릭하고 여기에서 명령을 실행하십시오. 이렇게 하면 버블링으로 인해 큰 검은색 상자도 클릭 이벤트를 수신하고 자체 핸들러를 호출하게 됩니다. 내부에 더 많은 상자가 중첩되어 있는 경우에도 동일한 일이 발생합니다.

/*
함수 bossOrder()
{
document.getElmentById('inSide').click();
}
bossOrder(); /



3. 주의할 점
●이벤트를 캡쳐하는 방법에는 실제로 세 가지가 있는데, 이벤트 버블링은 그 중 하나일 뿐입니다. (1) IE 버블링 이벤트는 내부에서 외부로(내부→외부) 진행됩니다. (2) Netscape4.0은 외부에서 내부(외부→내부)로 이벤트를 캡처합니다. (3) DOM 이벤트 흐름, 먼저 외부에서 내부로, 그런 다음 내부에서 외부로 다시 원점(외부→내부→외부) 이벤트 캡처 방법(객체가 이벤트 처리를 두 번 트리거하는 것 같습니다. 효과가 이해가 안 되나요?

●모든 이벤트가 터질 수는 없습니다. 다음 이벤트는 버블링되지 않습니다: 흐림, 초점, 로드, 언로드.

●이벤트 캡처 방법은 브라우저마다 다르며, 동일한 브라우저라도 버전마다 다릅니다. 예를 들어 Netscape 4.0은 캡처 이벤트 솔루션을 사용하고 대부분의 다른 브라우저는 버블링 이벤트 솔루션을 지원합니다. 또한 DOM 이벤트 스트림은 텍스트 노드 이벤트 버블링도 지원합니다.

●최상위 레벨에 도달하기 위한 이벤트 캡처 대상도 브라우저나 브라우저 버전에 따라 다릅니다. IE6에서 HTML은 이벤트 버블링을 수신하고 대부분의 브라우저는 계속해서 창 객체, 즉 본문→문서→창에 버블링합니다.

● 버블링을 방지해도 개체의 기본 동작이 방지되지는 않습니다. 예를 들어 제출 버튼을 클릭하면 양식 데이터가 제출됩니다. 이 동작에서는 사용자 정의 프로그램을 작성할 필요가 없습니다.

4. 이벤트 발생 방지
일반적으로 우리는 모든 작업을 한 단계로 수행하여 이벤트 트리거의 소스를 명확히 하며 브라우저가 똑똑해지고 목적 없이 적절한 이벤트 처리를 찾는 것을 원하지 않습니다. 프로그램, 즉 가장 정확한 목표를 알고 있는 경우에는 이벤트 버블링이 필요하지 않습니다. 또한, 이벤트 버블링에 대한 이해를 통해 프로그램이 더 많은 추가 작업을 수행하므로 필연적으로 프로그램 오버헤드가 증가한다는 것을 알 수 있습니다. 또 다른 중요한 문제는 이벤트 버블링 처리가 활성화하고 싶지 않은 이벤트를 활성화하여 프로그램 혼란을 일으키고 심지어 디버깅을 불가능하게 만들 수도 있다는 점입니다. 이는 이벤트 버블링에 익숙하지 않은 프로그래머에게는 종종 까다로운 문제가 됩니다. 따라서 필요한 경우 이벤트가 발생하는 것을 방지해야 합니다.

[활성화를 원하지 않는 이벤트 활성화 예시]

코드 복사 코드는 다음과 같습니다. 다음:

< /div> 바이두 홈페이지를 열었는데, 회색박스를 클릭하면 두 개의 웹페이지가 동시에 열립니다. 실제로 이 문제는 실제 디자인에서는 거의 발생하지 않습니다. 페이지의 다른 DOM 깊이에 다른 버튼이나 링크를 배치하면 깊은 레이어에서 트리거되는 이벤트가 최상위 버튼에 영향을 미칠까요? 아니요. 버튼은 중첩 관계를 형성할 수 없기 때문입니다.
function openWin(url)
{
window.open(url);
}



다음은 제가 복사한 내용입니다. 인터넷 A 메소드. 이 메소드를 정확한 대상 객체 핸들러의 끝에 배치하십시오. 이 이벤트가 트리거되고 처리된 후에는 이벤트가 더 이상 버블링되지 않습니다.

[이벤트 버블링 방지 예시]

코드 복사

코드는 다음과 같습니다.

onclick=" showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC">

;script type ="text/javascript">

//이벤트 버블링을 방지한 후 회색 상자를 클릭하면 전체 프로세스에서 대화 상자가 한 번만 나타납니다. (기본값과의 비교에 유의하세요.) 상황)

function showMsg(obj,e)
{
alert(obj.id)
stopBubble(e)
}

//이벤트 버블링 기능 중지
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}