2008-12-29 5 views
39

다음 두 가지 HTML의 차이점은 무엇입니까? (필자가이 프리 핸드를 입력 할 때 오타가 있으면 사과하십시오.) jQuery를 사용jQuery의 onclick과 onclick 속성의 차이점은 무엇입니까?

:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#clickme").click(function() { 
      alert("clicked!"); 
     }); 
    }); 
</script> 

<a id="clickme" href="javascript:void(0);">click me</a> 

는 jQuery를 사용하지 않음 : 차이의

<a id="clickme" href="javascript:void(0);" onclick="alert('clicked!');">click me</a> 
+1

그냥주의해야합니다. JavaScript 코드를 절대로 href' 속성에두면 안됩니다. 비 자바 스크립트 지원 브라우저에서는 아무 작업도 수행하지 않는 링크를 생성하고 점진적 향상 (또는 원할 경우 완만하게 저하)이라는 생각을 깨뜨립니다. –

+3

@Joseph Earl 예, 그렇지만 javascript : void (0)를 넣는 것은 아무 것도하지 않아야한다는 것입니다. onclick 이벤트는이 예제에서 jQuery를 통해 처리됩니다. –

답변

55

큰 차이점 중 하나는 jQuery의 이벤트가 click 이벤트에서 구문 분석되는 레지스트리에서 처리된다는 것입니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#clickme").click(function() { 
      alert("clicked!"); 
     }); 
     $("#clickme").click(function() { 
      alert("I concur, clicked!"); 
     }); 
    }); 
</script> 

그들은 모두 그 순서대로 click 이벤트에서 호출됩니다 : 결정적으로,이 여러 콜백을 양도 할 수 있으며, 그들이이 등록 된 순서대로 트리거 한 것을 의미한다. "진짜"onClick 이벤트는 jQuery의 레지스트리 구동 시스템에 의해 대체됩니다. 바닐라 문서 구조에서 jQuery와 같은 시스템이 없으면 onClick 이벤트가 하나만있을 수 있습니다.

+2

+1. 좋은 대답. 이벤트 정상화 (jQuery가하는 것)는 다른 점입니다. – seth

6

하나는 jQuery의 click와 핸들러를 추가하면 이전 핸들러를 제거하지 않습니다.

8

또한 UI 코드 (HTML)와 로직 코드 (JavaScript)를보다 명확하게 구분합니다. 그것은 조금 더 쉽게 읽을 수 있습니다.

관련 문제