href="javascript:..."とonclick="..."の違い(その1)

javascriptでaタグのクリックイベントをハンドリングする方法は2通りあります。「href="javascript:..."」のようにhref属性を使う方法と「onclick="..."」のようにonclick属性を使う方法です。

javascriptは用途と限定して使うことが多いため気づきにくいのですが、href属性とonclick属性は振る舞いが異なります。次のスクリプトを実行してみるとその違いがわかります。

<script language="javascript">
<!--
function go1(text) {
  alert(text);
}
-->
</script>
<a href="javascript:void(0);" onclick="go1('%35%35');">(onclick)</a>
<a href="javascript:go1('%35%35');">(href)</a>

onclick属性のときは「%35%35」の文字列がそのままメッセージボックスに表示されます。href属性のときは「%35%35」の文字列ではなく「%35%35」をデコード(アンエスケープ)した「55」の文字列がメッセージボックスに表示されます。文字コードの「35(16進数)」は文字の「5」に該当します。



これはとても大きな違いです。私がWebアプリケーションを開発するときはonclick属性を使うことを基本としています。ただし、指定する文字列が限定され、前述の振る舞いに不都合がないときはhref属性を使うこともあります。

もう1つhref属性とonclick属性の振る舞いの違いがあります。その違いは後日ご紹介します。