인라인 이벤트란
-태그에 직접 이벤트를 걸어준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.id{
background-color: aqua;
}
</style>
</head>
<body>
<h3>인라인이벤트 - 태그에 직접 이벤트를 걸어주는 방법</h3>
<!-- <button type = "button" onclick="
var a = 1;
var b = '홍길동'
console.log(a+b);
alert(a+b);
">버튼</button> -->
<button type ="button" onclick="check();">눌러봐~</button>
<button type ="button" onclick="check();" >눌러봐~</button>
<button type ="button" onclick="call(this)" class = "id" >this란</button>
<button id = "but" type ="button" onclick =""></button>
<script>
function check(){
alert("이걸진짜누르네 ㅋㅋㅋㅋ");
}
//this - 태그에서 this는 자기 자신을 나타냅니다.
function call(btn){
btn.innerHTML ="쨘!!!"; //innerHTML 태그사이의 값
}
var bt =document.getElementById("but") //취득할 요소 아이디를 입력한다.
bt.onclick=function(){
console.log("출력");
}
</script>
</body>
</html>
기본이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>기본이벤트</h1>
<button type="button" id="btn">버튼</button>
<script>
//버튼보다, script가 위에 작성되는 경우는, 화면 로딩 이후에 이벤트를 걸어줍니다.
//단 , onload이벤트는 화면에서 1개만 사용할 수 있다.
//화면이 모두 로드된 이후에 실행됩니다.
window.onload = function () {
//프로그램코드로 버튼객체를 얻는다.
var bt = document.getElementById("btn")
bt.onclick = function () {
alert("눌렀냐?");
}
console.log(2);
}
console.log(1);
</script>
</body>
</html>window.onload - 가장 마지막에 실행
표준 이벤트(addEventListner)
- 다른것과 다르게 두번연속 실행가능
- 다른것과 다르게 on을 붙이지 않고 이벤트만 적음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>표준이벤트 - addEventListner</h3>
<button type = "button" id = "btn" > 얍</button>
<script>
var btn = document.getElementById("btn");
// var func = function() {
// alert("왜 눌러?");
// }
btn.addEventListener('click',function(){
alert("왜 눌러?");
}) //on이 제외된 이벤트종류 ,실행시킬 함수
btn.addEventListener('click',function(){
alert("두번 가능!");
})
//btn.addEventListener('click',() =>alert("왜 눌러") );
</script>
</body>
</html>
'JS > JS-event' 카테고리의 다른 글
| JS 실습 - onchange , onkeyup (0) | 2024.01.29 |
|---|---|
| JS - Css변경 (0) | 2024.01.29 |
| JS 실습 -checked ,배열 (0) | 2024.01.29 |
| JS - 카운트 ,InnerHTML , value 속성 실습 (0) | 2024.01.29 |
| JS - event - 실습 (0) | 2024.01.29 |
