handleEventってなんか良さそう

知りませんでしたhandleEventという存在。

すごい的を得ていないポストなのでhandleEventで検索してきてしまった方すいません。

そんで久しぶりに恥かしながらコードを載せてみよう！

と思ったのでSyntax Highlighter導入してみました！

handleEventでググるとまず

handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。

そんな説明に出会います。

いまいちピンとこないのでいろいろサンプルを拾って試してみる。

まずはどこかで見たhandleEventサンプルです。

これがthisで呼べるのはおそらくhandleEventを持った(設定した)

windowオブジェクトを渡してるってことですよね？

そんで次

var handler = {
 handleEvent: function(e) {
  //イベントの共通処理
  e.preventDefault();
  switch(e.type) {
   case 'mousedown':
    this.x = e.clientX;
    this.y = e.clientY;
   break;
   case 'mouseup':
    console.log(this.x, this.y);
   break;
  }
  console.log(this);//thisはhandlerオブジェクト
 },
 x: null,
 y: null
};
window.addEventListener('mousedown', handler);
window.addEventListener('mouseup', handler);

これはhandleEvent関数を持ったオブジェクトを作ってそのオブジェクトを渡すと。

用は第二引数は関数ではなくオブジェクトを渡す。

こんなサンプルをまぁいじりながら考える。

なんか昔コンストラクタ内でのaddEventListenerって調子よくないなぁ。

普通はコンストラクタ内には書かんのかなぁみたいなことを思った気が、、、。

そんでなんかこれ使えば汎用的な部品が書けるのでは？

そんで次、とりあえずなんかマウスやタッチの位置を取得して

ごにょごにょするようなサンプルです。

少し長いんで気をつけて下さい！！

var Point = function(elem) {
 this.elem = elem;
 this.isTouch = 'ontouchstart' in window;
 this.start = this.isTouch ? 'touchstart' : 'mousedown';
 this.move = this.isTouch ? 'touchmove' : 'mousemove';
 this.end = this.isTouch ? 'touchend' : 'mouseup';
 this.flag = false;
 this.x = null;
 this.y = null;
 this.elem.addEventListener(this.start, this);
 this.elem.addEventListener(this.move, this);
 this.elem.addEventListener(this.end, this);
};
Point.prototype.handleEvent = function(e) {
 //イベントの共通処理
 e.preventDefault();
 this.x = this.isTouch ? e.touches[0].clientX : e.clientX;
 this.y = this.isTouch ? e.touches[0].clientY : e.clientY;
 switch(e.type) {
  case this.start:
   this.flag = true;
   //console.log(this.start);
  break;
  case this.move:
   //console.log(this.move);
  break;
  case this.end:
   this.flag = false;
   //console.log(this.end);
  break;
 }
 //console.log(e, this);
};
Point.prototype.addEvent = function(type, listener, useCapture) {
 this.elem.addEventListener(type, listener, !!useCapture);
};
Point.prototype.removeEvent = function(type, listener, useCapture) {
 this.elem.removeEventListener(type, listener, !!useCapture);
};

var img = new Image();
img.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmbRH59pMVYYu_tAfyZnhzs8MB3cFUVnE1dUbcC8xhPDVanWeRoJvtZLjOLeqTv8KOuOhMsbJH_jvagdNV3y5keMDd5Z908xKsk5Fuhe0MluWgKAVy4v9zhq2AFPwjsUwFraeK9xuCuQ/s144/cursol_img.png';
img.setAttribute('style', 'position:absolute;display:none;');
img.onload = function() {
 img.centerX = img.width / 2;
 img.centerY = img.height / 2;
};
var canvasElem = document.body;
var point = new Point(canvasElem);
canvasElem.appendChild(img);
point.addEvent(point.start, function() {
 img.style.left = (point.x - img.centerX) + 'px';
 img.style.top = (point.y - img.centerY) + 'px';
 img.style.display = 'block';
});
point.addEvent(point.move, function(e) {
 if(!point.flag) return;
 img.style.left = (point.x - img.centerX) + 'px';
 img.style.top = (point.y - img.centerY) + 'px';
 if(point.y > 500) point.removeEvent(e.type, point);//handleEventを削除
 if(point.x > 500) point.removeEvent(e.type, arguments.callee);//実行中の追加イベントを削除
});
point.addEvent(point.end, function() {
 img.style.display = 'none';
});

なんかこんなようなことを以前書きたいと思ったような、思わなかったような、、、。

でもなんか違うような。はい、曖昧な意味不明な記事です。

いつかこれを読み返して、これこうじゃなくて、こうじゃない？

みたいな思いつきを期待したいです。

なんかhandleEventのうまい書き方。誰か教えて。