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);

여기서 옵션은 다음과 같습니다. be:

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

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

내장 이벤트는 특정 작업에 따라 브라우저에 의해 실행되는 반면, 맞춤 이벤트는 수동으로 실행되어야 합니다. 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" ] );
});

JavaScript 사용자 정의 이벤트는 클릭, 제출 등과 같은 표준 이벤트와 다릅니다. 사용자 정의 이벤트. 맞춤 이벤트의 이점을 설명하기 전에 맞춤 이벤트의 예를 살펴보겠습니다.

<p id="testBox"></p>

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

특정 효과의 경우 데모를 보고 콘솔에 obj.dispatchEvent(evt)를 입력할 수 있습니다. 이벤트가 트리거되었습니다."라는 메시지가 콘솔에 출력되면 사용자 정의 이벤트가 성공적으로 트리거되었음을 의미합니다.

이 과정에서 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')를 사용하여 사용자 정의 이벤트를 트리거하면 콘솔이 프롬프트만 출력하는 것을 볼 수 있습니다. 즉, 이 시점에서 모든 기능이 성공적으로 제거됩니다. 이벤트 메커니즘이 정상적으로 작동합니다.

위 내용은 JavaScript에서 사용자 정의 이벤트 코드 예제를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!