자 바스 크 립 트 이벤트 종류 (키보드 이벤트, 마우스 이벤트, 포커 스 이벤트)

키보드 이벤트

마우스 이벤트

초점 사건

키보드 이벤트
이벤트
발생 시기
onkeydown
키보드 버튼 누 르 기
keypress
키보드 버튼 눌 러.
keyup
키보드 버튼 이 풀리다
어떤 버튼 사건 을 감청 하 다

document.onkeydown = function(event) {
     
    //        
    console.log('key down');
};

document.onkeypress = function(event) {
     
    //        
    console.log('key press');
};

document.onkeyup = function (event) {
     
    //        
    console.log('key up');
};

이벤트 매개 변 수 는 KeyboardEvent 이벤트 대상 으로 버튼 과 관련 된 속성 을 포함 합 니 다.

type: 사건 유형

key: 누 른 키보드 의 내용 이 무엇 인지 키 값 을 표시 합 니 다. 알파벳 'p' 을 누 를 때 값 은 'p'

입 니 다.

code: 키보드 코드 를 나타 내 고 알파벳 'p' 을 눌 렀 을 때 값 은 'KeyP'

이다.

keyCode: 정수, 키 코드 를 나타 내 고 모든 키 에 유일한 키 코드 가 있 으 며 알파벳 'p' 의 키 코드 는 80

이다.

altKey: 불 값 은 이때 alt 키 도 눌 렀 는 지 여 부 를 나타 낸다

ctrKey: 불 값 은 이때 의 ctr 키 도 눌 렀 는 지 여 부 를 나타 낸다

shiftKey: 불 값 은 이때 shift 키 도 눌 렀 는 지 여 부 를 나타 낸다

metaKey: 불 값, windows 플랫폼 은 Window 키 를 동시에 누 를 지, mac 는 Command 키 를 동시에 누 를 지 여부

repeat: 불 값, 한 키 가 계속 누 르 면 그 값 은 true 이 고 중복

을 나타 낸다.
이러한 속성 을 검사 하여 사용자 가 누 른 키 가 무엇 인지, 그리고 ctrl 과 alt 등 키 가 동시에 눌 렸 는 지 판단 할 수 있 습 니 다.

document.onkeydown = function(event) {
     
    //        
	console.log('key down: ' + event.key);
	if (event.altKey) {
     
	    console.log('alt is active');
    }
	if (event.shiftKey) {
     
	    console.log('shift is active');
	}
};

마우스 이벤트
이벤트
발생 시기
onclick
대상 을 마우스 로 눌 렀 을 때 발생 하 는 이벤트
ondblclick
대상 을 두 번 눌 렀 을 때 발생 하 는 이벤트
onmousedown
마우스 단 추 를 눌 렀 을 때 발생 하 는 이벤트
onmousemove
마우스 가 움 직 일 때 발생 하 는 이벤트
onmouseout
마우스 가 이 사건 의 요소 나 하위 요 소 를 감청 할 때 발생 하 는 이벤트
onmouseover
이 이벤트 의 요소 나 하위 요 소 를 감청 할 때 발생 하 는 이벤트 로 마 우 스 를 이동 합 니 다.
onmouseup
마우스 버튼 이 풀 렸 을 때 발생 하 는 이벤트
예시:

<script type="text/javascript">
    function appendText(str) {
      
        document.body.innerHTML += str + "
";
     }
     document.onmousedown = function() {
      
         appendText("onmousedown");
         appendText("button = " + event.button);
         appendText("(x,y) = " + event.x + "," + event.y);
    }
    document.onmouseup = function() {
      
        appendText("onmouseup");
    }
    document.onclick = function() {
      
        appendText("onclick");
    }
    document.ondblclick = function() {
      
        appendText("ondblclick");
    }
    document.oncontextmenu = function() {
      
        appendText("oncontextmenu");
    }
    document.onmouseover = function() {
      
        appendText("onmouseover");
    }
    document.onmouseout = function() {
      
        appendText("onmouseout");
    }
    document.onmousemove = function() {
      
        appendText("mousemove");
    }
script>

트리거 시의 매개 변 수 는 Mouse Event 대상 유형 이 고 Mouse Event 대상 에는 다음 과 같은 유용 한 속성 이 포함 되 어 있 습 니 다.

type: 사건 유형, 예 를 들 어 mosemove 또는 mousedown

button: 정형, 마우스 이벤트 시 누 른 단추 번호

buttons: 정형, 마우스 이벤트 시 튕 기 는 단추 번호

clientX: DOM 콘 텐 츠 영역 에 마우스 포인터 가 있 는 X 좌표

clientY: DOM 콘 텐 츠 영역 에 마우스 포인터 가 있 는 Y 좌표

offsetX: 부모 노드 에 가장 자 리 를 채 우 는 X 좌표

offsetY: 부모 노드 에 가장 자 리 를 채 우 는 Y 좌표

screenX: 마우스 포인터 가 전체 화면 에 있 는 X 좌표

screenY: 마우스 포인터 가 전체 화면 에 있 는 Y 좌표

pageX: 마우스 포인터 가 전체 DOM 내용 (페이지 포함) 의 X 좌표

pageY: 마우스 포인터 가 전체 DOM 내용 (페이지 포함) 의 Y 좌표

altKey: 불 값 은 이때 alt 키 도 눌 렀 는 지 여 부 를 나타 낸다

ctrKey: 불 값 은 이때 alt 키 도 눌 렀 는 지 여 부 를 나타 낸다

shiftKey: 불 값 은 이때 shift 키 도 눌 렀 는 지 여 부 를 나타 낸다

metaKey: 불 값, windows 플랫폼 은 Window 키 를 동시에 누 를 지, mac 는 Command 키 를 동시에 누 를 지 여부

예제: 마우스 우 클릭 으로 div 팝 업

document.oncontextmenu = function(){
     
    return false
};     //          

var res = document.getElementById('box');      //  id box div
document.body.onmouseup = function(e){
          // body       
    if(e.button===2){
            //  button=1（    ），button=2（    ），button=0（     ）
        console.log(e);     //           
        console.log(e.offsetY);     //        Y   
        console.log(e.offsetX);     //        X   
        res.style.top = e.offsetY+'px';     //      div  Y 
        res.style.left = e.offsetX+'px';    //      div  X 
        res.style.display = 'block';        //  div  
        }else{
     
            res.style.display = 'none';         //     div  
        }
    } 

포커 스 이벤트
모든 요소 에 초점 이벤트 가 있 는 것 이 아니 라 상호작용 가능 한 요소 만 있 습 니 다. 예 를 들 어 폼 요소, a 태그 등 입 니 다.페이지 에 초점 이 있 는 요소 만 있 을 수 있 습 니 다. 하 나 는 초점 을 맞 추고 다른 하 나 는 초점 을 잃 습 니 다. 기본 값 은 document 입 니 다.

<form>
    <input type="text" name="txt1" id="txt" />
    <input type="button" name="btn" value="  " />
form>

form.txt1.focus();    //        ，       onfocus（）  。
form.txt1.onfocus=function(){
     
    console.log(1);
}  //               
form.txt1.onblur=function(){
     
    console.log(2);
}　　//            
form.btn.onclick=function(){
     
    form.txt1.select(); 
}  //           
form.btn.onclick=function(){
      
    form.txt1.setSelectionRange(2,5) ; 
    form.txt1.focus(); 
} // setSelectionRange     focus()        ，  setSelectionRange          ，setSelectionRange（start，end）      ，   start：    ；   end：    。