JQuery와 HREF 및 onclick을 분리

Question

나는 참 또는 거짓 반환 FUNC2이

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a> 

같은 코드가 있습니다. 그런 다음 func1은 function2가 true를 반환 할 때만 호출됩니다. 권리 ? 학습 JQuery와에

, 나는 그 온 클릭이 좋지 않아 발견 및 감가 상각, 그래서 지금

<a id="id101" href="javascript:func1();">Link</a> 

jquery 
$("#id101").click(func2() { 
    //same stuffs from before which was in func2 
}); 

에 위의 코드를 수정, 내 질문은 : 클릭 핸들러가 촬영

후 관심, 내가 href 내부에서 JavaScript로 무엇을 할 수 있습니까? func2 내부의 조건이 true 일 때 func2의 jQuery 클릭 핸들러에서 func1을 func2 내에서 호출해야합니까? 아니면 우아한 해결책이 있습니까?

또한 HTML과 이벤트 코드를 구분하는 것이 좋지만 여기서는 id가 id101 인이 요소에 많은 이벤트가 연관 될 수 있으며 큰 파일에는 많은 이벤트가있는 많은 HTML 요소가있을 수 있습니다. 그래서, 많은 이벤트 핸들러가있는 큰 페이지가있을 때, 어떻게 html 요소가 어떤 것인지, 얼마나 많은 이벤트가 연관되어 있는지 더 잘 알 수 있습니까? 요청에 따라 위의 질문에 대한

자세한 설명,

내가 id101이 onMouseover와, onmouseout 및 기타 여러 이러한 이벤트, 온 클릭 할 수 있습니다 의미했다. 이러한 많은 이벤트 핸들러에는 많은 요소가있을 수 있습니다. 어떻게 그들을 더 잘 보이게 할 수 있습니까? 예전 스타일에서는 이와 같은 모든 이벤트 핸들러가 함께 배치됩니다 (예 :

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>).

나는 이것이 좋다고 말하는 것은 아니지만 적어도이 onclick 이벤트가 있음을 알 수 있습니다. 하지만 이제 이것을 jquery 파일로 분리 할 때 id101에 대해이 jquery 파일을 먼저 검색 한 다음 관련 요소를 확인해야합니다.이 요소는 많은 요소와 관련 이벤트 처리기가있는 html 파일에 문제가 될 수 있습니다. 그 정보를 찾는 더 좋은 방법이 있습니까?

Answer 1

예, func2를 func2로 작성하는 것이 좋습니다. HTML :

$("#id101").click(func2() { 
    var status = false; 
    //func2 goes here and modifies status value. 
    if (status) { 
     // func1 goes here 
    } else { 
     // in case if status is false. 
    } 

}); 

<a id="id101" href="#" >Link</a> 

jQuery를 또한 당신이 더 구체적으로하시기 바랍니다 수, 당신은 당신의 질문의 두 번째 부분에 의미를하지 않았다.

Answer 2

내가 말할 수있는 가장 좋은 점은이 코드가 "냄새 나는"코드라는 것입니다. 자바 스크립트를 이와 같이 마음대로 사용하고 싶지는 않습니다. 몇 시간 동안 jQuery의 기초를 배우고 그 곳으로 이동하는 것이 좋습니다. 레거시 자바 스크립트로 작업하는 경우 특히 실망 스러울 수 있습니다.

Answer 3

제대로 이해했다면 인라인 자바 스크립트는 피하고 싶지만 a을 볼 수 있고 이벤트가 바인딩되어 있는지 알고 싶을 수도 있습니다. 안타깝게도 인라인 자바 스크립트는 나쁜 소식이기 때문에이를 나타낼 수있는 방법이 없습니다. 아마도 미래의 가독성을 돕기 위해 요소를 더미 클래스로 제공 할 수 있습니다. 그것 이외에, 전체 func1과 func2 것을 잊어 버려라. 클릭 바인딩 내에서 익명의 함수를 사용하기 만하면됩니다.

<a id="some_id" class="optional_has_click">Click Me</a> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

    $("#some_id").click(function(){ 

     // do something 
     alert($(this).attr("id")); 

    }); 

    }); 
</script> 

편집 : 당신이이 a처럼 보이게하기 위해 더미 클래스를 사용할 수 있도록 또한, href를 제거하면, 시각적 큐를 제거합니다. 여기

당신을위한 바이올린입니다 :