<a>에 JavaScript 코드를 넣는 다른 방법의 차이점은 무엇입니까?

87

<a>태그 에 JavaScript 코드를 넣는 다음 방법을 보았습니다 .

function DoSomething() { ... return false; }
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

사용자가 JavaScript를 활성화하지 않은 경우를 대비하여 JavaScript 코드 대신 유효한 URL을 넣으려는 아이디어를 이해합니다. 그러나이 토론의 목적을 위해 JavaScript가 활성화되어 있다고 가정해야합니다 (자바 스크립트 없이는 로그인 할 수 없음).

저는 개인적으로 옵션 2를 좋아합니다.이 옵션을 사용하면 실행될 항목을 볼 수 있습니다. 특히 함수에 전달되는 매개 변수가있는 곳을 디버깅 할 때 유용합니다. 나는 그것을 꽤 많이 사용했고 브라우저 문제를 찾지 못했습니다.

나는 사람들이 4를 추천한다는 것을 읽었습니다. 사용자에게 따라갈 수있는 실제 링크를 제공하기 때문입니다. 그러나 실제로 #은 "진짜"가 아닙니다. 그것은 절대로 어디에도 가지 않을 것입니다.

사용자가 JavaScript를 활성화 한 것을 알고 있는데 지원하지 않거나 정말 나쁜 것이 있습니까?

관련 질문 : 자바 스크립트 링크 용 Href :“#”또는“javascript : void (0)”? .

javascript  html  href 
— 대릴 하인
소스
작은 구문 문제 : 선택 # 2는 "return"이없는 <a href="javascript:DoSomething();"> 링크 </a> 여야합니다.
— DRosenfeld
허용 된 답변을 @eyelidlessness 답변으로 변경하세요. 의미론에 관심이 있기 때문에 최선의 접근 방식이라고 생각합니다.
— Michał Perłakowski

답변:

69

Matt Kruse의 Javascript Best Practices 기사를 아주 좋아 합니다. 여기에서 그는 href섹션을 사용하여 JavaScript 코드를 실행하는 것은 좋지 않다고 말합니다. 사용자가 JavaScript를 활성화해야한다고 언급했지만, href누군가 로그인 후 JavaScript를 끄는 경우 모든 JavaScript 링크가 해당 섹션을 가리킬 수있는 간단한 HTML 페이지를 가질 수 없습니다 . 이 대체 메커니즘을 계속 허용하도록 강력히 권장합니다. 이와 같은 것이 "모범 사례"를 준수하고 목표를 달성합니다.

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
— 소신
소스
4
href 값이 상태 표시 줄에 사용자에게 표시되므로? (하단의 막대) 예를 들어 좀 더 사용자 친화적 인 링크를 사용하는 것이 좋습니다. "js.html? doSomething"페이지는 여전히 정적 html 일 수 있습니다. 이렇게하면 사용자는 링크 간의 차이를 명확하게 볼 수 있습니다.
— Gene
7
제목 속성으로이 값을 재정의 할 수 있습니다. 예 : <a href="javascript_required.html" title="Does Something" onclick="doSomething(); return false;"> go </a>
— Compiler
javascript_required.html 페이지에 요청을 기록하고 오류를 일으킨 함수를 기록하는 것이 가장 좋습니다.
— Timo Huovinen
2
SEO의 결과에 대해 생각해 보셨습니까?
— DanielBlazquez
Matt Kruse의 javascripttoolbox.com 은 오프라인 상태이며 판매중인 것으로 보입니다.
— showdev
10

addEventListener/ 를 사용할 수 있는데 왜 이렇게 attachEvent하시겠습니까? href동등 항목이 없으면를 사용하지 말고 <a>a를 사용하고 <button>그에 따라 스타일을 지정하십시오.

— 눈꺼풀 없음
소스
9
링크 대신 버튼을 사용하는 것은 많은 경우에 가능한 옵션이 아닙니다.
— nickf
2
보기 흉해 보이기 때문입니다. 링크 옆에 아이콘을 추가 할 수 있습니다. 브라우저에서 동일한 형식을 지정하기는 어렵습니다. 그리고 일반적으로 사람들은 버튼 대신 링크로 이동하고 있습니다. 대부분의 스택 오버플로를 살펴보세요.
— Darryl Hein
2
못 생겼어? 원하는 모양으로 보입니다. 사실, 버튼은 인라인이지만 브라우저 전체에서 적절하게 패딩을 취할 수 있다는 점에서 링크보다 스타일 유연성이 더 크다고 생각합니다. CSS와 관련하여 링크로 할 수있는 모든 작업은 버튼으로 할 수 있습니다.
— 눈꺼풀 없음
2
Span은 키보드에 초점을 맞출 수 없습니다.
— bobince
3
그리고 버튼은 의미 상 정확합니다. Span은 의미 상 의미가 없습니다. 버튼은 정확히 저자가 의미 론적으로 사용하려는 것입니다.
— 눈꺼풀 없음
5

