2014/02/12

動的に追加される要素にイベントを登録する



なぜこんな記事を書いたのか。

前回のhandleEventってなんかよさそうこの記事書いてて

思い出したついでです。

<html>
<head>
<body>
<button id="add">追加</button>
<ul id="listUL">
<li>list1<button class="remove">削除</button></li>
</ul>
このリストは動的に追加され、削除ボタンでそのリストを削除したい場合。

add.addEventListener('click', function() {
  var listLength = document.getElementsByClassName('remove').length;
  var list = '

  • list' + (listLength + 1) + '
    • 
';
  listUL.innerHTML += list;
});
listUL.addEventListener('click', function(e) {
//親がイベントを監視し、伝播するイベントをキャッチし発生元の親listを削除する
//親が上の要素にいけば行くほど（広く監視するほど）無駄なイベント捕捉が増える？？と思われる
  if(e.target.className === 'remove') {
    this.removeChild(e.target.parentNode);
    //ここのthisはリスナが登録されたlistULを指す
    //thisは e.currentTarget、e.targetはクリックされた要素
  }
});
    ちなみに動的な要素もそうだけど、大量のリストにイベント設定するときとかもforで回すして

    全ての要素に登録するより、親に1つ登録してe.taｒgetを監視した方がよいのかしら？？

    以前、ふとどーやってあとから追加された要素にイベント登録するんだろーって思って、

    ググったところjQueryのliveとかonとか出てくるんですよね。

    まぁみなさんその情報を求めているんでしょう。

    がしかしここ最近なぜかjQueryをあまり使わなくって。

    そんで調べてなるほど！

    うーん、

    参考

    jQueryのliveやdelegateは実際何をやってるのか
    投稿者 時刻: 0 件のコメント :
    ラベル: ,

    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のうまい書き方。誰か教えて。
    投稿者 時刻: 0 件のコメント :
    ラベル: ,

    2014/02/05

    setubun

    投稿者 時刻: 0 件のコメント :
    ラベル:

    2014/02/03

    おかえりなさいinspiron



    1月のwindows updateにより？？？愛用のマシーンが力尽きてしまった。

    どーやら原因はハードディスクの故障。

    一か八かで交換を試みることに。

    前回の記事

    そして結論ですが、この記事今inspironで書いています！！

    復活です！！

    前回の書き忘れ


    前回DELLのサポセンの方に

    「ハードディスクの物理障害」

    との診断を下された後、

    HDDについてちょこっと調べてみました。

    そして物理障害のデータ復旧は難しそう

    そんな結論に達し、データ救出はあきらめ、

    以前奇跡的にリカバリディスクを作成していましたので

    なんの根拠もありませんが、

    ためしにwindowsのクリーンインストールを試みてみました。

    起動時にF12 ＞ BootMenu ＞ DVDドライブ？より起動

    なんとハードディスクのフォーマットが始まったではないですか！

    これはひょっとして、、？

    そしてフォーマットが完了し、インストールへと移ります！

    が、しかし、、当然な結果な気もしますがいくら待っても1％も進まず。

    ただHDDをフォーマットして終了という結果に、、、。


    そこで意を決し東芝のHDDをポチる。


    一か八かとかいいながら実はしっかり事前調査。

    【ノートPC分解】DELL INSPIRON N5010【HDD取り出し】

    こちらの記事大変参考というか、この記事なければ絶対無理！

    ホンとに助かりました、感謝です。

    HDD到着




    箱デカ。

    タイミングよく仕事が休みの日の午前中に到着。

    娘が幼稚園から戻る14時までが勝負です。

    終らなければ何か部品はなくなるでしょう。

    早速HDD開封



    これがバルクというやつでしょうか。

    ダンボールでかすぎです。

    まぁそれだけ繊細なものなのでしょう。

    気が引き締まります。

    まずは裏のビスを外します



    そしてDVDドライブを外す。

    問題なし。順調です。

    そしてキーボードを取り外す。

    お、簡単って引っ張ろうとしたら変なコードが繋がってるじゃないですか、、、。

    このきしめんケーブルというんですか？これが素人には恐ろしかったです、はい。

    それも前日きれいに爪を切っていたので黒いプラの部分を持ち上げるのにドキドキ。



    とりあえず無事外せました。こんな感じ。



    そしてまた苦手なきしめん外しです。



    そしてカバーを外していよいよHDDとのご対面。

    なんかこのあたりでもはやこのPCが再起するとはとても思えない、、、。

    でもやるしかないし。



    慎重に取り外します。



    そして早速新しいHDDを取り付けます。

    無事装着完了



    かなり慎重にすすめた為ここまでで40、50分くらいかかってしまいました、、、。

    ここから先はきた道をを戻るだけ！

    さくさく進めます。

    そして13時過ぎ無事部品も欠けることなく元の形に戻りました。



    まぁ戻りましたよ形はね。

    緊張の瞬間です


    こんなに電源を入れるのに緊張したことはありません。

    もしHDDを認識せずにまた分解とか絶対嫌だし、、。

    そもそも認識してるとかしてないとかわかんないし。

    てかHDD交換してそもそも直るかわかんないし、、。

    不安だらけです。

    意を決してポチっと。

    はい、見たことのない画面＆エラーの登場です。

    軽く方針状態。

    エラー内容は確か

    NTDLR is missing
    please press CNTRL+ALT+DEL to restart

    こんな感じでした。

    まっさきにGoogle先生に助けを求めると、

    OKWAVEにて回答発見。

    これは、「OS のブートローダが見付からない」という意味のエラーです。

    なるほど。

    一通り読んでみると、おそらく自分の場合HDDからOSが起動できないから

    このエラーが起きてるのではないかと解釈。

    そりゃサラのHDDですから。

    てことはDVDドライブにリカバリディスク入れて立ち上げればいいのでは？

    とりあえず再起動してBootMenuから起動をDVDドライブへ変更。

    神様仏様、、、。



    そしてなんとフォーマットが始まりました！！

    だがまだ安心できない。前HDDはフォーマットは完了したがインストールができませんでした。

    そして待つこと30,40分、、



    再起動



    感動です。

    かなり行き当たりばったり。

    ガンプラもろくに作れない俺が、、。

    運が良かったとしかいいようがありませんが、

    5千円で無事愛用マシーンが復活しました！

    ちなみにこの後windowsアップデート2、3時間かかりました、、、。

    最後に


    バックアップて大事なんだなぁ。

    そしてこれからも大事に使いますinspiron。

    ついでに次回悲しいデータ喪失の事実とPCのセットアップも書いてみたいと思います。
    投稿者 時刻: 2 件のコメント :
    ラベル:

    2014/02/02

    さらばinspiron n5010


    確か1/15日らへん。

    PC起動しっぱなしでその日は寝てしまいました、、、。

    翌日「いけねっ！」っと思ってPCをスリープから覚ましたところ、

    なんか再起動されてる。

    そーいえば職場のPC落としたときwindowsアップデートあったなぁ、、、

    とか思ってこれもアップデートされて勝手に再起動したか。

    くらいに思ってました。が、、その後に悲劇が起こりました。

    異常に重い


    何するにも超スローなんです。

    まぁよくあること。

    再起動すればなおるっしょ！

    ってことでおっそいけどなんとか再起動。

    う～ん、見たことないエラー


    再起動後ポップアップで見たことないエラー。

    まぁまぁPCにエラーはつきもの！

    恐れず進め。いざとなれば復元すればいいんでしょ？！

    激重い、というか動かない


    もっかい再起動でもしてみるか。

    てか進まないじゃん、、、。

    しょうがないんで強制終了。

    確かこんなときはセーフモードで立ち上げてどーにかこーにか。

    スタートアップ修復


    この辺あいまいなんですが、なんか操作してスタートアップ修復になったような、

    勝手にスタートアップ修復になったような、、、。

    まぁまぁまぁ、勝手に直ってくれるのはありがたい！

    すげーなパソコンわ。

    が、これがどんだけ待っても終わらない、、、。

    そしてこの後、素人が故に最悪と思われる選択をしてしまいました、、。

    スタートアップ修復を強制終了


    1時間くらいで終わらないからなんかイラッときてやってしまいました

    強制終了、、、。

    そろそろ仕事に出なければいけない焦りと、

    イライラが罪悪感なく強制終了へと導いてくれました。

    そこで再度PCを立ち上げたところ画面真っ暗

    DELLのマークが出た後真っ暗で先に進めず。

    まぁまぁまぁ、画面真っ暗っていってもなんか一応電源入るし、、、

    少し冷静になって、スタートアップ修復とか、こんな症状とかググる！

    ここでスタートアップ修復の強制終了はやはりまずかったか、、、と反省。

    時間もなくなってきたのでとりあえず電源落として、こんな時はセーフモード！

    ということでF8連打。

    ここもちょっと曖昧なのですが、ブートオプションのところで

    前回正常起動時の構成を選んだ気がするのですが、

    その後なんかの流れで再度スタートアップ修復へ辿り着きました。

    ここはしゃーないのでこのまま放置でとりあえず仕事へ行くことに。

    スタートアップ修復が12時間以上経っても終わらない、、、


    以外と直ってたりして、みたいなあま～い期待をしつつ帰ってきたら、あらびっくり。

    まだ終わってない、スタートアップ修復。

    最初はめんどくせー、復元とかすんの！くらいに考えていたんですが、

    さすがにこの辺で焦り始めました。

    せめてデータだけでもと、、、。

    どちらにしてもこりゃもぉ自力ではどーにもならん！ってことで

    その日はあきらめて、翌日DELLに電話してみることに。

    ソレワハードディスクノブツリショウガイデス


    すげーなぁ、みんな日本語上手だなぁ、と関心しながら

    いわれるがままPCを操作していくと、

    なんか安っぽいビープ音と共にエラーナンバーが表示。

    メモっときゃ良かったんですが、うっかり。

    以下その後のやり取りです。


    DELL 「ハイ、エラーナンバーワ？」

    僕 「****です」

    DELL 「アー、ハードディスクガコワレテルノデコウカンデスネ」

    僕 「え～、いくらぐらいかかりますか？」

    DELL 「サンマンエンホドデスネ」

    僕 「お～、結構しますね、、、。」

    DELL 「ソーデスネー、カイカエテモイイカモシレナイデスネ」

    僕 「データは取り出せますか？」

    DELL 「ウチデワヤッテマセン」

    僕 「....。」

    DELL 「ドーナサイマスカ？」

    僕 「ちょっとデータも諦めきれないので修理屋さんに聞いてみます、なんて伝えるのが早いですかね？」

    DELL 「ソレワハードディスクノブツリショウガイデス」

    僕 「そーですか、ありがとうござました」


    さらばinspiron

    考える


    早まる前に考える。

    3万でハードディスク交換するなら、もう少し足して買換えてもいい気がする。

    そこで2件ほどPC修理屋さんに聞いてみることに。

    DELLのPCのハードディスク交換で大体2万半ばの返答が、、、。

    微妙に踏み切れない値段。

    そしてデータの取り出しはハードディスクを確認してみないとわからないが、

    数千円で取り出せることもあれば、数十万かかあることも、、、。

    そもそもハードディスクっていくらすんのよ？

    そんなレベルです、はい。

    とりあえずハードディスクの種類を調べる。

    以外とそんなに多種類って感じではなさそう。

    まぁ2.5インチでインターフェースが同じなら問題なさそう。

    肝心な値段を価格COMで検索、

    東芝MQ01ABD050 [500GB 9.5mm] ￥4670円

    安い！

    どーせデータ取り出しにはすげー金かかりそうだし、

    PC買い換えても4万前後しちゃうし、

    こーなったら一か八かこれ買って自分で替えてやる！！

    でもそもそもハードディスク交換しただけでホントに直るのか？？

    もし動かなかったらどーにか外付けにでもして使ってやる！！！

    やけくそ。

    次回一か八かの分解です。
    投稿者 時刻: 0 件のコメント :
    ラベル:
    登録: 投稿 ( Atom )