자바스크립트 이벤트 버블링 적용 예시 분석_자바스크립트 스킬

그러나 오늘날 대규모 WebGame 프로젝트와 같은 일부 대규모 WEB 대화형 프로젝트에서는 JavaScript 이벤트 버블링의 영향에 주목할 가치가 있습니다. 이 문서에서는 간단한 예를 사용하여 JavaScript 이벤트 버블링 및 사용 주의 사항을 설명합니다.

JavaScript 이벤트 버블링에 대한 인상이 없다면 제가 이전에 작성한 블로그 "JavaScript 이벤트 버블 소개 및 적용"을 읽어 보는 것이 좋습니다. 이 기사는 실용적이며 JavaScript 이벤트 버블링에 대한 기본 지식에 대해 너무 자세히 설명하지 않습니다.

기사를 시작하기 전에 다음 요구 사항을 살펴보겠습니다. 다음 HTML은 WebGame 프로젝트 패키지 바의 외부 프레임을 설명한다고 가정합니다. (온라인 게임을 해 본 사람이라면 패키지 바 또는 패키지 바가 무엇인지 알아야 합니다.) 인벤토리 표시줄)인 경우, 패키지 제목 표시줄을 끌어서 페이지의 원하는 위치로 패키지를 끌고, 제목 표시줄 오른쪽에 있는 "×" 닫기 버튼을 클릭하여 패키지 표시줄 표시를 닫습니다. HTML 구조를 관찰하면 닫기 버튼이 실제로 A 링크이고 제목 표시줄 H5의 하위 요소로 존재한다는 것을 알 수 있습니다. 요소를 드래그하려면 드래그 핸들 요소에 mousedown 이벤트를 등록하고 닫기 버튼을 클릭하거나 "클릭"하여 패키지를 닫는 것을 생각할 수 있습니다. 이 요구 사항을 기반으로 우리는 신속하게 다음 코드를 얻었습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>자바스크립트 이벤트 버블링 예시 1</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> <div id="box"> <h5 id="a-onclick-closeBox-href-javascript-void-a"><a onclick="closeBox();" href="javascript:void(0);">×</a></h5> <div id="testInfo"></div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

In 위의 예에서는 닫기 버튼을 클릭하면 제목 표시줄의 mousedown 이벤트도 트리거된다는 것을 알 수 있습니다. 이는 작업 중인 JavaScript 이벤트 버블링이라는 것을 알고 있기 때문에 분명히 예상한 것입니다. 실제로 꼭 원하는 효과는 닫기 버튼을 눌렀을 때 제목 H5에 등록된 mousedown 이벤트가 실행되지 않도록 하는 것이므로 해당 이벤트가 버블링되는 것을 방지하려고 생각한 후 코드를 다음과 같이 수정했습니다.

코드 복사

코드는 다음과 같습니다.

>

×

그 결과 닫기 버튼을 눌렀을 때 제목 H5에 등록된 mousedown 이벤트가 계속 실행되는 것을 확인했습니다. 무슨 일이 일어나고 있는 걸까요? 실제로 주의 깊게 살펴보면 H5 제목과 A 링크에 등록된 이벤트가 동일하지 않다는 것을 알 수 있습니다. 위 코드에서는 A 링크에 등록된 클릭 이벤트에서 차단 이벤트 메서드를 호출합니다. 단지 "부모 요소에 의해 등록된 유사한 이벤트" 이벤트가 실행되지 않는다는 의미입니다. 즉, H5 타이틀에도 클릭 이벤트가 등록되어 있으면 클릭 이벤트가 실행되지 않고 여기에서 마우스다운이 계속 실행된다는 의미입니다. . 여기에서 mousedown 실행은 제목 표시줄을 클릭했기 때문에 발생하는 것이 아니라 클릭할 때 mousedown 이벤트가 생성되기 때문에 발생합니다. 그런 다음 JavaScript 이벤트 버블링 메커니즘이 존재하기 때문에 해당 이벤트가 부모에게 브로드캐스트되고 의해 mousedown됩니다. H5 제목을 등록합니다. 이 점에 대한 이해를 위해 제 다른 블로그 "onmousedown, onmouseup, onclick이 동일한 라벨 노드 요소에 동시에 적용되는 경우"를 참고하시면 됩니다. 이제 분석을 통해 위 코드를 약간 변경하면 됩니다. A 링크의 클릭 이벤트를 H5 제목과 동일한 mousedown 이벤트로 변경하면 원하는 효과를 얻을 수 있습니다.
관련 주제:
이제 jQuery로 개발할 때 이벤트 버블링을 쉽게 방지하는 방법에 대해 이야기하겠습니다. 뛰어난 스크립팅 프레임워크인 jQuery는 이벤트 캡슐화 및 브라우저 호환성 측면에서 당연히 탁월합니다. 더 자세히 알고 싶다면 내 다른 블로그인 "JQuery의 $.event.fix 기능을 사용하여 브라우저 이벤트 처리 통합"을 읽어보세요.
jQuery를 사용하여 이벤트 버블링을 방지하는 방법은 두 가지가 있습니다.
1. jQuery를 사용하여 호환되는 이벤트 객체를 만들고 직접 event.preventDefault()를 사용합니다.

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

×

2. jQuery에서는 false를 반환합니다. 즉, false를 반환합니다. 참고: jQuery를 사용하여 바인딩되지 않은 메서드에서 false를 반환하는 것은 쓸모가 없습니다. 코드는 다음과 같습니다.

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

>

×

🎜>마지막 참고 사항 이제 두 번째 방법을 사용하여 이벤트 버블링을 방지하고 브라우저의 기본 동작도 방지합니다. jQuery 이벤트 처리 소스 코드의 핸들 메서드(jQuery JavaScript Library v1.3.2 비압축 코드 라인) 2700) 다음 처리에서는 브라우저의 기본 동작을 방지하기 위해 event.preventDefault()가 사용되는 것을 볼 수 있습니다.

코드 복사

코드는 다음과 같습니다. handle: function(event) { //기타 코드......

if (ret === false)

{
event.preventDefault()
event.stopPropagation(); }
//다른 코드......
}


작성자: WebFlash