JavaScript - DOM(W3C DOMのイベントモデル)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

独習JavaScript 高橋 和也 (著), 竹添 直樹 (著), 里見 知宏 (著) の第9章(DOM)9.3(W3C DOMのイベントモデル）練習問題9.6を解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)

1.

Webブラウザのイベントモデルは複数のイベントリスナを登録できないという問題があるけど、W3C DOMのイベントモデルは複数のイベントリスナを登録できる。

2.

コード(TextWrangler)

var form = document.getElementById('form');
form.addEventListener('submit', function(event){
  if(!confirm('送信してよろしいですか？')){
    event.preventDefault();
  }
},false);

3.

HTML(TextWrangler)

<p>id属性の値がareaの段落</p>
<script>
var element = document.getElementById('area');
element.addEventListener('mousedown', function(event){
  if(event.button == 0){
    alert('左ボタンがクリックされました');
  }
}, false);
</script>

id属性の値がareaの段落