js 에서 DOM 사건 을 해결 하 는 방법

이벤트 귀속 화해 귀속

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

이것 은 가장 자주 사용 하 는 대상 으로 사건 을 연결 하 는 방법 이다.하지만 한 대상 에 게 만 같은 시간 을 연결 할 수 있 습 니 다. 두 번 째 를 연결 하려 면 덮어 씁 니 다.Js 에서 한 대상 에 게 여러 번 연결 할 수 있 는 방법 을 제공 합 니 다.

/**obj. addEventListener("click",fun(){},false)
*        
*       IE678;
*                 on
*                   
*               。  false
*obj.removeEventListener("click",fn2)；
*        
*/
document.addEventListener("click",fn1);
document.addEventListener("click",fn2);
document.removeEventListener("click",fn2);
//    ，  1，  2；
//   ，  1。
function fn1() {
    alert(1)
}
function fn2() {
    alert(2)
}

/*obj.attachEvent("onclick",fun{})   
*       IE678
*           
*                ，  on     
*                。
*
*obj.detachEvent("onclick",fn)
*         
*      fn       ，              ，    
*
**/
document.attachEvent("onclick",function () {
        alert(1)
});
document.attachEvent("onclick",fn);
document.detachEvent("onclick",fn);
//   ，  2，  1
//   ，  1
function fn() {
    alert(2)
}

attachEvent 방법 과 addEventListener 의 실행 순 서 는 반대 라 는 것 을 알 수 있 습 니 다.다음은 호환성 표기 법 을 제공 하 니 참고 하 시기 바 랍 니 다.

//    
function addEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //      attacgevent  ，      ie678
        obj.attachEvent("on"+eName,eFn) //  IE678
    }else{
        obj.addEventListener(eName,eFn)//       
    }
}
//    
function removeEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //      attacgevent  ，      ie678
        obj.detachEvent("on"+eName,eFn) //  IE678
    }else{
        obj.removeEventListener(eName,eFn)//       
    }
}

그러나 집행 순서 가 다른 문 제 는 해결 되 지 않 지만 사용 에 큰 영향 을 미 치지 않 는 다.
이벤트 캡 처
위 에서 언급 한 addEventListener 방법의 세 번 째 매개 변 수 는 이벤트 캡 처 이 고 기본 값 은 false 입 니 다.이제 사건 포착 에 대해 알 아 보 겠 습 니 다.

1
    
2
        

            
3
        
    



    /*
    *       
    *                        
    *       false:    ，true：    
    *            true      false  
    *                      
    *
    * */

    box1.addEventListener("click",fn1，false)
    box2.addEventListener("click",fn2，false)
    box3.addEventListener("click",fn3，false)

    function fn1() {
        console.log(1)
    }
    function fn2() {
        console.log(2)
    }
    function fn3() {
        console.log(3)
    }
//  box3
// 3 2 1
//      true 1 2 3 

사건 이 불거지다
우 리 는 사건 이 포착 되 었 다 고 말 할 때 매우 재 미 있 는 일 을 발견 할 수 있다. 나 는 단지 가장 안쪽 에 있 는 상 자 를 클릭 했 을 뿐 이지 만 이 상 자 를 감 싼 큰 상자 의 사건 도 촉발 되 었 다. 이것 이 바로 사건 의 거품 이다.그럼 이 건 왜 일 까요?곰 곰 이 생각해 보면 우리 가 클릭 한 것 은 작은 상자 이지 만 발견 하기 어렵 지 않다.하지만 작은 상자 가 큰 상자 안에 있 기 때문에 작은 상 자 를 클릭 하 는 동시에 큰 상 자 를 클릭 했다.그래서 큰 상자 의 사건 이 일어 날 겁 니 다.그러나 우 리 는 그 러 기 를 원 하지 않 을 때 가 많 기 때문에 사건 의 거품 을 없 앨 필요 가 있다.

1
    
2
        

            
3
        
    



   /*
    *       
    *                   
    *
    *       
    *       e.cancelBubble = true；
    *          
    *
    * */

    box1.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box2.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box3.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(3)
    }
    //  box3    3
    //  box2    2
    //  box1    1

기본 이벤트 지우 기
js 에 기본 이벤트 가 있 습 니 다.예 를 들 어 우리 가 텍스트 를 조작 할 때 선택 한 이벤트 가 기본적으로 존재 합 니 다.필요 할 때 우 리 는 우리 가 원 하지 않 는 기본 적 인 사건 을 없 앨 수 있다.

   /*
    *      e.preventDefault()
    *                 
    *              IE678
    *      e.returnValue=false; 
    *              IE678
    *       return false
    *                    
    *    obj.  =function (e) {
    *        e = e||window.event;
    *        e.returnValue = false;
    *        //e.preventDefault();
    *        //return false;
    *    }
    *    //        
    * */