JavaScript中的addEventListener自定义事件

JavaScript中的addEventListener自定义事件

在js事件中,我们首先想到的是click、dblclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove、wheel、contextmenu(点击鼠标右键时)这些常用的事件,在给第三方提供sdk使用时,这些预定义的事件有时无法满足我们的需求。
由于第三方sdk运行环境未知,而且可能会导致事件冲突的问题,这时候就需要我们自定义事件避免问题的发生。
document.createEvent用于创建事件,DOM Level 3增加很多事件类型,个人觉得其中最有用的是CustomEvent自定义事件。
为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方法,还是浏览兼容的考虑 

自定义事件代码示例:




    
    
    
 TEST
    


点击触发自定义事件,传递参数1
点击触发自定义事件,传递参数2

接收自定义事件数据

你可能感兴趣的:(javascript)