mvc-2イベントリスニング

現代のブラウザでサポートされているイベント

click

dbclick

mouseover

mousemove

mouseout

focus

blur

change(フォーム入力ボックス特有)

submit(フォーム固有)

addEventListener/removeEventListenr

は、2番目のパラメータが匿名関数である場合、この要素ノードを破棄しないとリスニングが停止しないことに注意する.

第3パラメータ
対応イベント
効果
イベントのキャンセル
true
イベントスナップ
外から内へ伝播する
false
イベントバブル
内向外から伝播する
e.stopPropagation()

デフォルトの動作をブロック:e.preventDefault() / return false

イベントオブジェクト

イベントタイプ

bubbles:イベントがDOMによって

を泡状にトリガするかどうかを示す.

環境情報属性

button:マウスが押したボタンを表します

0:左

1:中

ctrlKey/altKey/shiftKeyは、対応するキー

が押下するか否かを示す.

キーボードイベントのプロパティ

isChar:現在押すキーが1文字

を表すか否かを示す.

charCode:キーのunicode値(keypressのみ有効)

を表す.

keyCode:非文字キーを表すunicode値

which:文字

であるかどうかにかかわらず、現在のキーを表すunicode値

イベント発生環境パラメータ

pageX/pageY:可視領域に対する座標

screenX,screenY:スクリーンの座標

について

イベント関連要素

currentTarget:イベントバブルフェーズが現在存在するDOM要素

target,originateTarget:元のDOM要素

relatedTarget:イベントに関連する他のDOM要素(ある場合)

コンテキストの切り替え

addEventListener()メソッドの実行関数では、コンテキストが現在のリスニングノードに切り替わっています.変更する場合は、前述の方法

を使用します.
イベントの委任

バブルイベントからイベント依頼が開始された.親要素に直接イベントリスニング

をバインドできます.

list.addEventListener("click", function(e) {
  if(e.currentTarget.tagName == "LI") {
    /**/
  }
}, false)

カスタムイベント
jqueryプラグインを例に挙げる.次のコードはカスタムイベントを使用してコードをきれいにし、タブをクリックするとchangeをトリガーします.tabsイベントは、activeクラスを変更するためにいくつかのコールバックメソッドをバインドします.

<ul id="tabs">
  <li data-tab="user">Users</li>
  <li data-tab="group">Groups</li>
</ul>
<div id="tabsContent">
  <div data-tab="user">user</div>
  <div data-tab="group">group</div>
</div>

jQuery.fn.tabs = function(control) {
  var elem = $(this);
  control = $(control);

  elem.on("click", "li", function() {
    var tabName = $(this).attr("data-tab");
    elem.trigger("change.tabs", tabName);
  });
  elem.on("change.tabs", function(e, tabName) {
    elem.find("li").removeClass("active");
    elem.find(">[data-tab='" + tabName + "']").addClass("active");    
  });
  elem.on("change.tabs", function(e, tabName) {
    control.find(">[data-tab]").removeClass("active");
    control.find(">[data-tab='" + tabName + "']").addClass("active");
  });

  //             hash   ，              
  elem.on("change.tabs", function(e, tabName) {
    window.location.hash = tabName;
  });
  $(window).on("hashchange", function() {
    var tabName = window.location.hash.slice(1);
    elem.trigger("change.tabs", tabName);
  })

  var firstName = elem.find("li:first").attr("data-tab");
  elem.trigger("change.tabs", firstName);
  return this;
}

$("ul#tabs").tabs("#tabsContent");

DOM依存イベント

イベントベースのプログラミングは、アプリケーションフレームワークを十分にデカップリングすることができ、イベントは本質的にDOMとは無関係であるため、イベント駆動ライブラリを開発することができる.

このモードは、パブリケーション/サブスクリプションのメッセージモードと呼ばれ、パブリケーション者とサブスクリプション者は完全にデカップリングされ、互いに相手の存在を知らず、両者は1つのチャネル名のみを共有する.

このモードを適用するには、コールバックとイベント名の対応関係を記録し、それらを呼び出す方法だけが必要である.

var PubSub = {
  //  
  subscribe: function(ev, callbacks) {
  //    
    var calls = this._callbacks || (this._callbacks = {});
    (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callbacks);
    return this;
  },
  //  
  publish: function() {
    var args = Array.prototype.slice.call(arguments, 0);
    var ev = args.shift();
    var list, calls, i, l;
    if(!(calls = this._callbacks)) return this;
    if(!(list = this._callbacks[ev])) return this;
    for(i = 0, l = list.length; i < l; i++) list[i].apply(this, args);
    return this;
  }
}

PubSub.subscribe("wem", function() {});
PubSub.publish("wem");
//                 
PubSub.subscribe("user:create", function() {});

ローカルオブジェクトに拡張

var Asset = {};
jQuery.extend(Asset, PubSub);
Asset.subscribe("test", function() {alert("test")});
Asset.publish("test");

jqueryを使用してこのモードを実装

(function($) {
  var o = $({});
  $.subscribe = function() {
    o.bind.apply(o, arguments);
  };
  $.unsubscribe = function() {
    o.unbind.apply(o, arguments);
  };
  $.publish = function() {
    var arguments = $.makeArray(arguments);
    var type = arguments[0];
    arguments.shift();
    o.trigger.apply(o, [type, arguments]);
  }
})(jQuery);

$.subscribe("/some/topic", function(event, a, b, c) {
  console.log(event.type, a + b +c);
});
$.publish("/some/topic","a","b","c");