html에서 자바스크립트 코드를 head에 넣지 않고 body 끝에 넣는 이유는?
요약 : 페이지 로딩을 조금 더 빠르게 하기 위해서.
웹브라우저가 HTML 문서를 해석(Parsing) 할 때 <script> 태그를 만나면 그 안에 있는 JavaScript 의 처리가 끝날 때 까지 다른 HTML의 해석을 멈추기 때문에 사용자 입장에서 HTML 페이지가 화면에 다 그려지기까지 더 오래걸리게 된다. 그래서 우선 CSS, HTML 해석이 먼저 완료되고 나서 JavaScript 가 수행하는 것이 더 빠르기에 HTML 문서의 마지막(= </body> 직전)에 두는 것을 권한다.
제이쿼리 이벤트
$(function() { 내용 });
jQuery의 이벤트 처리 방식은 객체에 직접 이벤트를 등록하는 것이다. document가 ready되면 콜백 함수의 내용을 실행하는 코드로 ready 되었다는 것은 DOM 로딩이 완료되었다는 이야기.
jQuery 마우스 이벤트
|
이벤트 |
설명 |
|
click |
노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생 |
|
dblclick |
노드를 더블 클릭 했을 때에 발생 |
|
hover |
mouseenter와 mouseleave 이벤트를 한번에 bind한다. |
|
mousedown |
노드 영역에서 마우스를 눌렀다가 떼었을 때에 발생 |
|
mouseenter |
노드에 마우스가 진입했을 때에 발생(자식노드에서는 이벤트를 감지 못함) |
|
mouseleave |
마우스가 노드에서 벗어났을 때에 발생 |
|
mousemove |
노드 영역에서 마우스를 움직였을 때에 발생 |
|
mouseout |
노드에서 마우스 포인터가 떠났을 때에 발생 |
|
mouseover |
노드 영역에서 마우스를 올려놓았을 때 발생 (내부노드까지 이벤트를 감지) |
|
mouseup |
마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생 |
|
toggle |
click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행 |
jQuery 문서로딩 이벤트
|
이벤트 |
설명 |
|
ready |
해당 페이지가 로딩되었을 때에(처음 읽힐 때에) 발생 |
|
unload |
해당 페이지를 빠져나갈 때에 발생 |
실습하기 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery - 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// $(document).ready(function(){
// $('#btn1').click(function(){
// alert('버튼이 클릭되었어요')
// });
// }); //Ready : html을 다 읽고 제이쿼리를 읽는다.
</script>
</head>
<body>
<header>
<h1>jquery시작하기</h1>
</header>
<div id="container">
<h3>Mouse Events</h3>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<button id="btn5">Button 5</button>
<p id="para1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad itaque similique accusantium velit optio, recusandae beatae numquam quasi magni aut illum necessitatibus voluptas ullam ab error aspernatur distinctio hic repellat.</p>
<h1 id="coords"></h1>
</div>
<script>
// $('#btn1').click(function(){
// alert('Button Clicked!');
// });
$(document).ready(function(){ //여기 레디는 혹시나
$('#btn1').on('click', function(){
$('#para1').hide();
});
$('#btn2').on('click', function(){
$('#para1').show();
});
// hover => on( 'mouseenter' / 'mouseleave' )
$('#btn3').on('mouseenter', function(){
$('#para1').toggle(); //1,2를 합친 것
});
$('#btn4').on('mousedown', function(){
$('#para1').toggle(); //누를 동안
});
$('#btn4').on('mouseup', function(){
$('#para1').toggle();
});
$('#btn5').on('click', function(e){
console.log(e.currentTarget.id);
});
// 'mousemove' : 마우스가 움직이는 좌표를 보여준다.
$(document).on('mousemove', function(e){
$('#coords').html(`Coords : Y : ${e.clientY} X : ${e.clientX}`); //html전체를 바꿈
});
$('#btn1').on('click', function(e){
$('h3').text('버튼이 눌러졌습니다.'); //text부분만 바꿈
});
});
</script>
</body>
</html>
jQuery Form 이벤트
|
이벤트 |
설명 |
|
blur |
노드에서 포커스가 떠날 때에 발생 |
|
change |
노드의 값이 변경될 때에 발생 |
|
focus |
노드가 포커스를 획득했을 때에 발생 |
|
select |
유저가 텍스트를 선택했을 때에 발생 |
|
submit |
폼의 내용을 전송할 때에 발생 |
jQuery 키보드 이벤트
|
이벤트 |
설명 |
|
keydown |
해당 영역에서 키보드를 눌렀을 때에 발생 |
|
keypress |
해당 영역에서 키보드를 계속 누르고 있을 때에 발생 |
|
keyup |
해당 영역에서 키보드를 눌렀다가 떼었을 때 발생 |
jQuery 웹 브라우저 이벤트
|
이벤트 |
설명 |
|
resize |
웹브라우저 윈도우 사이즈의 변화가 있을 때 |
|
scroll |
스크롤이 움직일 때에 발생 |
더 다양한 이벤트는 ...
이벤트 참조
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스텀 필드 또는 함수를 가질수도 있습니다. 이벤트는 렌더링 모델에서 기본적인 사용자 인터렉션부터 발생한 것에대한 자동 알림까지 모든 것을 나타낼 수 있습니다.
developer.mozilla.org
실습하기 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery - 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header>
<h1>jquery 폼 이벤트</h1>
</header>
<div id="container">
<form id="form" action="">
<label>Name</label><br>
<input type="text" id="name" name="name">
<br>
<label>Email</label><br>
<input type="email" id="email" name="email">
<br>
<label>Gender</label><br>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br>
<input type="submit" value="Submit">
</form>
</div>
<script>
$('input').focus(function(){
//alert('Focus');
//$('input#name').css('background', 'pink');
$(this).css('background', 'pink');
});
$('input').blur(function(){
//alert('Focus');
$(this).css('background', 'blue');
});
$('input').keyup(function(e){ //글자를 적고 손을 뗐을 때 적용
console.log(e.target.value); //적은값을 콘솔에 보여준다
});
$('select#gender').change(function(e){
//alert('changed!');
alert(e.target.value); //male, female 값을 알림창에 띄워준다.
});
$('#form').submit(function(e){
e.preventDefault();
let name = $('input#name').val();
console.log(name);
}); // submit : 중지시키고 원하는 기능을 넣는다.
</script>
</body>
</html>
'Javascript > JQuery' 카테고리의 다른 글
| 오류: 다른 요소(element)도 같이 선택되는 문제 (0) | 2019.12.05 |
|---|---|
| jQuery (5) Ajax 기술 사용해서 json 파싱하기 (0) | 2019.07.03 |
| jQuery (4) 애니메이션 효과 (0) | 2019.06.28 |
| jQuery (3) 돔 (DOM) (0) | 2019.06.28 |
| jQuery (1) 제이쿼리 정의, 역사, 개요 (0) | 2019.06.28 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
