addEventListner를 사용하고 단순히 Onclick/Ondblclick 함수를 사용하여 차이점은 무엇입니까?

Question

addEventListner와 단순히 Onclick/Ondblclick 함수를 사용하여 차이점은 무엇입니까?

Answer 1

onclick 등은 DOM 레벨 0 이벤트입니다. 모든 브라우저에서 작동하지만 동일한 요소의 동일한 이벤트에 여러 핸들러를 쉽게 추가 할 수는 없습니다. 즉 이미 있었다 모든 기능을 제거합니다

window.onload = function() { 
    // THE CODE TO RUN 
}; 

같은 것을 사용하는 것을 의미한다, 그래서 당신은 같은 트릭을 사용해야합니다 : 당신이 그것을 할 필요가 없습니다 또는 addEventListener와

(function (oldonload) { 
    window.onload = function() { 
     // THE CODE TO RUN 
     oldonload(); 
    }; 
}(window.onload)); 

합니다. 너는 다음과 같이 작성한다 :

window.addEventListener("load", function() { 
    // THE CODE TO RUN 
}, false); 

그리고 그것은 단지 작동하지만 IE에는 없다! IE에서 당신은 IE를 제외한 어디서나 작동하지 않는 attachEvent를 사용해야합니다.

function yourCode() { 
    // THE CODE TO RUN 
} 
if (window.addEventListener) { 
    window.addEventListener('load', yourCode, false); 
} else { 
    window.attachEvent('onload', yourCode); 
} 

을 그리고 당신은 단지 이미 일어난 사건에 바인딩 대신 즉시 코드를 실행할 수 있도록 모든 경우에 당신은 또한 문서가 이미로드되었는지 확인해야합니다 : 그래서 당신은 여전히 ​​다음과 같은 코드를 작성해야 다시 일어나지 않을 것입니다 - 더 많은 코드를 의미합니다 :

function yourCode() { 
    // THE CODE TO RUN 
} 
if(document.loaded) { 
    yourCode(); 
} else { 
    if (window.addEventListener) { 
     window.addEventListener('load', yourCode, false); 
    } else { 
     window.attachEvent('onload', yourCode); 
    } 
} 

요점은, 당신이 원하는 경우 이벤트 처리 코드가 강력하고 모든 브라우저와 호환 될 것입니다 후 빠르게 매우 복잡해진다.

$('some-id').click(function() { 
    // THE CODE TO RUN 
}); 

을하고 마술로 모든 브라우저에서 작동 : 그것은 당신이 그 세부 사항에 대해 걱정할 필요가 그냥 쓰지 않도록 나는 항상 당신을 위해 그것을 해결하기 위해 jQuery를 같은 라이브러리를 사용하는 것이 좋습니다 이유입니다.

Answer 2

addEventListner를 사용하면 둘 이상의 수신기를 추가 할 수 있습니다.

Answer 3

onclick/onmouseover를 노드에 직접 추가하면 구조/데이터와 동작이 결합되므로 특히 코드를 유지 관리하는 것이 좋지 않은 경우에는 좋지 않습니다.

(addEventListener를 사용하여) 디커플링을하면 (a) JS와 HTML을 점진적으로 변경 (또는 그 반대로) 할 수있는 능력을 얻고, (b) 동일한 JS를 다른 HTML (다른 페이지에서 말하기), (c) JS를 별도로 캐싱 할 수있는 능력을 얻으십시오 (외부 파일에 있다고 가정).

위와 같이 (@ JohnPick이 답변 한대로) 동일한 노드에 둘 이상의 수신기를 추가 할 수 있습니다.