DOM 이벤트 시뮬레이션
세 단계 :
첫째, 에 의해 document.createEvent()이벤트 개체를 만드는 방법, 하나 개의 매개 변수 만들려는 이벤트 유형의 캐릭터 라인 표현 수신 :
UIEvents (UIEvent를 DOM3에서) 마우스와 키보드 이벤트;
MouseEvent는 (된 MouseEvent DOM3에서) 마우스 이벤트;
MutationEvents (MutationEvent DOM3에서) 변경 이벤트;
HTMLEvents (해당하는 이벤트 DOM3) HTML 이벤트 없다
둘째, 당신은 이벤트 객체를 만든 후도 초기화 할 수있는 이벤트에 관련된 정보를 사용해야합니다. 각 유형의 오브젝트가 특정 이벤트 방법을 보유하고, 상기 이벤트 객체를 초기화하는 적절한 데이터를 전달할 수있다. 사용 event.init......()방법을 같은 라인.
마지막은 트리거 이벤트입니다. 이것은의 사용을 필요로 dispatchEvent()트리거되는 이벤트 객체를 나타내는 하나 개의 매개 변수를받을 방법을.
마우스 이벤트를 시뮬레이션
첫째, 마우스 이벤트 객체 메소드의 CreateEvent에 () 수신 MouseEvent는을 만들 방법은 (15) 정보를 수신, initMouseEvent의 객체를 () 반환합니다 :
유형 (문자열) : 이벤트 유형, 예 "를 클릭하십시오"와 같은;
버블 (부울 값) : 기포 여부;
캔슬 (부울 값) : 취소 할 것인지;
보기 (추상보기) : 보통 이벤트와 관련된 뷰
document.defaultView;상세 (정수) : 일반적으로 0, 일반적으로 단지 이벤트 핸들러;
screenX (정수) : X는 화면 이벤트의 상대 좌표
screenY (정수);
는 clientX (정수) : X는 뷰포트 이벤트의 상대 좌표
clientY로 (정수);
ctrlKey (부울 값) : 기본이 거짓 Ctrl 키를 눌렀습니까;
11. Alt 키 (부울)
12 shiftKey (부울)
13. metakey (부울)
(14)의 버튼 (정수), 디폴트는 0 가압 된 마우스 버튼을 나타냄]
15. 상기 relatedTarget (객체) 이벤트와 연관된 객체를 나타냅니다. 때 아날로그 마우스 오버와 마우스를 이동하면 일반적으로 만 사용.
마지막으로, 이벤트 객체는, dispatchEvent () 메서드에 전달 기억 해요.
아날로그 버튼의 클릭 이벤트 :
//模拟click事件
//获取btn
var btn = document.querySelector("#btn");
//创建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick = function () {
console.log("hello");
}
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;
또한,이 생성자 "된 MouseEvent"를 사용하는 것이 좋습니다 :
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
키보드 이벤트를 시뮬레이션
첫째, 마우스 이벤트 객체 메소드의 CreateEvent에 () 수신 KeyboardEvents를 생성하는 방법은 initKeyEvent ()의 객체를 반환, 다음 매개 변수를받습니다 :
유형 (문자열) : 이벤트의 형태 등등 "를 keyDown"등을 유발하는 단계;
기포 (부울 값)의 여부를 이벤트 버블해야 나타냄;
취소 할 (부울 값) : 나는 취소 할 수;
보기 (추상보기) : 이벤트와 연관된 볼 수 있습니다. 일반적으로
document.defaultView;키 (부울) : 키 코드를 누르면는 결합을 나타내고;
(정수) 위치 : 키를 누르면 위치를 나타냅니다. 0 주 키보드 1 왼쪽으로, 오른쪽으로 2, 가상 키보드 (4), 상기 손잡이 (5) (3)는 숫자 키패드이고;
수식 (문자열) 이러한 "교대"와 같은 보조 키의 공간 분리 된리스트;
반복 (정수) : 키가 연속으로 누른 횟수;
DOM3 단계는 키 누름 이벤트의 사용을 촉진하지 않기 때문에, 당신은 단지 시뮬레이션를 keyDown 이벤트의 keyup이 기술을 사용할 수 있습니다 :
var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
textbox.dispatchEvent(event);
파이어 폭스에서 CreateEvent에 ()를 호출하고 "한 KeyEvents는"당신이 키보드 이벤트를 생성 할 수 있습니다 통과하는 initKeyEvent () 메소드를 포함 할 경우 반환 된 객체, 수신기 매개 변수 :
유형;
거품;
취소 할;
전망;
ctrlKey;
Alt 키;
shiftKey;
metaKey;
키 코드;
charCode 값;
또한,이 생성자 "KeyboardEvent입니다"를 사용하는 것이 좋습니다
기타 이벤트 시뮬레이션
거의 변화 이벤트 이벤트를 사용하지 않는 브라우저와 HTML, initMutationEvent (); 변경 이벤트를 시뮬레이션하기 위해, 당신은 CreateEvent에 ( "MutationEvent")를 사용할 수 있습니다 initEvent (); HTML을 이벤트를 시뮬레이션하기 위해, 당신은 CreateEvent에를 ( "HTMLEvents")를 사용할 수 있습니다;
사용자 정의 DOM 이벤트
캔슬; 상세히 입력] 거품; initCustomEvent ()에있어서, 상기 수신 파라미터; CreateEvent에 ( "맞춤 이벤트")을
var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");
btn.onclick = function () {
console.log(event.detail);
};
btn.dispatchEvent(evt);
IE의 이벤트 시뮬레이션
전화 document.createEventObject(), 방법을 이벤트 객체를 생성하고 대상에 필요한 정보, 마지막 호출대로 FireEvent () 메소드를 지정, 두 개의 매개 변수를 : 이벤트 핸들러 및 이벤트 객체의 이름을 :
var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;
btn.fireEvent("onclick",evt);