javascript 이벤트 분석

5864 단어 event이벤트 분석
이벤트 대상 은 이벤트 가 발생 하 는 과정 에서 만 유효 합 니 다.이벤트 의 일부 속성 은 특정한 이벤트 에 만 의미 가 있 습 니 다.예 를 들 어 from Element 와 toElement 속성 은 onmouseover 와 onmouseout 사건 에 만 의미 가 있 습 니 다.예 를 들 어 아래 의 예 를 들 어 링크 에서 마 우 스 를 눌 렀 는 지 확인 하고 shift 키 가 눌 리 면 링크 의 점프 를 취소 합 니 다. Cancels Links function cancelLink() { if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnvalue = false; } [/code]아래 의 예 는 상태 표시 줄 에 마우스 의 현재 위 치 를 표시 합 니 다.속성:altKey,button,cancelBubble,clientX,clientY,ctrlKey,fromElement,keyCode,offsetX,offsetY,propertyName,returnvalue,screenX,screenY,shiftKey,srcElement,srcFilter,toElement,type,x,alt 키 의 상 태 를 검사 합 니 다.문법:event.altkey 가능 한 값:alt 키 를 눌 렀 을 때 값 은 TRUE 이 고 그렇지 않 으 면 FALSE 입 니 다.읽 기만 하 다.2.button 설명:누 른 마우스 단 추 를 검사 합 니 다.문법:event.button 가능 한 값:0 버튼 을 누 르 지 않 았 습 니 다.다른 이벤트 에 대해 서 는 마우스 상태 가 어떻든 0 으로 돌아 갑 니 다(예 를 들 어 onclick).3.cancelBubble 설명:상부 요소 의 이벤트 에 대한 통 제 를 받 아들 이 는 지 확인 합 니 다.문법:event.cancelBubble[=cancelBubble]가능 한 값:이것 은 읽 고 쓸 수 있 는 불 값 입 니 다.TRUE 는 상층 원소 의 이벤트 에 의 해 제어 되 지 않 습 니 다.FALSE 는 상위 요소 의 이벤트 에 의 해 제어 할 수 있 습 니 다.기본 값 입 니 다.예:그림 에서 클릭(onclick)할 때 shift 키 를 동시에 누 르 면 상위 요소(body)의 이벤트 onclick 으로 인 한 showSrc()함 수 를 취소 합 니 다. function checkCancel() { if (window.event.shiftKey) window.event.cancelBubble = true; } function showSrc() { if (window.event.srcElement.tagName == "IMG") alert(window.event.srcElement.src); } 4.clientX 설명:창 클 라 이언 트 영역 에 있 는 마우스 의 X 좌 표를 되 돌려 줍 니 다.문법:이벤트.clientX 주석:이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.5.clientY 설명:창 클 라 이언 트 영역 에 있 는 Y 좌 표를 되 돌려 줍 니 다.문법:이벤트.clientY 주석:이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.6.ctrlKey 설명:ctrl 키 의 상 태 를 검사 합 니 다.문법:event.ctrlKey 가능 한 값:ctrl 키 를 눌 렀 을 때 값 은 TRUE 이 고 그렇지 않 으 면 FALSE 입 니 다.읽 기만 하 다.7.from Element 설명:onmouseover 와 onmouseout 이벤트 가 발생 했 을 때 마우스 가 떠 난 요 소 를 검사 합 니 다.참고:18.toElement 문법:이벤트.from Element 주석:이것 은 읽 기 전용 속성 입 니 다.8.keyCode 설명:키보드 이벤트 에 대응 하 는 내부 코드 를 검사 합 니 다.이 속성 은 onkeydown,onkeyup,onkeypress 이벤트 에 사 용 됩 니 다.문법:event.keyCode[=keyCode]가능 한 값:읽 고 쓸 수 있 는 값 입 니 다.모든 유 니 코드 키보드 내부 코드 일 수 있 습 니 다.키보드 이 벤트 를 일 으 키 지 않 았 다 면,이 값 은 0 입 니 다.9.offsetX 설명:트리거 이벤트 대상 에 비해 마우스 위치의 수평 좌표 문법 을 검사 합 니 다.event.offsetX 10.offsetY 설명:트리거 이벤트 대상 에 비해 마우스 위치의 수직 좌표 문법 을 검사 합 니 다.event.offsetY 11.property Name 설명:요소 의 변 화 된 속성 을 설정 하거나 되 돌려 줍 니 다.문법:event.property Name[=sProperty]가능 한 값:sProperty 는 이벤트 에서 변 경 된 속성 을 지정 하거나 되 돌려 주 는 문자열 입 니 다.이 속성 은 읽 기와 쓰기 가 가능 합 니 다.기본 값 이 없습니다.설명:onproperty change 이 벤트 를 사용 하여 property Name 의 값 을 얻 을 수 있 습 니 다.예:다음 예 는 onproperty change 이 벤트 를 사용 하여 property Name 의 값 을 표시 하 는 대화 상 자 를 팝 업 합 니 다.
 
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new value";
} function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P> <INPUT TYPE=button ID=btnProp onclick="changeProp()"
value="Click to change the value property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
value="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>
12.returnvalue 설명:이벤트 에서 되 돌아 오 는 값 문법 을 설정 하거나 검사 합 니 다:event.returnvalue[=Boolean]가능 한 값:true 이벤트 의 값 이 false 원본 대상 에 있 는 이벤트 의 기본 동작 이 취소 되 었 습 니 다.예 는 본 고의 시작 을 보십시오.13.screenX 설명:사용자 화면 에 비해 마우스 의 수평 위치 문법 을 검사 합 니 다.event.screenX 설명:이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.14.screenY 설명:사용자 화면 에 비해 마우스 의 수직 위치 문법 을 검사 합 니 다.event.screenY 설명:이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.15.shift Key 설명:shift 키 의 상 태 를 검사 합 니 다.문법:event.shiftKey 가능 한 값:shift 키 를 눌 렀 을 때 값 은 TRUE 이 고 그렇지 않 으 면 FALSE 입 니 다.읽 기만 하 다.16.srcElement 설명:트리거 이벤트 의 요 소 를 되 돌려 줍 니 다.읽 기만 하 다.예 를 들 면 본문의 첫머리 를 볼 수 있다.문법:event.srcElement 17.srcFilter 설명:onfilter change 이 벤트 를 촉발 하 는 필 터 를 되 돌려 줍 니 다.읽 기만 하 다.문법:event.srcFilter 18.toElement 설명:onmouseover 와 onmouseout 이벤트 가 발생 했 을 때 마우스 가 들 어 오 는 요 소 를 검사 합 니 다.참고:7.from Element 문법:이벤트.toElement 주석:이것 은 읽 기 전용 속성 입 니 다.예:아래 코드 는 마우스 가 단추 위로 이동 할 때"mouse arrived"function testMouse(oObject){if(oObject.contains(event.toElement){alert("mouse arrived")를 표시 하 는 대화 상 자 를 보 여 줍 니 다.}:19.type 설명:이벤트 이름 을 되 돌려 줍 니 다.문법:event.type 설명:접두사 가 없 는 이벤트 이름 을 되 돌려 줍 니 다.예 를 들 어 onclick 이벤트 가 되 돌아 오 는 type 은 click 만 읽 습 니 다.20.x 설명:css 속성 에 비해 position 속성 이 있 는 상위 요소 의 x 축 좌 표를 되 돌려 줍 니 다.css 속성 에 position 속성 이 있 는 상위 요소 가 없 으 면 기본적으로 BODY 요 소 를 참고 대상 으로 합 니 다.문법:이벤트.x 설명:이벤트 가 실 행 된 후 마우스 가 창 밖으로 이동 하면 되 돌아 오 는 값 은-1 입 니 다.이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.21.y 설명:css 속성 에 비해 position 속성 이 있 는 상위 요소 의 y 축 좌 표를 되 돌려 줍 니 다.css 속성 에 position 속성 이 있 는 상위 요소 가 없 으 면 기본적으로 BODY 요 소 를 참고 대상 으로 합 니 다.문법:이벤트.y 설명:이벤트 가 실 행 된 후 마우스 가 창 밖으로 이동 하면 되 돌아 오 는 값 은-1 입 니 다.이것 은 읽 기 전용 속성 입 니 다.이것 은 마우스 의 현재 위 치 를 얻 을 수 있 을 뿐 마우스 의 위 치 를 변경 할 수 없다 는 것 을 의미한다.

좋은 웹페이지 즐겨찾기