브라우저 이벤트에 대한 사고

출처: 일구 UX
다음 코드를 먼저 확인합니다.
var $ = KISSY.all;
$(‘a’).on(‘click’,function(e){
doSomeThing();//이 방법이 유명한 것 같아요.
e.halt();
});
위의 코드는 우리가 맡긴 작업을 잘 끝낸 것처럼 보입니다. 브라우저는 우리를 href에 있는 링크로 다시 지정하지 않습니다. 그러나 이렇게 하는 것이 도대체 무엇이 잘못되었습니까?
무엇이 틀렸는지 설명하기 전에 브라우저에서 이벤트 중의 몇 가지 개념을 살펴보자
브라우저 기본 비헤이비어
우리가 어떤 링크를 눌렀을 때 브라우저는 바로 이동하고, 폼에서 리턴을 누르면, 폼은 자동으로 제출됩니다. 이것은 모두 브라우저의 기본 행동입니다.
Javascript 이벤트 전파 메커니즘
무엇이 사건의 거품입니까?
예를 들어 단추를 누르면 이 요소의 이벤트가 터치되고, 이 이벤트는 모든 부모 요소에 터치됩니다.(a->div->body->document->window) 이 과정을 사건 거품이라고 부른다.이벤트 거품은 하위 요소에서 부모 요소로 발생합니다.
주의: 모든 이벤트가 거품을 일으킬 수 있는 것은 아닙니다.blur,focus,load,unload는 다른 이벤트처럼 거품을 일으킬 수 없습니다
무엇이 사건 포획입니까?
사건의 거품과 반대로 사건 포획은 부급 원소에서 부급 원소로 이루어진다.
이벤트 목표란?
쉽게 말하면 사건이 시작된 그 요소, 즉 위에서 말한 a
 
다른 브라우저의 이벤트 모델
● W3C 표준 브라우저 지원: 거품을 먼저 포착합니다.이벤트를 추가할 때ddEvent Listener(event, fn,use Capture) 방법으로 기본 세 번째 파라미터인use Capture는Boolean 값이고true이면 이벤트 포획,false이면 이벤트 거품을 사용합니다.
● W3C 브라우저 (IE) 호환되지 않음: IE는 이벤트 거품만 지원하고,ddEventListener 함수도 지원하지 않지만,attachEvent () 방법으로 이벤트를 처리합니다.
윗글을 다 보고 나서 어떤 점이 틀렸다고 느꼈습니까?없다그럼 다음 문장을 다시 봅시다.
'halt'도대체 뭘 한 거야?
"halt"를 호출할 때마다 실제로는 두 가지 일을 합니다.
● e.preventDefault();//브라우저의 기본 비헤이비어 실행 차단
● e.stopPropagation();//이벤트 거품 제거
preventDefault와 stopPropagation을 원생 js로 번역한 후

function preventDefault(e) {
//         ，      IE   
if(e && e.preventDefault) {
　　//         (W3C)
　　e.preventDefault();
} else {
　　//IE             
　　window.event.returnValue = false;
}
return false;
}

function stopPropagation(e) {
//         ，      IE   
if(e && e.stopPropagation) {
　　//     W3C stopPropagation()  
　　e.stopPropagation();
} else {
　　//  ，      IE          
　　window.event.cancelBubble = true;
}
return false;
}

아니지, 내가 처음 쓴 코드는 브라우저의 기본 행동을 막으려고 했을 뿐이야. 이벤트 거품을 취소할 필요가 없어.
하지만, 이렇게 써도 아무런 문제가 없잖아!(입이 무거워 툭툭...)
확실히 대다수 상황에서 이러한 코드는 아무런 문제가 없다. 만약 우리가 이 코드를 큰 환경으로 확대한다면 어떤 상황이 나타날까

<div>
<h2><a href="http://etao.com/page1">Page1</a></h2>
<div>
    Teaser text...
</div>
</div>
<div>
<h2><a href="http://etao.com/page2">Page2</a></h2>
<div>
    Teaser text...
 </div>
</div>

현재 사용자가 글 제목을 눌렀을 때div.content에 글을 동적으로 불러오려고 한다면 (즉 DoSomeThing이 하는 일)
하하: 위의 js 코드도 여전히 실행될 수 있군요.
우리는 이 사고방식에 따라 계속한다. 만약 사용자가div.post 요소 (또는 그 어떠한 하위 요소) 를 눌렀을 때 active 클래스를 추가하려면div.post에 클릭을 연결해야 한다.

var posts = $('div.post');
posts.on('click',function () {
posts.removeClass("active");
$(this).addClass("active");
});

이 코드는 때때로 실행되고 때로는 실행되지 않습니다. 왜냐하면 a를 눌렀을 때 이벤트 거품을 취소했기 때문입니다.
우리는 이 코드의 집행 범위를 다시 확대했다. 제품은 하나의 수요를 제기했다. 페이지의 모든 클릭 상황을 감청할 것을 요구했다. 한 학생이 수요를 받고 즐겁게 문서에 이벤트 에이전트를 사용해서 서버에 데이터를 보냈는데 되돌아오는 데이터는 통계를 보니 아무것도 없는 것 같다.뒤돌아보니 어떤 사람이 a 탭의 클릭 이벤트에서halt를 사용했다.
사실 이것이 본고가 전달하고자 하는 정보입니다. 대부분의 경우halt를 사용할 때, 당신이 진정으로 필요로 하는 것은 e.preventDefault () 입니다. 일반적인 구성 요소를 쓸 때 이 문제가 특히 두드러집니다.
 

관련 기사

브라우저 개발 도구의 비밀 25개

프런트엔드 엔지니어의 가치는 어디에 있습니까?

페이지 구축과 js 전단에서 말하지 않을 수 없는 것들

node를 사용합니다.js 개발 전단 패키지 프로그램

소박한 CSS 디테일 사랑