1. 이벤트
- 특정한 상황이 발생했을 때 호출되도록 사용자가 정의하는 함수들
1-1. 이벤트 활용
<input type="button" 이벤트이름="function()" /><body>
<h1>10 + 50 = <span id="question">?</span></h1>
<!-- 클릭했을때 결과값을 넣어준다.-->
<input type="button" value="결과확인" onclick="printResult();" />
<script>
function printResult(){
let mytag = document.getElementById("question");
mytag.innerHTML = 60;
}
</body>1-2. 프로퍼티 리스너
-
인라인 방식에 비해 HTML과 javascript를 분리할 수 있다는
장점이 있다.<body> <h1 onmouseover="showResult();" onmouseout="hideResult();"> 10 + 50 = <span id="question">?</span></h1> <p>결과를 보시려면 수식 위에 마우스를 올리세요.</p> <script> function showResult(){ // console.log("showResult"); document.getElementById("question").innerHTML = 60; } function hideResult(){ // console.log("hideResult"); document.getElementById("question").innerHTML = "?"; } </body>
1-3. 이벤트 객체
- 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를
사용한다. 인자값으로 전달된다.
1-4. addEventListener()
- 가장 권장하는 방식이다.
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById("target");
t.addEventListener('click', function( eventObj ){
alert("Hello World");
});
</script>2. 이벤트 취소
-
inline , property : return false;
-
addEventListener : event.preventDefault();
<body> <input type="button" id="target1" value="property" /> <input type="button" id="target2" value="listener" /> <script> function onClick(){ alert("onclick!!!"); } function onClick2(){ alert("클릭2!!!"); } // property document.getElementById("target1").onclick = function(){ onClick() }; document.getElementById("target1").onclick = function(){ onClick2() }; // listener document.getElementById("target2").addEventListener('click', onClick); document.getElementById("target2").addEventListener('click', onClick2); // 이벤트 제거 document.getElementById("target2").removeEventListener('click', onClick2); </script> </body> --------------------------------------------------------------------------------------- <body> <p> <label>prevent event on</label> <input id="prevent" type="checkbox"/> </p> <p> <a href="https://www.naver.com" onclick="if(document.getElementById('prevent').checked){ return false; }"> naver </a> </p> <p> <form action="https://www.naver.com" onsubmit="if(document.getElementById('prevent').checked){ return false; }"> <input type="submit" /> </form> </p> </body>
<body>
<p>
<label>prevent event on</label>
<input id="prevent" type="checkbox"/>
</p>
<p>
<a id="target1" href = "https://www.naver.com">naver</a>
</p>
<p>
<form action="https://www.naver.com">
<input id="target2" type="submit" />
</form>
</p>
<script>
document.getElementById("target1").onclick = function(){
if( document.getElementById('prevent').checked ) {
return false;
}
};
document.getElementById("target2").onclick = function(){
if( document.getElementById('prevent').checked ) {
return false;
}
};
</script>
</body>
개발자로 진로 변경을 위해 준비하고 있습니다