JavaScript でカスタム イベントを作成するための基本的な知識

カスタム イベントは、ブラウザ固有の動作を持つイベント (クリック、マウスオーバー、送信、キーダウンなどのイベントと同様) とは異なり、イベント名を自由に定義でき、特定のメソッドを通じて追加、トリガー、削除できます。この記事では、JavaScript でのカスタム イベントの作成の基本について説明します。

カスタムイベントに関連する関数には、Event、CustomEvent、dispatchEvent があります。

イベントを直接カスタマイズするには、Event コンストラクターを使用します:

var events = new Event('build');

// イベントをリッスンします。
elem.addEventListener('build', function (e) { ... }, false);

// イベントをディスパッチします。
elem.dispatchEvent(event);

CustomEvent は、より高度にカスタマイズされたイベントを作成でき、いくつかのデータを添付することもできます。以下のように：

var myEvent = new CustomEvent(eventname, options);

ここで、オプションは次のとおりです:

{
詳細: {
...
},
バブル: true、
cancelable: false
}

このディテールには、いくつかの初期化情報を保存でき、トリガーされたときに呼び出すことができます。他のプロパティは、イベントにバブリング関数があるかどうかなどを定義します。

組み込みイベントは特定の操作に基づいてブラウザによってトリガーされますが、カスタム イベントは手動でトリガーする必要があります。イベントをトリガーするには、dispatchEvent 関数を使用します。

element.dispatchEvent(customEvent);

上記のコードは、customEvent イベントが要素でトリガーされることを示しています。組み合わせは次のとおりです:

// 適切なイベントリスナーを追加します
obj.addEventListener("cat", function(e) { process(e.detail) });

// イベントを作成してディスパッチします
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

カスタムイベントを使用する場合は互換性に注意する必要があります

// カスタム イベント
$(element).on('myCustomEvent', function(){});

// イベント
$(element) をトリガーします。 trigger('myCustomEvent');
さらに、カスタム イベントをトリガーするときに、より多くのパラメーター情報を渡すことができます:

$( "p" ).on( "myCustomEvent", function(event, myName ) {
$( this ) .text( myName + ", こんにちは!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John " ] );
});

JavaScript カスタム イベントは、クリック、送信などの標準イベントとは異なるカスタマイズされたイベントです。カスタム イベントの利点を説明する前に、まずカスタム イベントの定義例を見てみましょう。イベント:

// イベントを作成 var evt = document.createEvent('イベント'); //イベントタイプを定義 evt.initEvent('カスタムイベント', true, true); //要素上のイベントをリッスンする var obj = document.getElementById('testBox'); obj.addEventListener('カスタムイベント', function(){ console.log('customEvent イベントがトリガーされました'); }, false);

コンソールに obj.dispatchEvent(evt) と入力すると、カスタム イベントがトリガーされたことを示すデモが表示されます。正常にトリガーされました。

このプロセスでは、createEvent メソッドは空のイベント evt を作成し、initEvent メソッドを使用してイベント タイプを合意されたカスタム イベントとして定義し、対応する要素を監視してから、dispatchEvent を使用してイベントをトリガーします。

はい、カスタム イベントのメカニズムは通常のイベントのメカニズムと同じです。イベントをリッスンし、コールバック操作を記述し、イベントがトリガーされた後にコールバックを実行します。ただし、違いは、カスタム イベントがトリガーされたときに、カスタム イベントが完全に制御されることです。これは、一種の JavaScript 分離が達成されることを意味します。カスタム イベント メカニズムを使用して、関連する複数の論理的に複雑な操作を柔軟に制御できます。

もちろん、上記のコードは以前のバージョンの IE では機能しないことは想像できたかもしれません。実際、createEvent() は IE8 およびそれ以前のバージョンの IE ではサポートされていませんが、IE のプライベート fireEvent() メソッドは存在します。残念ながら、fireEvent は標準イベントのトリガーのみをサポートします。したがって、カスタム イベントをトリガーするには、特別で簡単な方法しか使用できません。

// type は type = 'customEvent' などのカスタム イベント、callback は開発者によって実際に定義されたコールバック関数です

obj[type] = 0;
obj[type]++;

obj .attachEvent ('onpropertychange', function(event){
if(event.propertyName == type ){
callback.call(obj);
}
});

このメソッドの原理は、実際にはカスタム属性を DOM に追加し、その要素の propertychange イベントをリッスンすることです。DOM の特定の属性の値が変更されると、propertychange コールバックがトリガーされ、変更が行われます。属性がカスタム属性であるかどうかはコールバックで決定され、そうであれば開発者によって実際に定義されたコールバックが実行されます。これはカスタム イベントのメカニズムをシミュレートします。

カスタム イベント メカニズムを標準イベントの監視およびシミュレーション トリガーと連携させるために、このメカニズムは標準イベントとカスタム イベントの監視、監視の削除、およびシミュレーション トリガー操作をサポートします。コードのロジックを明確にするために、カスタム イベントには「custom」という接頭辞が付けられることに注意してください (例:customTest、customAlert)。

