실제 애플리케이션 개발에서는 JS 모듈 이벤트를 자주 사용하지만 때로는 클릭 이벤트와 같은 문제가 발생할 수 있습니다. 간단한 예로 양식 외부의 "제출" 버튼을 클릭하여 양식을 제출합니다. 코딩해보자.
HTML:
다음과 같이 코드 코드를 복사합니다.
<h3> "Submit"을 클릭하시면 테스트 제출 버튼의 클릭 이벤트도 발생됩니다. </h3>
<button id="btn">제출</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" 읽기 전용/>
<input id="subtn" type="submit" value="아직 제출하려면 이 버튼을 클릭하지 마세요." onclick="alert('제출했습니다');"/>
</form>
자바스크립트:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var sub = document.getElementById("subtn");
var btn = document.getElementById("btn");
//일반 메소드
btn.onclick = 함수() {
하위.클릭();
}
</script>
테스트 결과 IE, FF, Chrome, Opera, Safari에서는 문제가 없으며 정상적으로 Form 제출이 가능합니다.
그러나 실제 디자인에서는 제출 버튼을 더 보기 좋게 만들기 위해 빌더가 종종 태그를 사용하여 버튼을 처리하고 배경 이미지를 추가하여 버튼을 시뮬레이션합니다. .Form에서는 html만 수정합니다.
HTML:
다음과 같이 코드 코드를 복사합니다.
<h3> "Submit"을 클릭하시면 테스트 제출 버튼의 클릭 이벤트도 발생됩니다. </h3>
<button id="btn">제출</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" 읽기 전용/>
<!--<input id="subtn" type="submit" value="아직 제출하려면 이 버튼을 클릭하지 마세요" onclick="alert('제출했습니다');"/> -->
<a id="subtn" href="javascript:;" onclick="alert('여기에서 양식을 제출하는 메소드를 호출하세요.')">제출 버튼 시뮬레이션</a>
</form>
자바스크립트:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var sub = document.getElementById("subtn");
var btn = document.getElementById("btn");
//일반 메소드
btn.onclick = 함수() {
하위.클릭();
}
</script>
실행 후 문제가 발생했습니다.IE, FF, 오페라는 모두 정상인데 크롬, 사파리는 정상적으로 실행이 되지 않더군요.. 나중에 온라인으로 검색해 보니 a 라벨에 버튼과 동일한 onclick() 이벤트가 없는 것을 발견했습니다. 해결책은 IE와 FF가 서로 다른 논리를 작성하는 것입니다. JS 코드는 다음과 같습니다.
자바스크립트:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var sub = document.getElementById("subtn");
var btn = document.getElementById("btn");
//일반 메소드
btn.onclick = 함수() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} 또 다른 {
var e = document.createEvent('MouseEvent');
e.initEvent('클릭', false, false);
sub.dispatchEvent(e);
}
}
</script>
이 시점에서 문제는 해결되었습니다. 이 문제는 매우 간단하지만 모든 사람이 쉽게 무시할 수 있도록 게시했습니다.
문법:
createEvent(이벤트 유형)
매개변수 설명
eventType은 얻으려는 Event 객체의 이벤트 모듈 이름입니다. 유효한 이벤트 유형 목록은 설명 섹션을 참조하세요.
반환 값
지정된 유형의 새로 생성된 Event 객체를 반환합니다.
던지다
구현이 필수 이벤트 유형을 지원하는 경우 이 메소드는 NOT_SUPPORTED_ERR 코드와 함께 DOMException을 발생시킵니다.
설명하다
이 메소드는 eventType 매개변수로 지정된 새 이벤트 유형을 생성합니다. 이 매개변수의 값은 생성될 이벤트 인터페이스의 이름이 아니라 해당 인터페이스를 정의하는 DOM 모듈의 이름입니다.
다음 표에는 eventType에 대한 유효한 값과 각 값에 의해 생성되는 이벤트 인터페이스가 나열되어 있습니다.
매개변수 이벤트 인터페이스 초기화 방법
HTML이벤트 HTML이벤트 iniEvent()
마우스이벤트 MouseEvent iniMouseEvent()
UI이벤트 UIEvent iniUIEvent()
이 메소드를 이용하여 Event 객체를 생성한 후에는 위 표의 초기화 메소드를 이용하여 객체를 초기화해야 합니다. 초기화 방법에 대한 자세한 내용은 이벤트 개체 참조를 참조하세요.
이 메소드는 실제로 Document 인터페이스가 아니라 DocumentEvent 인터페이스에 의해 정의됩니다. 구현이 Event 모듈을 지원하는 경우 Document 객체는 DocumentEvent 인터페이스를 구현하고 이 메서드를 지원합니다.