간단 하고 실 용적 인 JS 이벤트

이벤트
JavaScript 가 지원 하 는 이 벤트 는 다음 과 같은 몇 가지 로 나 눌 수 있 습 니 다.

창 이벤트 (창 이벤트)

폼 요소 이벤트 (폼 요소 이벤트)

키보드 이벤트 (키보드 이벤트)

마우스 이벤트 (마우스 이벤트)

마우스 이벤트

                      ，    mouseover 
                      ，     mousemove 
                  (  ,  ,  ……)，   mousedown 
                  mouseup 
                     (    /     。。)  scroll
              mousewheel，      scroll 
                  ，  mouseout 
 ##**          (       )
       function eventHandler(e){ 
       //      
        e = e || window.event;//IE Chrome  window.event FF  e 
       //      
       var target = e.target || e.srcElement;//IE Chrome  srcElement FF  target } 
 **        (      페이지 를 넘 기지 않 고 함수 실행) * *
function eventHandler(e) {
e = e | | window. event; / 기본 행동 방지
if (e.preventDefault) { 
e. preventDefault (); / IE 이외
} else { 
e.returnValue = false;
/ / IE / / 주의: 이곳 은 return false 로 대체 할 수 없습니다.
/ / return false 는 요소 만 취소 할 수 있 습 니 다.
} 
}

창 이벤트 (창 이벤트)

   body   frameset      。  
  
onload                      。
onunload                        。

폼 요소 이벤트 (폼 요소 이벤트)

             。
    onchange       （select 、     ）          
    onsubmit       （form）           
    onreset             
    onselect                
    onblur                  
    onfocus                 

키보드 이벤트 키보드 이벤트 / 마우스 이벤트 (마우스 이벤트)

            ：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style    title   。

이벤트 원본
사건 의 근원 은 사건 이 발생 한 DOM 노드 를 가리킨다.이벤트 원본 은 이벤트 대상 의 속성 으로 존재 합 니 다.W3C 규범 에서 이 속성 은 target 입 니 다.그러나 IE 8.0 과 그 이하 버 전 은 이 속성 을 지원 하지 않 습 니 다. srcElement 속성 을 사용 하여 이벤트 원본 을 가 져 옵 니 다.

    
        
        
        
    
        
    

    
    
        document.getElementById("demo").onclick=function(e){
            var eve = e || window.event;
            var srcNode = eve.target || eve.srcElement;  //        
            alert(srcNode);
        }
    
    

이벤트 바 인 딩 방법
1. DOM 요소 에서 직접 연결 * 분석: 이런 방식 의 구 조 는 분리 되 지 않 고 효율 이 낮다 * 2. 대상 속성 방식 DomObject.onclick = function(){} * 분석: 이런 방식 은 한 시간 만 연결 할 수 있다 * 3. addEventListener 방식 (W3c 의 표준)xxxDomObject.addEventListener('click',function(){}); ( xxxDomObject.removeEventListener("mousedown", mouse, false);) * 주의: 1. 이벤트 이름, 일률적으로 on (즉 click, load, change.. 등등) 을 가지 고 있 지 않 습 니 다.
브 라 우 저 기본 동작 취소

      W3C       ，   event     **preventDefault()**          ；
    IE8.0             ，     event   **returnValue**      false        。

    
document.getElementById("demo").onclick=function(e){
    var eve = e || window.event;
    try{ //    try...catch              
        eve.preventDefault(); //   IE    
    }catch(e){
        eve.returnValue = false; // IE8.0       
    }
}

addEventLIstenner('click',function(){},true) false( ): true :
이벤트 캡 처 / 이벤트 거품 발생
이벤트 캡 처 단계: 이 벤트 는 이벤트 목표 (target) 를 캡 처 할 때 까지 맨 위 탭 에서 아래로 찾 습 니 다. 이벤트 거품 단계: 이 벤트 는 이벤트 목표 (target) 부터 시작 하여 페이지 의 맨 위 탭 까지 위로 거품 을 냅 니 다.
사건 을 포착 하고 거품 을 일 으 키 는 과정 을 사건 의 전파 라 고 통칭 하 는 사건 의 전 파 는 막 을 수 있다. • W3C 에 서 는 stopPropagation () 방법 을 사용 하고 IE 에 cancelBubble = true 를 설정 하 며 포획 과정 에서 stopPropagation () 을 사용한다.이후, 뒤의 거품 과정 도 발생 하지 않 습 니 다 ~ 사건 을 막 는 기본 적 인 행동, 예 를 들 어 click 후의 점프 ~ W3C 에서 preventDefault () 방법 을 사용 합 니 다. • IE 에서 window. event. returnValue = false 를 설정 합 니 다. 주의: 모든 사건 이 거품 을 일 으 킬 수 있 는 것 은 아 닙 니 다. 예 를 들 어 blur, focus, load, unload,
웹 저장 sessionStorage 와 localStorage
sessionStorage 는 세 션 단계 의 저장 소 입 니 다. localStorage 는 데 이 터 를 자발적으로 삭제 하지 않 으 면 데이터 가 만 료 되 지 않 습 니 다.
이 두 가 지 는 같은 조작 방법 (setItem, getItem, removeItem) 을 가지 고 있 으 며, setItem 은 value 의 용 도 를 저장 하고, value 를 key 필드 에 저장 하 는 용법;. setItem (key, value); sessionStorage.setItem("key","value"); localStorage.setItem("key", "value");getItem 에서 value 용도 가 져 오기: 지정 한 key 로 컬 에 저 장 된 값 을 가 져 오 는 방법:. getItem (key) var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");removeItem 삭제 key 용도: 지정 한 key 로 컬 에 저 장 된 값 을 삭제 합 니 다. removeItem (key) sessionStorage.removeItem("key"); localStorage.removeItem("site");clear 모든 key / value 용도 지우 기: 모든 key / value 용법 지우 기: clear () sessionStorage.clear(); localStorage.clear();cookies

//  cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
//  cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}
//  cookie  
function clearCookie(name) {  
    setCookie(name, "", -1);  
}  
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}
checkCookie();