다른 방법을 잊었습니다.

5: <a href="#" id="myLink">Link</a>

JavaScript 코드 사용 :

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

어떤 옵션이 가장 잘 지원되는지 또는 어떤 의미가 가장 좋은지에 대해서는 언급 할 수 없지만,이 스타일이 JavaScript 코드에서 콘텐츠를 분리하기 때문에이 스타일을 훨씬 선호한다고 말할 것입니다. 모든 JavaScript 코드를 함께 유지하므로 유지 관리가 훨씬 더 쉽고 (특히 여러 링크에 적용하는 경우), 파일 크기를 줄이기 위해 압축하고 클라이언트 브라우저에서 캐시 할 수있는 외부 파일에 넣을 수도 있습니다.

— nickf
소스
7
JS와 20 개 또는 30 개의 서로 다른 링크가있는 경우 이것은 매우 지루하고 많은 JS로 끝날 수 있습니다.
— Darryl Hein
자바 스크립트를 변경하기 위해 HTML을 살펴 보는 것보다 더 지루하지 않습니다. ... 또는 한 번에 여러 요소의 이벤트를 쉽게 변경할 수있는 jQuery와 같은 것을 사용할 수 있습니다. $ ( '# menu a'). click (function () {..})
— nickf
1
@JKirchartz 대답 뒤에 이유가 있다면 어떻게 설교하는지 모르겠습니다. 질문을 읽으면 실제로 "이 4 가지 중 어느 것이 가장 좋은지"이며, 그가 고려하지 않은 또 다른 옵션이 있음을 지적했습니다.
— nickf
, trololo 상관 없어, ABC와 D 사이에 선택할 때, 하나는 E.을 선택하지 않습니다
— JKirchartz
3
@JKirchartz 그래, 나는 당신이 실제로 Stack Overflow의 목적을 얻지 못했다고 생각합니다. 누군가 "Cobol 또는 Fortran에서 웹 앱을 구축하는 것이 더 좋은 방법은 무엇입니까?"라고 묻는 경우 그 사람에게 모든 가능성을 고려하지 않았다고 말하는 것은 허용됩니다. 질문은 " 이 네 가지 중 어느 것이 가장 좋은지" 라는 질문이 아닙니다 .
— nickf
3 
<a href="#" onClick="DoSomething(); return false;">link</a>

나는 이것을 할 것이다.

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

상황에 따라. 더 큰 앱의 경우 이벤트 코드를 통합하기 때문에 두 번째 앱이 가장 좋습니다.

— 아니 크 이슬람 아비
소스
JS와 20 개 또는 30 개의 서로 다른 링크가있는 경우 이것은 매우 지루하고 많은 JS로 끝날 수 있습니다.
— Darryl Hein
코드에 포함 된 버그는 디버그하기가 매우 어려울 수 있습니다. 첫 번째 예에서 알 수 있듯이 이러한 버그는 매우 쉽게 나타납니다. :)
— nickf
1

방법 # 2에는 FF3 및 IE7에 구문 오류가 있습니다. 나는 방법 # 1과 # 3을 선호한다. # 4는 덜 타이핑을하더라도 URI를 '#'로 더럽 히기 때문이다. 분명히 다른 응답에서 언급했듯이, 가장 좋은 해결책은 이벤트 처리와는 별도의 html이다.

— 피어 루이지
소스
방법 # 2는 무엇입니까? 질문은 당신이 그들을 보았을 때와 같은 순서로 유지되지 않습니다.
— Diodeus-James MacFarlane
.NET Framework를 확인하면 방법 # 4 는 URI를 엉망으로 만들지 않습니다return false . 따라서 방법 # 4가 아마도 가장 좋습니다 (나열된 방법 중).
— Már Örlygsson
2
@Diodeus, 저는 Pier가 질문 내 에서 번호가 매겨진 목록을 언급했다고 믿습니다 . 이것은 실제로 질문이 처음 게시 된 이후로 존재했습니다.
— eyelidlessness
1

나는 이것 사이에 한 가지 차이점을 발견했습니다.

<a class="actor" href="javascript:act1()">Click me</a>

이:

<a class="actor" onclick="act1();">Click me</a>

두 경우 모두 다음과 같은 경우입니다.

<script>$('.actor').click(act2);</script>

그런 다음 첫 번째 예의 경우 act2이전에 실행 act1되고 두 번째 예에서는 반대 방향으로 실행됩니다.

— 조엘 팬
소스
1

최신 브라우저 만

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

크로스 브라우저

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

문서가 준비되기 전에 실행할 수 있습니다. 이벤트를 문서에 첨부하므로 단추를 클릭하면 작동합니다.

출처 :

— 티모 후 오비 넨
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.