12.8 이벤트 및 이벤트 적용

기본 비헤이비어 차단

기준: 이벤트.preventDefault();//기본 메뉴 i 아래: 이벤트.returnValue = false;

target

Element은 이벤트를 트리거하는 대상 요소만 읽습니다.

이벤트 처리 함수

    
    


    
aaaaa

var div = document.getElementsByTagName('div')[0];

// div.onclick = function(){
//  alert(1);
// }


// div.onclick = function(){
//  alert(2);
// }

//            
//  :                  
//    :
//1.     (   )
//2.       
// 3. true/false    false  
div.addEventListener( 'click', function(ev){ alert(ev.target.innerHTML) }, false  );
div.addEventListener( 'click', function(ev){ alert(2) }, false  );

//    addEventListener

이벤트 바인딩 함수 제거

div.onclick = null;

DOM 2 레벨 이벤트는 이벤트 프로세서를 지정하고 삭제하는 작업을 처리하는 두 가지 방법을 정의합니다.

바인딩 이벤트 처리 함수:addEventListener

function fn1() {
 alert(1);
}

4document.addEventListener('click', fn1, false); 이벤트 바인딩 함수 제거:removeEventListenerdocument.removeEventListener('click', fn1, false);

이벤트 캡처

사건 흐름은 세 가지 단계를 포함하는데 사건 포획 단계, 목표 단계, 사건 거품 단계에 있다. 먼저 발생하는 것은 사건 포획이고 사건을 캡처하기 위해 기회를 제공한다. 그 다음에 실제 목표가 사건을 접수하고 마지막은 거품 단계이다.

    

        

    




var oDiv1 = document.getElementById('div1');

var oDiv2 = document.getElementById('div2');

var oDiv3 = document.getElementById('div3');


oDiv1.addEventListener('click', function(ev){  

    alert( '      '+this.id );
}, true);//       


oDiv1.addEventListener('click', function(ev){  

    alert( '      '+this.id );

}, false);

oDiv3.addEventListener('click', function(){
    alert('    '+this.id);
}, false);

키보드 이벤트

keydown:当键盘按键按下的时候触发;
能够捕获焦点的能够触发keydown事件；
//input
keyup : 当键盘按键抬起的时候触发

키보드 이벤트와 관련된 이벤트 객체의 속성 값

event.keyCode : 数字类型 键盘按键的值 键值；
event.ctrlKey, event.shiftKey, event.altKey
当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，相应的属性值返回true，否则返回false
示例：　留言板 当输入完成，　并且按住ctrl +enter(回车) ,添加留言

var input = document.getElementsByTagName('input')[0];
var p = document.getElementsByTagName('p')[0];
input.addEventListener('keydown',function(ev){
    if(ev.keyCode===13 && ev.ctrlKey){
        var value=input.value
        var span=document.createElement('span');
        span.innerHTML=value;
        p.appendChild(span);
    }
},false)

div 위아래 좌우 이동, 키보드 사용

var div=document.getElementsByTagName('div')[0]; // window keydown ！ window.addEventListener('keydown',function(ev){ if(ev.keyCode==37){ var left=div.offsetLeft; left-=10; div.style.left=left+'px'; } else if(ev.keyCode==38){ var Top=div.offsetTop; Top-=10; div.style.top=Top+'px'; } else if(ev.keyCode==39){ var left=div.offsetLeft; left+=10; div.style.left=left+'px'; } else if(ev.keyCode==40){ var Top=div.offsetTop; Top+=10; div.style.top=Top+'px'; } },false)

oncontextmenu

메뉴 환경 사용자 정의 var contextmenu = document.getElementById('contextmenu'); // document.oncontextmenu = function(){ // alert(1); // return false;// // } // window.addEventListener('contextmenu',function(ev){ ev.preventDefault();// ev.stopPropagation();// contextmenu.style.display='block'; contextmenu.style.left=ev.clientX+window.scrollX+'px'; contextmenu.style.top=ev.clientY+window.scrollY+'px'; },false)

끌다

끌어당기는 원리
3대 사건
onmousedown: 원소 선택 onmousemove: 원소 이동 onmouseup: 원소 방출 var div=document.getElementsByTagName('div')[0]; div.addEventListener('mousedown',function(ev){ var disX=ev.clientX-div.offsetLeft; var disY=ev.clientY-div.offsetTop; function moveEvent(ev){ div.style.left=ev.clientX-disX+'px'; div.style.top=ev.clientY-disY+'px'; } // div ， window ， window.addEventListener('mousemove',moveEvent,false); function mouseUp(){ window.removeEventListener('mousemove',moveEvent,false); div.removeEventListener('mouseup',mouseUp,false); } // onmouseup ， div.addEventListener('mouseup',mouseUp,false); },false) // function bindEvent(obj,eventType,fn){ obj.addEventListener(eventType,fn,false); } // function bindEvent(obj,eventType,fn){ obj.removeEventListener(eventType,fn,false); }