-
JavaScript 이벤트(Event) 개요 및 간단한 활용, 게시글 보호팁JavaScript/JavaScript 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 밖에서부터 선택하면 블록 가능
웹사이트를 조금 더 풍부하게 제작하기 위해서는 이벤트를 잘 다룰 수 있어야 합니다.
'JavaScript > JavaScript' 카테고리의 다른 글
JavaScript 익명함수(Anonymous function) (0) 2019.12.26 JavaScript DOM (Document Object Model) 개요, Method, 활용 (0) 2019.12.25 JavaScript 배열(Array) 개요 및 작성법, Method 몇 가지 (0) 2019.12.25 JavaScript 중첩 if문 (0) 2019.12.25 JavaScript 선택문(Switch~case문) (0) 2019.12.23