[고전적 이벤트 모델 예시: javascript]
window.onload = function(){}
: body가 'onload되고 나서 script를 실행한다'는 뜻
window.onload = function() {
var tags = document.getElementsByTagName('td')
tags[0].innerHTML = '아이디'
let nodes = document.querySelectorAll('td')
nodes[1].innerText = '패스워드'
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//DateType : EVENT
function clickTimer() {
setTimeout(function() {
alert('3초 지났습니다')
}, 3000)
}
window.onload = function() {
let btn = document.getElementById('clickBtn')
// 고전적 이벤트모델
btn.onclick = function() {
alert('click btn...')
}
let h1Tag = document.createElement('h1')
h1Tag.appendChild(document.createTextNode('hello'))
document.body.appendChild(h1Tag)
h1Tag.style.backgroundColor = 'gray'
h1Tag.onclick = function() {
alert('h1 click...')
}
}
</script>
</head>
<body>
<!-- 인라인 이벤트모델 -->
<input type="button" value="클릭" onclick="alert('click...')">
<!-- clickTimer()라는 함수 호출 -->
<input type="button" value="3초타이머" onclick="clickTimer()">
<input type="button" value="클릭2" id="clickBtn">
</body>
</html>
[현재 많이 쓰는 이벤트 모델 예시: jQuery]
$(document).ready(function(){ }
: document: body에 써있는 코드가 준비가 되었을때 function실행하라는 뜻
$(document).ready(function() {
$('h1').click(function() {
$(this).css('color', 'red')
$(this).css('background-color', 'purple')
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
/*
h1 tag 클릭하면 글자색이 빨간색으로 변하고
h1에 마우스를 접근시키면 배경을 노란색으로 변경하고
h1에 마우스가 벗어나면 배경을 흰색으로 변경
*/
//동시에 쓸때는 on이라고 정의하면 됨
//객체처럼 사용가능('click, mouseenter, mouseleave')
$('h1').on({
'click' : function() {
//$(this).css('color', 'red')
//$(this).css('background-color', 'purple')
$(this).css({
color: 'red',
'background-color': 'purple'
})
}, 'mouseenter' : function() {
$(this).css('background-color', 'yellow')
}, 'mouseleave' : function() {
$(this).css('background-color', 'white')
}
})
/*
$('h1').click(function() {
$(this).css('color', 'red')
$(this).css('background-color', 'purple')
})
$('h1').mouseenter(function() {
$(this).css('background-color', 'yellow')
})
$('h1').mouseleave(function() {
$(this).css('background-color', 'white')
})
*/
})
</script>
</head>
<body>
<h1>첫번째 문장입니다</h1>
<h1>두번째 문장입니다</h1>
<div>
<h1>세번째 문장입니다</h1>
</div>
<h1>네번째 문장입니다</h1>
<button>클릭</button>
</body>
</html>
'' 카테고리의 다른 글
| [javaScript] BOM/DOM (0) | 2021.05.09 |
|---|---|
| [javaScript] innerHTML / innerText 차이 (0) | 2021.05.08 |
| [jQuery] html(), text(), attr() 함수 (0) | 2021.05.07 |
| [javascript] 선언적함수/ 익명함수 (0) | 2021.05.04 |
