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

Program / 글쓴이

<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)”? .

답변

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

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

답변

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

답변

다른 방법을 잊었습니다.

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

JavaScript 코드 사용 :

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

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

답변

<a href="#" onClick="DoSomething(); return false;">link</a>

나는 이것을 할 것이다.

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

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

답변

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

답변

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

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

이:

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

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

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

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

답변

최신 브라우저 만

<!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>

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

출처 :