JavaScript로 맞춤 이벤트 작성에 대한 기본 지식

사용자 정의 이벤트는 브라우저별 동작(클릭, 마우스 오버, 제출, 키다운 및 기타 이벤트와 유사)이 있는 이벤트와 다릅니다. 이벤트 이름은 원하는 대로 정의할 수 있으며 특정 방법을 통해 추가, 트리거 및 삭제할 수 있습니다. 이 기사에서는 JavaScript로 사용자 정의 이벤트를 작성하는 기본 사항에 대해 설명합니다.

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

이벤트를 직접 사용자 정의하고 이벤트 생성자를 사용합니다.

var event = new Event('build');

// 이벤트를 수신합니다.
elem.addEventListener('build', function (e) { ... }, false);

// 이벤트를 전달합니다.
elem.dispatchEvent(event);

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

var myEvent = new CustomEvent(이벤트 이름, 옵션);

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

{
세부 정보: {
...
},
거품: true,
취소 가능: 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);

커스텀 이벤트 사용 시 호환성에 주의해야 합니다. 문제가 발생하며 jQuery를 사용하는 것이 훨씬 간단합니다.

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

위 내용은 JavaScript로 맞춤 이벤트를 작성하는 기본 지식입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장사항:

JavaScript에서 맞춤 이벤트 코드 예시를 구현하는 방법에 대한 자세한 설명

맞춤 이벤트를 성공적으로 해결하고 반복 요청의 BUG를 해결했습니다.

JavaScript에서 맞춤 이벤트를 만드는 방법

javascript 커스텀 이벤트

javascript 커스텀 이벤트에 대한 사전 연구_javascript 기술

위 내용은 JavaScript로 맞춤 이벤트 작성에 대한 기본 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!