Chapter 7. Handling Events

Chapter 7. Handling Events
2010/08/28(土) 24:48 ［Javascript］｜→親記事へ｜

第7章

■7.0 Introduction

Some Common Eventsでsubmit and resetとでてきた。確かにそうかーって感じがした。
scroll eventってのもあるのか。

Event History and New Event Handling

onclick="clickFunction()" みたいなHTMLにかくやつやwindow.onload=someFunction;などはDOM 0。
addEventListenerはDOM Level 2のイベントの付け方。

New Events, New Uses

DOMNodeInserted and DOMNodeRemoved events など新しいイベントもあるがIEはまだ。
(IE9はどうだっけ)
これ以外にもMozzilaはmouse gesture eventsなど携帯デバイス向けの独自イベントなどを定義していたりします。これはまた後半の章で。

■7.1 Detecting When the Page Has Finished Loading

window loadイベントを使ってDOM構築をキャッチしてからでないとDOMに触ることができない場合もあります。
なので、window.onloadを使ってやるのがベターです。
同じように<body onload="functionName()">みたくタグに書いても動作しますが、発見や変更がしにくいのでできるだけやめましょう。

■7.2 Capturing the Location of a Mouse Click Event Using the Event Object

マウスクリックがどこで起きたかを取得する。
(普通はaddEventみたいなものを使うべきだけど、スペースの都合で省いてそう)
位置判定はクロスブラウザ向けに書かれている。

document.onclick=processClick;// addEvent
function processClick(evt) {
   // access event object
   evt = evt || window.event;// other || IE
   var x = 0; var y = 0;
   // if event object has pageX property
   // get position using pageX, pageY
   if (evt.pageX) {
      x = evt.pageX;
      y = evt.pageY;
    // else if event has clientX property
   } else if (evt.clientX) {
      var offsetX = 0; offsetY = 0;
       // if documentElement.scrollLeft supported
      if (document.documentElement.scrollLeft) {
          offsetX = document.documentElement.scrollLeft;
          offsetY = document.documentElement.scrollTop;
      } else if (document.body) {
          offsetX = document.body.scrollLeft;
          offsetY = document.body.scrollTop;
      }
      x = evt.clientX + offsetX;
      y = evt.clientY + offsetY;
    }
alert ("you clicked at x=" + x + " y=" + y);
}

IE8以下はeventにアクセスするために window.event と経由しないといけない。
座標を取り出すために、IE以外はpageX and pageYを使うことでできる。
IEは clientX and clientYとscroll*を足して取得する。

■7.3 Creating a Generic, Reusable Event Handler Function

DOM Level 2でcross-browser friendlyな event handlingを書きましょう。
まあこの辺はいろんなところで見かけるので…

// add
function listenEvent(eventTarget, eventType, eventHandler) {
   if (eventTarget.addEventListener) {
      eventTarget.addEventListener(eventType, eventHandler,false);
   } else if (eventTarget.attachEvent) {
      eventType = "on" + eventType;
      eventTarget.attachEvent(eventType, eventHandler);
   } else {
      eventTarget["on" + eventType] = eventHandler;
   }
}
// remove
function stopListening (eventTarget,eventType,eventHandler) {
   if (eventTarget.removeEventListener) {
      eventTarget.removeEventListener(eventType,eventHandler,false);
   } else if (eventTarget.detachEvent) {
      eventType = "on" + eventType;
      eventTarget.detachEvent(eventType,eventHandler);
   } else {
      eventTarget["on" + eventType] = null;
   }
}

IE9でやっと DOM Level 2 event が入りました。

■7.4 Canceling an Event Based on Changed Circumstance

イベントを途中でキャンセルする方法。
処理中のイベントが完了する前にキャンセルするためには preventDefaultを呼んでキャンセルします。(タグに直接書く場合だとreturn false;みたいな感じにやるが上と同じ理由で普通はこっちを使うべき)

// cancel event
function  cancelEvent (event) {
   event = event || window.event;
   if (event.preventDefault) {
      event.preventDefault();
   } else {// DOM 0 -IE
      event.returnValue = false;
   }
}

キャンセルイベント（returnValueとpreventDefault） - 燈明日記c

ただし、これは(preventDefault)はDOMを通じたイベントのさらなる伝播(propagation)を止めません。
なので、場合によってはイベントが止まってないように見えてしまいます。イベントの伝播(propagation)を止めるにはstopPropagationを使用します。

■7.5 Preventing an Event from Propagating Through a Set of Nested Elements

入れ子になっている要素へのイベントの伝播(propagation)を止める。

//  stop event propagation
function  cancelPropagation (event) {
   if (event.stopPropagation) {
       event.stopPropagation();
   } else {
      event.cancelBubble = true;
   }
}

IEはバブリングとなっているように伝播の仕方が違うのもやっかい。

jmblog.jp – preventDefault() と stopPropagation()

■7.6 Capturing Keyboard Activity

textareaで入力したときのキーボードイベントをキャプチャー。
keyイベントをあげてみると

keydown
keyup
keypress
textInput - Follows keypress (Safari only).

keypress and keydownは似ているが反応するキーに違いがある。
keydownは何かのキーが押されたら反応する。
keypressは何か文字が入力されたら反応する。(入力が起きないカーソルなどは無反応)

keypressはASCII valueのキーが押されたら反応するイベントハンドラだが、そのASCII valueを取得する方法はブラウザで違いがある。
Safari, Firefox, and Chromeは charCode.
IE and Operaは keyCode.
(ブラウザ周りで違いが多くて大変なとこ)

■7.7 Using the New HTML5 Drag-and-Drop

HTML5のD&D機能について。
シンプルなD&Dのサンプル

HTML5 Drag and Drop

なぜか-khtml-user-dragで-khtmlというプレフィックスが使われていますが、-webkitにした方がよいです。

WebKit拡張教室 at ブラウザー勉強会#3

ここはとても読みにくいです…(D&Dの仕様のせいでもある)

まずはドラッグ可能な要素は draggable属性をtrueにする必要があります。
safariだとCSSでドラッグ可能かの設定ができて、

webkit-user-drag:element;でセレクタで指定した要素をドラッグ可能にします。

デフォルト(-webkit-user-drag:auto)でドラッグ可能なのがimages, links, and textなため、要素は指定しないとドラッグ可能になりません。

webkit-user-drag:none;でドラッグできなくなります。

この方法はWebkit系のブラウザしか使えないと思うので、setAttributeを使って属性を設定。
item.setAttribute("draggable","true");
同じように、HTMLタグにdraggable="true"しても適応できる。
dragover - 何かしらのtargetに乗ったときに反応。ユーザーへのfeedbackに使う
dragenter - targetに乗ったときに反応。ここでtargetを受け入れるかを決める。
キャンセルすることで受け入れるという直感に反する仕様。

を交えた著者のD&Dに対する意見・方針的なもの。(この辺すごくブログっぽい感じになってた)

D&Dのところだけすごく浮いていた内容だった。

→親記事（関連記事）へ