JavaScriptイベントのバインド、トリガー、削除のサンプルコードの詳細な説明

JavaScript は最も単純なイベント モデルであり、イベントのバインドとトリガー、およびイベントの削除が必要です。

var eventModel = {
 list: {},
 bind: function () {
 var args = [].slice.call(arguments),
 type = args[0],
 handlers = args.slice(1);
 if (typeof type === 'string' && handlers.length > 0) {
  for (var i = 0; i < handlers.length; i++) {
  if (typeof handlers[i] === &#39;function&#39;) {
   if (!this.list[type]) {
   this.list[type] = [];
   }
   this.list[type].push(handlers[i]);
  }
  }
 }
 },
 unbind: function () {
 var type = arguments[0],
 handlers = Array.prototype.slice.call(arguments, 1);
 if (typeof type === &#39;string&#39;) {
  if (handlers.length === 0) {
  this.list[type] = [];
  } else {
  for (var i = 0; i < handlers.length; i++) {
   if (typeof handlers[i] === &#39;function&#39; && handlers[i] === this.list[type][i]) {
   this.list[type].splice(i, 1);
   }
  }
  }
 }
 },
 trigger: function () {
 var arguments = [].slice.call(arguments),
 type = arguments[0],
 args = arguments[1] instanceof Array && !arguments[2] ? arguments[1] : arguments.slice(1),
 handlers = this.list[type];
 for (var i = 0; i < handlers.length; i++) {
  handlers[i].apply(this, args.splice(0, handlers[i].length));
 }
 }
};

主にbind（バインドイベント）、unbind（削除イベント）、trigger（トリガーイベント）を実装します。同じイベント名に対して、複数のイベント処理関数をバインドできます。それらはバインドされた順序で順番にトリガーされます。

args.splice(0, handlers[i].length) トリガー時に渡されるパラメーター

イベントのバインドとトリガー:

eventModel.bind('myevent1', function (a) {
 console.log(a); // 1
}, function(b) {
 console.log(b); // 2
}, function(c, d) {
 console.log(c + ' + ' + d); // a + b
});
eventModel.bind('myevent1', function (e) {
 console.log(e); // 50
});
eventModel.trigger('myevent1', 1,2,'a','b', 50);

イベントの削除:

<button id="bind">bind</button>
<button id="unbind">unbind</button>

りー

以上がJavaScriptイベントのバインド、トリガー、削除のサンプルコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。