JavaScript_기본 지식으로 커스텀 이벤트 작성에 대한 자세한 설명

보다 유연한 개발을 위해 이벤트를 사용자 정의할 수 있습니다. 이벤트 기반 개발에는 많은 장점이 있습니다(나중에 설명).

커스텀 이벤트와 관련된 함수로는 Event, CustomEvent, dispatchEvent 등이 있습니다.

이벤트를 직접 맞춤설정하려면 이벤트 생성자를 사용하세요.

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

CustomEvent는 보다 고도로 맞춤화된 이벤트를 생성하고 일부 데이터를 첨부할 수도 있습니다.

var myEvent = new CustomEvent(eventname, options);

옵션은 다음과 같습니다.

{
  detail: {
    ...
  },
  bubbles: true,
  cancelable: false
}

Detail은 일부 초기화 정보를 저장할 수 있으며 트리거 시 호출될 수 있습니다. 다른 속성은 이벤트에 버블링 기능 등이 있는지 여부를 정의합니다.

내장 이벤트는 특정 작업에 따라 브라우저에 의해 실행되는 반면, 맞춤 이벤트는 수동으로 실행되어야 합니다. dispatchEvent 함수는 이벤트를 트리거하는 데 사용됩니다.

element.dispatchEvent(customEvent);

위 코드는 customEvent 이벤트가 요소에서 트리거됨을 나타냅니다. 함께 사용:

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

맞춤 이벤트를 사용하려면 호환성 문제에 주의해야 하지만 jQuery를 사용하는 것이 훨씬 간단합니다.

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});

// 触发事件
$(element).trigger('myCustomEvent');
此外，你还可以在触发自定义事件时传递更多参数信息：

$( "p" ).on( "myCustomEvent", function( event, myName ) {
 $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

자바스크립트 맞춤 이벤트는 클릭, 제출 등의 표준 이벤트와는 다른 맞춤 이벤트입니다. 맞춤 이벤트의 이점을 설명하기 전에 맞춤 이벤트의 예를 살펴보겠습니다.

<div id="testBox"></div>

// 创建事件
var evt = document.createEvent('Event');
// 定义事件类型
evt.initEvent('customEvent', true, true);
// 在元素上监听事件
var obj = document.getElementById('testBox');
obj.addEventListener('customEvent', function(){
  console.log('customEvent 事件触发了');
}, false);

특정 효과의 경우 데모를 볼 수 있습니다. 콘솔에 obj.dispatchEvent(evt)를 입력하면 콘솔에 "customEvent 이벤트가 트리거됨"이 출력되어 사용자 정의 이벤트가 성공적으로 트리거되었음을 알 수 있습니다.

이 과정에서 createEvent 메소드는 빈 이벤트 evt를 생성한 후 initEvent 메소드를 사용하여 이벤트 유형을 합의된 맞춤 이벤트로 정의한 후 해당 요소를 모니터링한 다음 dispatchEvent를 사용하여 이벤트를 트리거합니다.

예, 맞춤 이벤트의 메커니즘은 일반 이벤트의 메커니즘과 동일합니다. 이벤트를 수신하고, 콜백 작업을 작성하고, 이벤트가 트리거된 후 콜백을 실행합니다. 그러나 차이점은 사용자 정의 이벤트가 트리거될 때 우리가 완전히 제어한다는 것입니다. 이는 일종의 JavaScript 분리가 달성됨을 의미합니다. 사용자 정의 이벤트 메커니즘을 사용하면 관련되어 있지만 논리적으로 복잡한 여러 작업을 유연하게 제어할 수 있습니다.

물론, 위의 코드가 IE 하위 버전에서는 적용되지 않는다고 짐작하셨을 수도 있습니다. 실제로 IE8 이하 버전에서는 createEvent()가 지원되지 않지만 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')를 사용하여 사용자 정의 이벤트를 트리거하면 콘솔이 프롬프트만 출력하는 것을 볼 수 있습니다. 즉, 이 시점에서 마지막 리스너가 성공적으로 제거됩니다. 이벤트 메커니즘의 모든 기능이 정상적으로 작동합니다.