JavaScript 이벤트 핸들러가 작동하지 않습니다.

두 가지 이벤트 핸들러를 다른 메소드 (하나는 document.getElementById, 다른 하나는 인라인 CSS)를 사용하여 추가하려고합니다. 내가 겪고있는 문제는 JS 함수에 대한 인라인 호출 만 작동한다는 것입니다. 다양한 예제를 온라인에서보고 난 후에도 문제를 찾을 수 없습니다. 미리 감사드립니다. JavaScript 이벤트 핸들러가 작동하지 않습니다.

html로 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Dynamic Button</title> 
</head> 
<body> 
    <script type="text/javascript" src="button.js"></script> 
    <button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button> 
</body> 
</html>

자바 스크립트

function DisplayAlert1(){ 
    window.alert("Alert 1"); 
} 

function DisplayAlert2(){ 
    window.alert("Alert 2"); 
} 

var AButtonJS = document.getElementById("AButton"); 
AButtonJS.onclick = DisplayAlert1;

출처

2014-06-19 BLK Horizon

나를 위해 작동합니다 : http://jsfiddle.net/FE6Q3/ 'DisplayAlert2()'는 HTML에 있지만 초기화 스크립트로 인해'DisplayAlert1()'로 덮어 쓰기됩니다. dom이로드 된 후 실행됩니까? (최소한 HTML에서'AButton' 이후에?) – ps2goat

*** onclick *** 속성에 대한 할당이 *** onmouseover *** 리스너의 값을 대체하는 방법은 무엇입니까? – RobG

귀하의 문제는 스크립트 요소는 버튼 요소가 DOM에 존재 전에 실행 (거의 확실)로드된다는 점이다. 자신의 위치를 바꿔 그것을 잘 작동합니다 :로드 이벤트 후에 호출해야 DOM을 수정

<button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button> 
<script src="button.js"></script>

스크립트, 또는 DOM 준비, 또는 그들이 DOM 후에 실행되도록 BODY 태그를 닫기 바로 직전에 배치 로드되었습니다.

덧붙여 말하면, 스크립트 elemetns에 대한 유형 속성은 스크립트가 javascript가 아닌 경우에만 필요합니다. 또한 대문자로 시작하는 함수 이름은 일반적으로 생성자 용으로 예약되므로 함수를 호출하십시오. displayAlert1 및 displayAlert2.

출처

2014-06-19 04:48:13 RobG

JavaScript 이벤트 핸들러가 작동하지 않습니다.

답변

관련 문제