href 및 onclick의 JavaScript 함수

href 및 onclick의 JavaScript 함수

---

리디렉션없이 클릭으로 간단한 JavaScript 함수를 실행하고 싶습니다.

JavaScript 호출을 href속성 에 넣는 것 사이에 차이점이나 이점이 있습니까?

<a href="javascript:my_function();window.print();">....</a>

) 대 onclick속성에 넣는 것 ( onclick이벤트에 바인딩 )?

---

href에 onclick을 넣으면 콘텐츠를 행동 / 행동과 분리시키는 것을 강력하게 믿는 사람들이 기분을 상하게 할 수 있습니다. 논란은 귀하의 HTML 컨텐츠가 프리젠 테이션이나 행동이 아닌 컨텐츠에만 집중해야한다는 것입니다.

요즘 일반적인 경로는 자바 스크립트 라이브러리 (예 : jquery)를 사용하고 해당 라이브러리를 사용하여 이벤트 핸들러를 만드는 것입니다. 다음과 같이 보일 것입니다 :

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

---

나쁜:

<a id="myLink" href="javascript:MyFunction();">link text</a>

좋은:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

보다 나은:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

더 나은 1 :

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

더 나은 2 :

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

왜 더 좋아? return false브라우저가 링크를 따라 가지 못하게 하기 때문에

베스트:

jQuery 또는 기타 유사한 프레임 워크를 사용하여 요소의 ID별로 클릭 핸들러를 첨부하십시오.

$('#myLink').click(function(){ MyFunction(); return false; });

---

측면에서 자바 스크립트 한 차이가 있다는 것이다 this에서 키워드 onclick핸들러가 그 DOM 요소를 참조한다 onclick속성이 (이 경우 인 <a>반면, 요소) this에서 href받는 참조 할 속성 window오브젝트.

표현 측면에서 , href속성이 링크 (예 :)에없는 경우 <a onclick="[...]">기본적으로 브라우저는 링크가 아닌 앵커로 취급하기 때문에 text커서 (자주 원하는 pointer커서가 <a>아님)를 표시합니다.

동작 측면 에서을 통해 탐색으로 작업을 지정할 때 href브라우저는 일반적으로 href바로 가기 또는 상황에 맞는 메뉴를 사용하여 별도의 창에서 작업을 여는 것을 지원 합니다. 를 통해서만 액션을 지정할 때는 불가능합니다 onclick.

---

그러나 DOM 객체를 클릭하여 동적 작업을 수행하는 가장 좋은 방법을 묻는다면 문서의 내용과 별도로 자바 스크립트를 사용하여 이벤트를 첨부하는 것이 가장 좋습니다. 여러 가지 방법으로이 작업을 수행 할 수 있습니다. 일반적인 방법은 jQuery와 같은 자바 스크립트 라이브러리를 사용하여 이벤트를 바인딩하는 것입니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

---

나는 사용한다

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

먼 길이지만 작업이 완료됩니다. A 스타일을 사용하여 단순화하면 다음과 같습니다.

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

---

여기의 모든 것 외에도 href는 브라우저의 상태 표시 줄에 표시되고 클릭하지 않습니다. 자바 스크립트 코드를 보여주는 것은 사용자 친화적이지 않다고 생각합니다.

---

이를 수행하는 가장 좋은 방법은 다음과 같습니다.

<a href="#" onclick="someFunction(e)"></a>

