target과 currentTarget의 차이점에 대한 자세한 설명

2014-6-25

오늘 jquery 매뉴얼을 읽었는데 jQuery의 이벤트 객체 모듈에도 항상 이를 가리키는 currentTarget이 있다는 것을 알았습니다.

결론은: 기본 currentTarget과 jQuery의 currentTarget은 완전히 다릅니다. 우리는 다른 치료에 집중해야 합니다.

2014-6-17

target과 currentTarget의 차이점은 무엇인가요?

이해하기 쉬움:

예를 들어 현재 A와 B가 있습니다.

A.addChild(B)

A는 마우스 클릭 이벤트를 수신합니다

그런 다음 B를 클릭하면 대상은 B이고 currentTarget이 됩니다. A

즉, currentTarget은 항상 이벤트 리스너이고 target은 이벤트의 실제 발신자입니다

요약:

target은 이벤트 흐름의 대상 단계에 있으며, currentTarget은 캡처, 대상 및 버블링에 있습니다. 이벤트 흐름의 단계. 이벤트 흐름이 대상 단계에 있는 경우에만 두 방향이 동일합니다. 캡처 및 버블링 단계에 있는 경우 대상은 클릭된 개체를 가리키고 currentTarget은 현재 이벤트 활동의 개체를 가리킵니다. 부모).

결론: IE 브라우저와 호환되어야 하기 때문에 일반적으로 버블링 단계에서 이벤트가 처리됩니다. 이때 target과 currentTarget이 다를 때가 있습니다.

첫 번째는

function(e){
    var target = e.target || e.srcElement;//兼容ie7,8
    if(target){
        zIndex = $(target).zIndex();
    }
}

//往上追查调用处
enterprise.on(img,'click',enterprise.help.showHelp);

IE7-8에서는 $(target).zIndex()를 사용할 수 있습니다.

IE7-8에서는 $(e.currentTarget).zIndex()를 사용할 수 없습니다. 알아보세요. IE에는 target도 currentTarget도 없습니다

테스트해 보세요(물론 IE 브라우저에서)

<input type="button" id="btn1" value="我是按钮" />
<script type="text/javascript"> 
	btn1.attachEvent("onclick",function(e){
		alert(e.currentTarget);//undefined
		alert(e.target);       //undefined
		alert(e.srcElement);   //[object HTMLInputElement]
	});
</script>

두 번째 장소:

$(element).on('click',jQuery.proxy(this, 'countdownHandler', this.name, this.nameAlert));
function countdownHandler(name, nameAlert){
    var _this = this,
    zIndex = 1999;//获取不到target时的默认值
    if(arguments[2] && arguments[2].currentTarget && $(arguments[2].currentTarget)){
        zIndex = $(arguments[2].currentTarget).zIndex();
        if(zIndex){
            zIndex += 1;
        }else{//获取不到z-index值
            zIndex = 1999;
        }
    }
}

$(arguments[2].currentTarget).zIndex()를 사용하세요. ; 또한

예상되는 결론을 얻을 수도 있습니다. 후자는 jquery를 사용하여 이벤트를 바인딩하고 jQuery는 내부적으로 currentTarget이 현재 요소를 나타낼 수 있도록 허용합니다. FF/Chrome의 대상 및 IE의 srcElement와 유사합니다.

인터넷의 예: ​​

    <p id="outer" style="background:#099">  
        click outer  
        <p id="inner" style="background:#9C0">click inner</p>  
        <br>  
    </p>  
      
    <script type="text/javascript">  
    function G(id){  
        return document.getElementById(id);      
    }  
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
            obj.attachEvent("on" + ev, handler);  
        }else if(window.addEventListener){   
            obj.addEventListener(ev, handler, false);  
        }  
    }  
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
    var outer = G("outer");  
    var inner = G("inner");  
    //addEvent(inner, "click", test);  // 两者都是P标签
    addEvent(outer, "click", test);  //结论：当在outer上点击时，e.target与e.currentTarget是一样的，都是p；当在inner上点击时，e.target是p，而e.currentTarget则是p。
    </script>

객체 this, currentTarget 및 target

이벤트 처리프로그램에서 객체 this는 항상 currentTarget의 값과 동일하지만 target에는 실제 대상만 포함됩니다. 이벤트의. 이벤트 핸들러가 대상 요소에 직접 할당된 경우 this, currentTarget 및 target에는 동일한 값이 포함됩니다. 다음 예를 살펴보세요.

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert(event.currentTarget === this); //ture
    alert(event.target === this); //ture
};

이 예는 currentTarget, target 및 this의 값을 감지합니다. 클릭 이벤트의 대상은 버튼이므로 이 세 값은 동시에 동일합니다. 이벤트 핸들러가 버튼의 상위 노드에 존재하는 경우 이러한 값은 동일하지 않습니다. 아래 예를 다시 살펴보세요.

document.body.onclick = function (event) {
    alert(event.currentTarget === document.body); //ture
    alert(this === document.body); //ture
    alert(event.target === document.getElementById("myBtn")); //ture
};

이 예의 버튼을 클릭하면 이벤트 핸들러가 이 요소에 등록되어 있으므로 this와 currentTarget이 모두 document.body와 동일합니다. 그러나 타겟 요소는 버튼 요소와 동일하며 클릭 이벤트의 실제 타겟이라고 생각합니다. 버튼에 등록된 이벤트 핸들러가 없으므로 클릭 이벤트는 이벤트가 처리되는 document.body까지 버블링됩니다.

하나의 함수로 여러 이벤트를 처리해야 하는 경우 type 속성을 사용할 수 있습니다. 예:

var btn = document.getElementById("myBtn");
var handler = function (event) {
        switch (event.type) {
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
            bread;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

위 내용은 target과 currentTarget의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!