프로그래밍 공부/JavaScript (55) 썸네일형 리스트형 JavaScript - 우클릭 방지, 키보드의 특정 키 방지 우클릭 방지, 키보드 특정 키 방지 키보드의 특정한 키의 식별 코드는 위와 같다. JavaScript - 예외 처리 예외 처리(Exception Handling)는 프로그램이 실행되는 동안 문제가 발생할 때 대처할 수 있게 처리하는 것을 의미한다. 예외(Exception)와 에러(Error)는 다른 것이다. 에러에 경우는 프로그래밍 언어의 문법적인 오류 예를 들면 괄호({[]})를 닫지 않았다거나 할 때 에러라고 부른다. 예외에 경우는 프로그램을 실행 중 발생하는 오류를 예외라고 한다. 예외(Exception) : 프로그램 실행 중 발생하는 오류 에러(Error) : 프로그래밍 언어의 문법적인 오류 이런 예외(Exception)를 처리하는 방법에는 두 가지가 있는데, 하나는 기본 예외 처리와 다른 하나는 고급 예외 처리의 두가지 방법이 있다. 기본 예외 처리 기본 예외 처리는 예외가 발생하지 않게 사전에 해결하는 것을.. JavaScript - DOM Level 2 이벤트 모델 DOM Level 0의 기본 이벤트 모델과 인라인 이벤트 모델은 한계가 있다. 아래는 지금까지 공부한 DOM Level 0 이벤트 모델과 지금 보려고하는 DOM Level 2 이벤트 모델을 정리한 것이다. DOM Level 이벤트 모델 종류 리스너(핸들러) 처리 갯수 기타 DOM Level 0 고전 이벤트 모델(기본 이벤트 모델) 1 인라인 이벤트 모델 1 DOM Level 2 IE(인터넷 익스프롤러) 이벤트 모델 다중처리 가능 IE11부터 지원 안함 W3C(표준) 이벤트 모델 다중처리 가능 고전 이벤트 모델 인라인 이벤트 모델 자바스크립트에서 문서 객체의 Event Property을 사용해 Event와 Event Handler를 연결하는 방식이다. HTML 태그의 Event Property와 Event.. JavaScript - 인라인 이벤트 모델, 디폴트 이벤트 제거, 이벤트 전달 인라인 이벤트 모델 이전까지 기본 이벤트 모델에서는 id나 class 등의 선택자나 태그 자체를 가져와 window.onload에 메서드를 만들어 사용하거나, body 태그 안에서 script 태그를 만들어 선택자를 불러와 메서드를 사용하는 방식을 사용했다. 인라인 이벤트 모델도 비슷한데, 이것은 태그안에 직접 이벤트 속성을 넣는 방식이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Document function h2click (e) { alert('클릭'); alert('클릭'); alert('클릭'); } Click Here Click Here Colored by Color Scripter cs h1 태그 안에 이벤트 속성인 onclick을 이용해 alert를 사용하.. JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 자바스크립트에서 이벤트의 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜'를 정의 할 수 있다. 이벤트 리스너 안에 this 키워드를 사용하면 이벤트가 발생한 객체 즉 '누가'를 찾을 수 있다. this 키워드를 사용하면 특정한 이벤트(click 같은)가 실행되었을 때 style을 바꾸는 것도 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 Document window.onload=function(){ document.getElementById('header1').onclick=function(){ this.style.color='red'; this.s.. JavaScript - 고전 이벤트 모델(기본 이벤트 모델) 고전 이벤트 모델(기본 이벤트 모델)은 문서 객체 이벤트 속성이고 이벤트를 연결하는 방법이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document window.onload=function(){ let header=document.getElementById('header'); header.onclick=function(){ alert('클릭'); header.onclick=null; } } Click 클릭 documentHeader.onclick=function(){ alert('Click'); documentHeader.onclick=null; } Colored by Color Scripter cs 위의 코.. JavaScript - 이벤트 종류 1-1. 마우스 이벤트 이벤트 이름 설명 mouseenter 포인터가 이벤트 핸들러로 등록된 요소 위로 이동했을 때 mouseover 포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 위로 이동했을 때 mousemove 포인터가 요소 위에서 이동했을 때(이동하는 동안 계속 실행) mousedown 포인터를 요소 위에서 버튼을 누를 때 mouseup 포인터를 요소 위에서 버튼을 뗄 때 auxclick 포인터로 왼클릭(주 클릭)이 아닌 버튼으로 요소를 클릭할 때 click 포인터로 왼클릭(주 클릭)으로 요소를 클릭할 때 dbclick 포인터로 요소를 두번 클릭 할 때 contextmenu 포인터로 우클릭(보조 클릭)으로 요소를 클릭할 때(컨텍스트 메뉴 표기 전) wheel 포인터에 휠 버튼을 어떤 방향이.. JavaScript - 이벤트 개요 이벤트는 웹 브라우저가 사용자와 상호작용을 할 수 있도록 해주는 기능이다, 대표적인 이벤트의 종류로는 아래의 7가지가 있다. 1. 마우스 이벤트 2. 키보드 이벤트 3. HTML 프레임 이벤트 4. HTML 입력 양식 이벤트 5. 유저 인터페이스(UI) 이벤트 6. 구조 변화 이벤트 7. 터치 이벤트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document window.onload=function(){ let header=document.getElementById('header'); function whenClick(){ alert('CLICKED'); } header.onclick=whenClick; } Click Colored by Color Scripte.. 이전 1 2 3 4 ··· 7 다음
