JS 이벤트를 링크에 바인딩하는 가장 좋은 방법은 무엇입니까?

Question

가장 좋은 방법은 무엇이며 그 이유는 무엇입니까?

Href?

<a href="javascript:helloworld()">link</a> 

onclick?

<a href="#" onClick="helloworld()">link</a> 

프레임 워크 (예 : jquery)로 바인딩 하시겠습니까?

<a id="foo" href="#">link</a> 
… 
$('#foo').live('click',helloworld); 

Answer 1

다릅니다. 일반적으로 은에 아무것도 수행하지 않는 링크가 있어야합니다. 사용자가 자바 스크립트를 사용 중지했거나로드하지 못한 경우 어떻게해야합니까? 은 접근 가능한 웹 사이트를 갖기 위해이 정상적으로 열화되어야합니다. 따라서 예를 들어, 당신은 아약스와 함께로드 상자가 있다면, 당신은 그 다음 눈에 거슬리지에서 핸들러를 결합, 다른 페이지로 링크해야한다, 별도의 자바 스크립트 :

<a class="loadPage" href="actualPage.php">Go to my page</a> 

및 에서 다른 파일 :

링크는 자바 스크립트로 생성 된 경우

$('.loadPage').click(function(e) { 
    // Load with Ajax... 
    e.preventDefault(); // Stop the link from going through 
}); 

, 다음은 href로 대부분의 시간을 #을 사용하는 것이 괜찮습니다. 그러나이 경우 onclick을 innerHTML (* shudder *)로 설정하는 대신 JavaScript를 사용하여 핸들러를 부착해야합니다.

일반적으로 생산 코드에 onclick 속성 또는 javascript: 링크가있는 경우 HTML에서 바로 컨텐츠, 동작 및 프리젠 테이션을 구분하지 않습니다. 너는 접근 할 수 없다. 너는 의미 론적이지 않다. 하지 마!

Answer 2

해당 사항 없음.

JS를 외부 파일에 보관해야합니다. 라이브러리 분리를 사용하면 표준 이벤트 바인딩을 지원하는 브라우저와 이전 버전의 Internet Explorer 간의 차이점을 원활하게 처리 할 수 ​​있습니다.

그러나 JavaScript는 unobtrusive이어야합니다. 페이지 상단의 링크로 시작해서는 안됩니다.

Answer 3

'javascript : myaction()'을 사용하지 마십시오.

항상 실제 바인딩 (브라우저 창에 이벤트를 등록하는 것을 의미 함)을 만들기 때문에 항상 프레임 워크의 사용을 선호합니다. 가장 좋은 방법은 다음과 같습니다. $ ('# foo'). live ('click', function() {my action ....});

또한 자바 스크립트를 별도의 파일로 유지할 수 있으므로 스크립트를 사용하는 것이 좋습니다.

두 번째로 좋은 방법은 onClick 이벤트를 사용하는 것입니다.

Answer 4

HTML 마크 업에 javaScript를 사용하지 마십시오!또한 결코 live()를 사용하지 않는

$(function() { 
    var foo = $('#foo'); 

    if(foo[0]) { 
     foo.click(function(event) { 
      //.. 
      event.preventDefault(); 
     }); 
    } 
}); 

또는 사용 on()jQuery 1.7+ 이후

foo.on('click', function(event) { 
    //.. 
    event.preventDefault(); 
}); 

( jQuery 1.7로, .live() 방법은 사용되지 않습니다)!