문제는 브라우저의 페이지 URL 끝에 해시 (#)를 추가하므로 사용자가 뒤로 버튼을 두 번 클릭하여 페이지로 이동해야한다는 것입니다. 이를 고려하여 이벤트 전파를 중지하는 코드를 추가해야합니다. 대부분의 자바 스크립트 툴킷에는 이미이 기능이 있습니다. 예를 들어, dojo 툴킷은

dojo.stopEvent(event);

그렇게하기 위해.

---

이 코드 줄을 사용하여 나를 위해 일했습니다.

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

---

javascript:특별히 스크립팅에 적합하지 않은 속성을 갖는 것은 오래된 HTML 방법입니다. 기술적으로는 작동하지만 여전히 자바 스크립트 속성을 비 스크립트 속성에 할당하는 것은 좋지 않습니다. 오래된 브라우저 또는 일부 최신 브라우저에서도 실패 할 수 있습니다 (Google 포럼 게시물은 Opera가 'javascript :'urls를 좋아하지 않음을 나타냅니다).

자바 스크립트를 onclick속성 에 넣는 두 번째 방법 은 스크립트 기능이없는 경우 무시하는 것이 좋습니다. 자바 스크립트가없는 사용자를 위해 href 필드에 유효한 URL (일반적으로 '#')을 입력하십시오.

---

가장 좋은 대답은 매우 나쁜 습관입니다. 빈 해시에 연결하면 절대로 문제가 발생하지 않습니다.

다른 많은 사람들이 언급했듯이 이벤트 핸들러를 요소에 바인딩하는 것이 <a href="javascript:doStuff();">do stuff</a>모든 최신 브라우저에서 완벽하게 작동하며 템플릿을 렌더링 할 때 광범위하게 사용하여 각 인스턴스에 대해 리 바인드하지 않아도됩니다. 경우에 따라이 방법은 성능이 향상됩니다. YMMV

또 다른 재미있는 tid-bit ....

onclick& href자바 스크립트를 직접 호출 할 때 다른 동작이 있습니다.

onclick전달합니다 this반면, 제대로 컨텍스트를 href하지 않습니다, 또는 다른 말로 <a href="javascript:doStuff(this)">no context</a>반면,하지 않습니다 일 <a onclick="javascript:doStuff(this)">no context</a>것입니다.

그렇습니다 href. 그것이 사양을 따르지는 않지만 모든 브라우저에서 작동하지만 이상적으로 href="javascript:void(0);"는 좋은 측정을 위해 포함해야합니다.

---

이 작동합니다

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

---

개인적으로 HREF 태그에 자바 스크립트 호출을하는 것이 성가신 것으로 나타났습니다. 나는 보통 무언가가 자바 스크립트 링크인지 아닌지에주의를 기울이지 않으며 종종 새 창에서 물건을 열고 싶어합니다. 이러한 유형의 링크 중 하나를 사용 하여이 작업을 시도하면 위치 표시 줄에 아무것도없는 빈 페이지가 표시됩니다. 그러나 이것은 onlick을 사용하여 조금 나아졌습니다.

---

Javascript와 함께 "href"를 사용할 때주의해야 할 사항이 하나 더 있습니다.

두 번의 클릭 사이의 시간 차이가 매우 짧은 경우 "href"속성의 스크립트가 실행되지 않습니다.

예를 들어, 다음 예제를 실행하고 각 링크에서 두 번 클릭 (빠른!)하십시오. 첫 번째 링크는 한 번만 실행됩니다. 두 번째 링크는 두 번 실행됩니다.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Chrome (더블 클릭) 및 IE11 (트리플 클릭)에서 재생되었습니다. Chrome에서 충분히 빠르게 클릭하면 10 번의 클릭만으로 1 회의 기능 만 실행할 수 있습니다.

Firefox는 정상적으로 작동합니다.

---

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

---

메일 폴더가 대신 URL을 표시하도록 설정된 Outlook의 웹 페이지 기능에 페이지가 포함되면 javascript : hrefs가 작동하지 않는다는 것을 경험했습니다.

---

첫째, href사용자가 링크를 복사하거나 다른 탭에서 열 수 있도록하기 때문에 URL을 입력하는 것이 가장 좋습니다.

경우에 따라 (예 : HTML이 자주 변경되는 사이트) 업데이트가있을 때마다 링크를 바인딩하는 것은 실용적이지 않습니다.

일반적인 바인드 방법

일반 링크 :

<a href="https://www.google.com/">Google<a/>

그리고 JS의 경우 이와 같은 것 :

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

이 방법의 장점은 마크 업과 동작을 명확하게 분리하여 모든 링크에서 함수 호출을 반복 할 필요가 없다는 것입니다.

바인드 방법 없음

그러나 매번 바인드하고 싶지 않으면 onclick을 사용하여 요소와 이벤트를 전달할 수 있습니다.

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

그리고 이것은 JS의 경우 :

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

이 방법의 장점은 매번 바인딩에 대해 걱정할 필요없이 원하는 때마다 AJAX를 통해 새 링크를로드 할 수 있다는 것입니다.

참고 URL : https://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick