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
接收自定义事件数据