JavaScriptコードを<a>に配置するさまざまな方法の違いは何ですか？

Question 1

JavaScriptコードを<a>タグに入れる次の方法を見てきました。

function DoSomething() { ... return false; }

<a href="javascript:;" onClick="return DoSomething();">link</a>
<a href="javascript:DoSomething();">link</a>
<a href="javascript:void(0);" onClick="return DoSomething();">link</a>
<a href="#" onClick="return DoSomething();">link</a>

ユーザーがJavaScriptを有効にしていない場合に備えて、JavaScriptコードだけでなく有効なURLを配置しようとする考えを理解しています。しかし、この議論の目的のために、私はJavaScriptが有効になっていると仮定する必要があります（JavaScriptがないとログインできません）。

私は個人的にオプション2が好きです。これにより、何が実行されるかを確認できます。特に、関数に渡されるパラメーターがある場所をデバッグするときに役立ちます。私はそれをかなり使用しましたが、ブラウザの問題は見つかりませんでした。

私は人々が4を推薦することを読みました、なぜならそれはユーザーにたどる本当のリンクを与えるからです、しかし実際には、＃は「本当」ではありません。それは絶対にどこにも行きません。

ユーザーがJavaScriptを有効にしていることがわかっているときに、サポートされていない、または本当に悪いものはありますか？

関連する質問：JavaScriptリンクのHref：「＃」または「javascript：void（0）」？。

Question 2

MattKruseのJavascriptのベストプラクティスの記事をとても楽しんでいます。その中で、彼は、hrefJavaScriptコードを実行するためにセクションを使用することは悪い考えであると述べています。ユーザーがJavaScriptを有効にする必要があると述べたとしても、hrefログイン後に誰かがJavaScriptをオフにした場合に、すべてのJavaScriptリンクがセクションを指すことができる単純なHTMLページを作成できない理由はありません。このフォールバックメカニズムを引き続き許可することを強くお勧めします。このようなものは「ベストプラクティス」に準拠し、目標を達成します。

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

Question 3

addEventListener/を使用できるのに、なぜこれを行うのattachEventですか？何も存在しない場合href換算は、使用しない<a>、使用<button>に応じたスタイルに。

Question 4

別の方法を忘れました：

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

JavaScriptコードの場合：

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

どのオプションが最高のサポートを持っているか、またはどのオプションが意味的に最高であるかについてコメントすることはできませんが、コンテンツをJavaScriptコードから分離するため、このスタイルの方がはるかに好きです。すべてのJavaScriptコードをまとめて保持するため、保守がはるかに簡単になり（特に、これを多くのリンクに適用する場合）、外部ファイルに入れてファイルサイズを縮小し、クライアントブラウザーでキャッシュすることもできます。

Question 5

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

私はこれを行います、または：

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

状況に応じて。大規模なアプリの場合は、2番目のアプリが最適です。これにより、イベントコードが統合されます。

Question 6

方法2には、FF3とIE7で構文エラーがあります。私はメソッド＃1と＃3を好みます。なぜなら、＃4は入力が少なくなるものの「＃」でURIをダーティにするからです...明らかに、他の応答で指摘されているように、最良の解決策はhtmlをイベント処理から分離することです。

Question 7

これの間で私が気づいた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れ、2番目の例では、その逆になります。

Question 8

クロスブラウザ

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

ドキュメントの準備が整う前にこれを実行できます。イベントをドキュメントに添付するため、ボタンをクリックしても機能します。

出典：

JavaScriptコードを<a>に配置するさまざまな方法の違いは何ですか？

最新のブラウザのみ

クロスブラウザ