wasup

JavaScript) onclick event (클릭이벤트) 본문

IT/html, css, script

JavaScript) onclick event (클릭이벤트)

wasupup 2021. 4. 17. 18:48
반응형

Q. 이벤트를 선언해보자

 

style

<style>
a {
	display: inline-block;
	padding: 10px 20px;
	margin: 30px;
	font-size: 16px;
	background-color: #999;
	color: #fff;
	border-radius: 10px;
}

a:hover {
	background-color: #000;
}
</style>

 

html

<body>
	<p><a id="aButton1">Click1</a></p>
	<p><a id="aButton2">Click2</a></p>
	<p><a onclick="alert('aButton3을 클릭했습니다.')">Click3</a></p>
	<p><a onclick="whenClick2()">Click4</a></p>
</body>

 

script

<script>
	window.onload = function() {

		var header1 = document.getElementById('aButton1');
		var header2 = document.getElementById('aButton2');

		header1.onclick = function() { //익명함수
			alert('aButton1을 클릭했습니다.');
		};

		function whenClick() { //선언함수
			alert('클릭');
		}

		header2.onclick = whenClick;

		//aButton1.onclick = null; //이벤트 제거
	}
	function whenClick2() { //선언함수
		alert('클릭');
	}
</script>

첫 번째 버튼 클릭 시

두 번째 버튼 클릭 시

세 번째 버튼 클릭 시

마지막 버튼 클릭 시

반응형
저작자표시 비영리 동일조건

'IT > html, css, script' 카테고리의 다른 글

JQuery) each() 배열관리 메서드  (0) 2021.04.19
JavaScript) 버튼 클릭 시 숫자 카운트 업!  (0) 2021.04.18
JavaScript) DOM과 BOM  (0) 2021.04.16
JavaScript) 배열의 함수  (0) 2021.04.14
JavaScript) 스크립트에서 배열의 다양한 선언  (0) 2021.04.13
'IT/html, css, script' Related Articles more
Comments