HTML 파일에 배치된 Js 위치의 차이에 대한 설명-HTML 튜토리얼-php.cn

HTML 파일에 배치된 Js 위치의 차이에 대한 설명

高洛峰

풀어 주다： 2017-03-14 18:11:29

원래의

1538명이 탐색했습니다.

이 질문은 초보자에게 항상 혼란스럽습니다. 먼저 js가 HTML에서 어디에 배치될 수 있는지, 즉 head와 body를 이해하세요. 대부분의 사람들은 그것을 머리에 넣습니다. 배울때 헷갈리게 따라하고 머리속에 집어넣었는데 왜일까요? 오늘은 이 두 곳의 차이점에 대해 이야기해보겠습니다.
먼저 HTML 코드를 살펴보겠습니다.

<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="test.js"></script> 

</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn">按钮</button> 

</body> 
</html>

로그인 후 복사

rrree

이 코드가 헤드에 있으면 실행되지 않습니다. 왜?
HTML의 실행순서에 관한 내용입니다. 좀 더 정확하게 말하면 HTML의 실행순서가 아니라 js의 실행순서입니다. 위에서 까지 HTML을 실행하면 test.js 파일이 들어갑니다. 이전 문장은 실행되지 않습니다. 즉, 함수로 래핑된 문장은 실행되지 않습니다. 페이지로 이동하여 요소 ID가 btn인 요소를 가져옵니다. 하지만 현재 HTML 페이지가 로드되지 않았습니다. ID가 btn인 요소를 가져오는 것은 확실히 불가능합니다. 오류가 보고됩니다. 이때 어떤 분이

var test = function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
} 

document.getElementById("btn").onclick=test;

로그인 후 복사

와 같은 코드로 바꿀 수 있다고 하더군요. 그런데 이렇게 쓰는 것은 앞에 쓰는 것만큼 좋지 않습니다.
위 [document.getElementById("btn").onclick=test;] 테스트에 괄호가 없다는 사실을 알고 계셨나요? 그렇다면 [test()]로 변경하면 어떻게 될까요? >

HTML 파일에 배치된 Js 위치의 차이에 대한 설명 결과는 그림과 같이 페이지가 로딩되고, 버튼을 클릭해도 아무런 반응이 없습니다. js 코드를 다음과 같이 변경합니다.

document.body.onload = function(){ 
document.getElementById("btn").onclick=test; 
};

로그인 후 복사

페이지가 로드되면 여전히 위와 같습니다. 버튼을 클릭하면 "aaaa"라는 내용이 포함된 상자가 나타납니다.

함수

에서 반환된 값입니다. 즉, 괄호를 추가하면 이벤트가 발생하지 않아도 함수가 실행됩니다. 이벤트가 발생하면 함수의 반환값이 실행됩니다. 괄호를 포함하지 않으면 이벤트가 발생한 경우에만 함수가 실행됩니다. html 이벤트
트리거
, 콘텐츠에는 어떤 내용을 쓸 수 있나요? •예를 들어 onclick="";큰따옴표 안에 쓸 수 있는 것은 무엇인가요? 일반적으로 onclick="test();"와 같은 함수를 작성할 수 있습니다. 이 외에 또 무엇을 쓸 수 있나요? 이 세미콜론을 생략할 수 있나요? •위의 js 코드를 보면 모든 줄에 세미콜론이 있습니다. 세미콜론의 목적은 명령문을 난독화하는 것입니다. 이는 onclick에서 js 코드를 작성할 수 있음을 의미합니다. 다음과 같이 시도해 보세요.

var test=function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
return function(){ 
alert("aaaa"); 
}; 
} 

document.getElementById("btn").onclick=test();

로그인 후 복사

•실행 결과는 다음과 같습니다.

HTML 파일에 배치된 Js 위치의 차이에 대한 설명 실행 가능하다는 의미입니다. 이는 단지 함수 이름 이상의 것을 입력할 수 있음을 보여줍니다.

이벤트 바인딩 방식?
•이벤트 바인딩에는 일반적으로 사용되는 두 가지 방법이 있습니다. 하나는 앞서 소개한 것처럼 이벤트에 js 코드를 추가하는 것입니다. 예: onclick="test();". 이 바인딩 방식의 단점은 아티스트가 이미 작성한 코드를 수정해야 한다는 것입니다.
• 또 다른 방법은 코드 작성을 시작할 때 ID를 사용하는 것입니다. 아티스트는 각 요소에 ID를 추가하기만 하면 됩니다. HTML 코드를 수정할 필요가 없습니다.

위 내용은 HTML 파일에 배치된 Js 위치의 차이에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!