JavaScript/JavaScript
JavaScript 이벤트(Event) 개요 및 간단한 활용, 게시글 보호팁
pathas
2019. 12. 25. 01:40
191224 수업 내용 정리
이벤트(Event)
운영체제가 인식가능한 사용자들의 모든 행동 (키보드, 마우스) + 스크린터치
| 이벤트 발생 대상자 | 종류 | 이벤트핸들러(EventHandler) on + 이벤트종류명 = "함수" |
|---|---|---|
| click | 마우스 클릭 | onclick="" |
| load | 문서(html)를 읽어들일때 | onload="" |
| unload | 현재 사이트 → 다른 사이트 이동 | onunload="" (IE O, chrome X) |
| change | 콤보박스에서 특정한 항목을 선택하면 발생되는 이벤트 | onchange="" |
| mouseover | 마우스를 대상 위에 올리면 발생 | onmouseover="" |
| mouseout | 특정위치에서 마우스포인터가 벗어날때 | onmouseout="" |
| Blur | input type="text"에서 커서가 밖으로 이동할때 발생 | onBlur="" |
※ blur : 커서를 다음 항목으로 이동시키기전에 데이터를 제대로 입력했는지 확인하고 싶을때 주로 사용
예제
<body onload="alert('환영합니다')" onunload="alert('다음에 또 오세요')">
<!-- 홈페이지를 불러오기 했을 때/다른 사이트로 넘어갈 때 출력할 알림창 -->
<a href="http://www.daum.net"
onmouseover="document.img.src='../images/kid2.gif'"
onmouseout="document.img.src='../images/kid.gif'">
<!-- 마우스가 링크(이미지)위에 올라갔을 때/벗어났을 때 출력할 이미지 -->
<img src="../images/kid.gif" name="img" alt="">
</a>
</body>※ 이벤트를 활용한 간단한 게시글 보호팁
| body 속성 | 설명 |
|---|---|
| oncontextmenu = "return false" | 우클릭시 메뉴가 나오는 것을 금지 |
| ondragstart = "return false" | 드래그 시작 금지 |
| onselectstart = "return false" | 선택(블록) 금지, 단점 : body 밖에서부터 선택하면 블록 가능 |
웹사이트를 조금 더 풍부하게 제작하기 위해서는 이벤트를 잘 다룰 수 있어야 합니다.