如何實現JS主動觸發事件

function triggerMouseOver(selector) {
  const targetElement = document.querySelector(selector);
  if (document.createEvent) {
    const event = document.createEvent('MouseEvents');
    event.initEvent('mouseover', true, false);
    targetElement.dispatchEvent(event);
  } else if (document.createEventObject) {
    //兼容IE
    targetElement.fireEvent('onmouseover');
  }
}

function triggerFocus(selector) {
  const targetElement = document.querySelector(selector);
  if (document.createEvent) {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('focus', true, false);
    targetElement.dispatchEvent(event);
  } else if (document.createEventObject) {
    //兼容IE
    targetElement.fireEvent('focus');
  }
}

1. document.createEvent（eventType）

參數：eventType 共5種類型：

eventType	包含事件
Events	包括所有的事件
HTMLEvents	abort, blur, change, error, focus, load, reset, resize, scroll,select, submit, unload
UIEevents	DOMActivate, DOMFocusIn, DOMFocusOut, keydown, keypress, keyup
MouseEvents	click, mousedown, mousemove, mouseout, mouseover, mouseup
MutationEvents	DOMAttrModified, DOMNodeInserted, DOMNodeRemoved, DOMCharacterDataModified, DOMNodeInsertedIntoDocument, DOMNodeRemovedFromDocument, DOMSubtreeModified

document.createEvent后必須初始化才能觸發

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

// 在目標元素上觸發事件, 需要注意的是在IE 5.5+版本上請用fireEvent方法
targetElement.dispatchEvent( event )

舉個栗子（主動觸發 mouseover 事件）

1. 主動觸發 click 事件

// 使用通用類型創建 click 事件
const event = document.createEvent('Events');
event.initEvent( 'click', true, false );
const targetElement = document.getElementById('someID');
targetElement.dispatchEvent(event);

// 使用通 MouseEvents 創建 click 事件
const event = document.createEvent('MouseEvents');
event.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
const targetElement = document.getElementById('someID');
targetElement.dispatchEvent(event);

2. 主動觸發 mouseover 事件, 並考慮對 IE 的兼容

const targetElement = document.getElementById('someID');

if ( document.createEvent ) {
    const event = document.createEvent('MouseEvents');
    event.initEvent( 'mouseover', true, false );
    targetElement.dispatchEvent(event);
}else if ( document.createEventObject ) {
    //兼容IE
    targetElement.fireEvent('onmouseover');
}

 

作者：mocobk
鏈接：https://www.jianshu.com/p/7b92cc91f9cd
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。