JS 사건 거품 사건 의뢰

18496 단어 JavaScript
이벤트 처리 함수 바 인 딩 방법
  • ele. on + 이벤트 형식 = function (event) {} (문형)
  • 호환성 이 좋 지만 한 요소 의 같은 이벤트 에 하나의 처리 프로그램 만 연결 할 수 있 습 니 다
  • 기본적으로 HTML 에 쓰 는 것 과 같다
  • 프로그램 this 지향 돔 요소 자체
  • obj. addEventListener ('이벤트 형식', 함수, false)
  • IE9 이하 가 호 환 되 지 않 아 한 이벤트 에 여러 개의 처리 프로그램 을 연결 할 수 있 습 니 다
  • 프로그램 this 지향 dom 요소 자체
  • obj.attachEvent(‘on’+type,fn);
  • IE 만 있 고 하나의 사건 은 여러 개의 처리 프로그램 을 연결 할 수 있 습 니 다
  • 프로그램 this 지향 window
  • 해결:
  • var div = document.getElementsByTagName('div)[0];
    
    div.attachEvent('onclick',function(){
    	handle.call(div);
    });
    function handle(){
    	//      
    }

    패키지 addEvent (elem, type, handle)
    function addEvent(elem,type,handle){//elem    type    handle    
    	if(elem.addEventListener){
    		elem.addEventListener(type,handle,false);
    	}else if(elem.attachEvent){
    		elem.attachEvent('on'+type,function(){
    		handle.call(elem);
    		})
    	}else {
    		elem['on'+type] = handle;
    	}
    }

    이벤트 귀속 해제
  • ele. on + '이벤트 유형' = null / false
  • dom.removeEventListener(type,fn,false);
  • ele.detachEvent(‘on’+type,fn); 익명 함 수 를 연결 하면 해제 할 수 없습니다
  • 이벤트 처리 모델
  • 사건 의 거품: 구조 적 으로 (비 시각 적) 포 함 된 관계 의 요 소 는 사건 의 거품 을 일 으 키 는 기능 이 존재 할 수 있다. 즉, 같은 사건, 서브 요 소 는 부모 요소 (바닥 에서 위로) 에 거품 을 일 으 킬 수 있다.
  • 이벤트 캡 처: 구조 적 으로 (비 시각 적) 포 함 된 관계 의 요 소 는 이벤트 캡 처 기능 이 존재 합 니 다. 즉, 같은 사건, 부모 요소 에서 하위 요소 (이벤트 소스 요소) 를 캡 처 합 니 다.(위 에서 아래로).(IE 캡 처 이벤트 없 음)
  • 여러 이벤트 귀속: 촉발 순서, 먼저 포획, 후 거품 발생
  • focus, blur, change, submit, reset, select 등 사건 에 거품 이 생기 지 않 습 니 다
  • 거품 제거
  • W3C 표준: event. stopPropagation ();그러나 IE9 이하 버 전 은 지원 되 지 않 습 니 다.
  • IE 만 의 event. cancelBubble = true;


  • 포장 함수 거품 제거
    function stopBubble(event){
    	if(event.stopPropagation){
    		event.stopPropagation();
    	}else{
    		event.cancelBubble = true;
    	}
    }
    
  • 기본 이벤트 저지
  • 기본 이벤트 - 폼 제출, a 탭 전환, 오른쪽 단추 메뉴 등
  • 1.return false;대상 속성 으로 등 록 된 이벤트 가 적 용 됩 니 다
  • 2.event.preventDefault();W3C 레이 블, IE9 이하 호 환 되 지 않 음
  • 3.event.returnValue = false; 호환성 IE

  • 패키지 저지 기본 이벤트 함수
  • function cancelHandler(event){
       	if(event.preventDefault){
       	event.preventDefault();
       }else{
       	event.returnValue = false;
       }
    }
  • a 탭 전환 을 취소 하면 줄 사이 에 스타일 을 추가 할 수 있 습 니 다. 123
  • 이벤트 원본 개체
  • 이벤트 대상 이벤트 | window. event 는 IE
  • 에 사 용 됩 니 다.
  • 사건 의 근원 을 찾 는 대상:
  • event. target 화 호 는 이것 밖 에 없다
  • event. srcElement IE 는 이것 밖 에 없어 요
  • 구 글 이 두 개 이상 호 환
  • 이벤트 의뢰
  • 사건 의 거품 과 사건 원 대상 을 이용 하여 처리
  • 장점
  • 1. 성능 은 모든 요 소 를 순환 할 필요 가 없습니다. 하나의 귀속 이벤트
  • 2. 새로운 하위 요소 가 있 을 때 이벤트 재 귀속 필요 없 음
  • 예 를 들 어 사건 의 거품 과 사건 원 대상 을 이용 하여 처리
  • //          
    <ul>
          <li>1li>
          <li>2li>
          <li>3li>
          <li>4li>
          <li>5li>
          <li>6li>
    ul>
    <script>
    	var ul = document.getElementsByTagName("ul")[0];
    	ul.onclick  = function(e){   //   for    
    		var event = e ||  window.event;
    		var target = event.target || event.srcElement;
    		console.log(target.innerText);
    	}
    script>

    이벤트 분류
  • 마우스 이벤트
  • click, mousedown, mousemove, mouseup, contextmenu, mouseover, mouseout, mouseenter, mouseleave (mouseover, mouseout, mouseenter, mouseleave 기능 은 hover 와 유사 하지만 hover 속도 가 빠르다)
  • 트리거 순서: mousedown – > mouseup – > lick – > mousedown – > moseup – > click – > dblclick
  • 마우스 버튼 을 elem. button 으로 구분 하고 0 / 1 / 2 왼쪽 가운데 오른쪽
  •  document.onmousedown = function(e){ //onmouseup     onclick      
        if(e.button == 2){
    		console.log('right);
    	}else if(e.button == 0){
    		console.log('left);
    	}
    }
  • DOM 3 표준 규정: click 사건 은 왼쪽 버튼 만 감청 할 수 있 고 mousedown 과 mouseup 을 통 해 마우스 키 를 판단 할 수 있다
  • mousedown 과 click 의 충돌 해결
  • var firstTime = 0;  //       
    
    var lastTime = 0;
    var key = false;
    
    document.onmousedown = function(){
    	firstTime = new Date().getTime();
    }
    document.onmouseup = function(){
    	lastTime = new Date().getTime();
    	if(lastTime - firstTime <300){
    		key = true;
    	}
    }
    document.onclick = function(){
    	if(key){
    		console.log('click');
    		key = false;
    	}
    }
  • 키보드 이벤트
  • keydown keyup keypress

  • 트리거 순서 keydown > keypress > keyup
  • keydown 과 keypress 의 차이
  • keydown 은 임의의 키보드 버튼 에 응답 할 수 있 고 keypress 는 문자 류 키보드 버튼
  • 에 만 응답 할 수 있 습 니 다.
  • keypress 는 ASCII 코드 를 되 돌려 주 고 응답 문자 로 변환 할 수 있 습 니 다
  • 텍스트 이벤트
  • //   
    

    좋은 웹페이지 즐겨찾기