/**
 * @description 包含事件监听、移除和模拟事件触发的事件机制，支持链式调用
 *
 */
 
(function( window, undefined ){
 
var Ev = window.Ev = window.$ = function(element){
 
  return new Ev.fn.init(element);
};
 
// Ev 对象构建
 
Ev.fn = Ev.prototype = {
 
  init: function(element){
 
    this.element = (element && element.nodeType == 1)? element: document;
  },
 
  /**
   * 添加事件监听
   * 
   * @param {String} type 监听的事件类型
   * @param {Function} callback 回调函数
   */
 
  add: function(type, callback){
 
    var _that = this;
     
    if(_that.element.addEventListener){
       
      /**
       * @supported For Modern Browers and IE9+
       */
       
      _that.element.addEventListener(type, callback, false);
       
    } else if(_that.element.attachEvent){
       
      /**
       * @supported For IE5+
       */
 
      // 自定义事件处理
      if( type.indexOf('custom') != -1 ){
 
        if( isNaN( _that.element[type] ) ){
 
          _that.element[type] = 0;
 
        } 
 
        var fnEv = function(event){
 
          event = event ? event : window.event
           
          if( event.propertyName == type ){
            callback.call(_that.element);
          }
        };
 
        _that.element.attachEvent('onpropertychange', fnEv);
 
        // 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定
        if( !_that.element['callback' + callback] ){
     
          _that.element['callback' + callback] = fnEv;
 
        }
    
      // 标准事件处理
      } else {
    
        _that.element.attachEvent('on' + type, callback);
      }
       
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element['on' + type] = callback;
 
    }
 
    return _that;
  },
 
  /**
   * 移除事件监听
   * 
   * @param {String} type 监听的事件类型
   * @param {Function} callback 回调函数
   */
   
  remove: function(type, callback){
 
    var _that = this;
     
    if(_that.element.removeEventListener){
       
      /**
       * @supported For Modern Browers and IE9+
       */
       
      _that.element.removeEventListener(type, callback, false);
       
    } else if(_that.element.detachEvent){
       
      /**
       * @supported For IE5+
       */
       
      // 自定义事件处理
      if( type.indexOf('custom') != -1 ){
 
        // 移除对相应的自定义属性的监听
        _that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
 
        // 删除储存在 DOM 上的自定义事件的回调
        _that.element['callback' + callback] = null;
      
      // 标准事件的处理
      } else {
      
        _that.element.detachEvent('on' + type, callback);
      
      }
 
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element['on' + type] = null;
       
    }
 
    return _that;
 
  },
   
  /**
   * 模拟触发事件
   * @param {String} type 模拟触发事件的事件类型
   * @return {Object} 返回当前的 Kjs 对象
   */
   
  trigger: function(type){
 
    var _that = this;
     
    try {
        // 现代浏览器
      if(_that.element.dispatchEvent){
        // 创建事件
        var evt = document.createEvent('Event');
        // 定义事件的类型
        evt.initEvent(type, true, true);
        // 触发事件
        _that.element.dispatchEvent(evt);
      // IE
      } else if(_that.element.fireEvent){
         
        if( type.indexOf('custom') != -1 ){
 
          _that.element[type]++;
 
        } else {
 
          _that.element.fireEvent('on' + type);
        }
    
      }
 
    } catch(e){
 
    };
 
    return _that;
       
  }
}
 
Ev.fn.init.prototype = Ev.fn;
 
})( window );

テスト ケース 1 (カスタム イベント テスト)

// 测试用例1（自定义事件测试）
// 引入事件机制
// ...
// 捕捉 DOM
var testBox = document.getElementById('testbox');
// 回调函数1
function triggerEvent(){
    console.log('触发了一次自定义事件 customConsole');
}
// 回调函数2
function triggerAgain(){
    console.log('再一次触发了自定义事件 customConsole');
}
// 封装
testBox = $(testBox);
// 同时绑定两个回调函数，支持链式调用
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);

完全なコードはデモにあります。

デモを開いた後、コンソールで testBox.trigger('customConsole') を呼び出してカスタム イベントをトリガーします。次に、testBox.remove('customConsole',triggerAgain) と入力することがわかります。モニターを削除し、testBox.trigger('customConsole') を使用してカスタム イベントをトリガーします。つまり、この時点で最後のモニターが正常に削除されたことがわかります。イベントメカニズムは正常に動作します。

上記の内容は、JavaScript でカスタム イベントを記述するための基本的な知識です。

関連する推奨事項:

JavaScriptでカスタムイベントのコード例を実装する方法の詳細な説明

カスタムイベントを正常に解決し、反復リクエストのバグを解決しました

JavaScriptでカスタムイベントを作成する方法

javascript カスタムイベント

javascript カスタムイベントの事前学習_JavaScriptスキル

以上がJavaScript でカスタム イベントを作成するための基本的な知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。