JavaScript 의 addEventListener 사용자 정의 이벤트

JavaScript 의 addEventListener 사용자 정의 이벤트
js 사건 에서 우리 가 먼저 생각 하 는 것 은 click, dblclick, mouseover, mouseout, mouseenter, mouseleave, mousedown, mouseup, mousemove, wheel, contextmenu (마우스 오른쪽 단 추 를 클릭 할 때) 등 자주 사용 하 는 사건 들 로 제3자 에 게 sdk 를 제공 할 때 이런 미리 정 의 된 사건 들 은 때때로 우리 의 수 요 를 만족 시 키 지 못 할 때 가 있다.제3자 sdk 의 운영 환경 이 알 수 없 기 때문에 사건 충돌 문 제 를 초래 할 수 있 습 니 다. 이 럴 때 저 희 는 사건 이 발생 하지 않도록 사용자 정의 해 야 합 니 다.document. createEvent 는 이 벤트 를 만 드 는 데 사 용 됩 니 다. DOM Level 3 은 이벤트 유형 을 많이 증가 시 킵 니 다. 개인 적 으로 가장 유용 한 것 은 사용자 정의 이벤트 라 고 생각 합 니 다.DOM 요 소 를 위 한 사용자 정의 이벤트 생 성 절차:

1、    ：var ev = document.createEvent('CustomEvent');
2、     ：ev.initCustomEvent('       ', false(      ), false(      ),args)
3、 DOM      ：element.addEventListener('       ',fn,false)
4、  (  )     ：element.dispatchEvent(ev)

설명 1: createEvent (eventType)

  ：eventType  5   ：
Events ：       . 
      HTMLEvents：   'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 
                                'submit', 'unload'.   
      UIEvents ：   'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
                                   MouseEvents. 
      MouseEvents：   'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'. 
      MutationEvents:   'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 
                                  'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 
                                  'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'. 

설명 2: createEvent 후 초기 화 해 야 합 니 다. 5 가지 대응 하 는 초기 화 방법 을 자주 사용 합 니 다.

HTMLEvents      Events：
        initEvent( 'type', bubbles, cancelable )
UIEvents ：
                  initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
MouseEvents： 
                  initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, 
                  clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
MutationEvents ：
                  initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue, 
                  attrName, attrChange ) 

설명 3: 초기 화 완료 후 필요 한 이벤트 가 발생 할 수 있 습 니 다. targetObj. dispatchEvent (event)

 targetObj   event    
       IE 5.5+     fireEvent  ，          

사용자 정의 이벤트 코드 예제:

    
    
    
 
    


         ，    1
         ，    2

    
         
    





    var event = document.createEvent('HTMLEvents');
    //    testEvent  
    event.initEvent('testEvent', false, true);

    function handleSend(data){
        event.data = {
            data
        };
        //        
        window.dispatchEvent(event);
        console.log('1234')
    }

    window.addEventListener('testEvent', function(obj){
        console.log('receive',obj.data);
        document.getElementById('receive').innerHTML = JSON.stringify(obj.data)

    });