$(이)와 event.target의 차이는 무엇입니까?
저는 자바스크립트와 jQuery의 튜토리얼에 따라 탭 패널을 만들고 있었습니다: 사라진 설명서, 저자가 이것을 할 때 첫 번째 줄이 있습니다.
var target = $(this);
하지만 나는 그렇게 하려고 노력했습니다.
var target = evt.target;
그리고 나는 그 오류를 얻었습니다.
Uncatched TypeError: 개체 http://localhost/tabbedPanels/#panel1에 'attr' 메서드가 없습니다.
내가 때 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠevt.target로 돌아가다.$(this)그것은 매력적으로 작동했습니다.
사이에 무엇이 다른지 알고 싶습니다.$(this)그리고.evt.target?
필요할 경우를 대비해 제 코드를 알려드리겠습니다.
index.dll :
<!DOCTYPE html>
<html>
<head>
<title>Tabbed Panel</title>
<style>
body {
width : 100%;
height: 100%;
}
#wrapper {
margin : auto;
width : 800px;
}
#tabsContainer {
overflow: hidden;
}
#tabs {
padding:0;
margin:0;
}
#tabs li {
float : left;
list-style:none;
}
#tabs a {
text-decoration:none;
padding : 3px 5px;
display : block;
}
#tabs a.active {
background-color : grey;
}
#panelsContainer {
clear: left;
}
#panel1 {
color : blue;
}
#panel2 {
color : yellow;
}
#panel3 {
color: green;
}
#panel4 {
color : black;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="tabsContainer">
<ul id="tabs">
<li><a href="#panel1">Panel1</a></li>
<li><a href="#panel2">Panel2</a></li>
<li><a href="#panel3">Panel3</a></li>
<li><a href="#panel4">Panel4</a></li>
</ul>
</div>
<div id="panelsContainer">
<div id="panel1" class="panel">
this is panel1
</div>
<div id="panel2" class="panel">
this is panel2
</div>
<div id="panel3" class="panel">
this is panel3
</div>
<div id="panel4" class="panel">
this is panel4
</div>
</div>
</div>
</body>
</html>
script.js :
$(function(){
$("#tabs a").click(function(evt){
var target = evt.target,
targetPanel = target.attr("href");
$(".panel").hide();
$("#tabs a.active").removeClass("active");
target.addClass("active").blur();
$(targetPanel).fadeIn(300);
evt.preventDefault();
});
$("#tabs a:first").click();
})
사이에는 차이가 있습니다$(this)그리고.event.target그리고 꽤 중요한 것입니다.하는 동안에this(또는)event.currentTarget는합니다.event.target클릭한 실제 DOM 요소입니다.이벤트 버블 때문에, 만약 당신이 가지고 있다면, 기억하세요.
<div class="outer">
<div class="inner"></div>
</div>
클릭 청취자를 외부 div에 연결합니다.
$('.outer').click( handler );
다음에 그음에다.handler외부 div와 내부 div를 클릭할 때 호출됩니다(내부 div에서 이벤트를 처리하고 전파를 중지하는 다른 코드가 없는 경우).
이 예에서 내부 div 내부를 클릭하면 다음과 같이 입력합니다.handler:
this을 ..outerDOM 요소(처리기가 연결된 개체이기 때문에)event.currentTarget또한 다음을 참조합니다..outer요소(이벤트를 처리하는 현재 대상 요소이기 때문에)event.target을 ..innerelement는 (이벤트가 발생한 요소입니다.)
jQuery »$(this)DOM 요소는 jQuery 개체에 포함되므로 jQuery 함수를 호출할 수 있습니다.에서 동일한 작업을 수행할 수 있습니다.$(event.target).
의 문맥을 하세요.this(예: Backbone을 사용하면 자동으로 수행됨) 다른 것을 가리킵니다. 언든지실 DOM 수있다니에서 얻을 수 .event.currentTarget.
this이벤트가 처리되는 DOM 요소(현재 대상)에 대한 참조입니다.event.target이벤트를 시작한 요소를 나타냅니다.그들은 이 경우에도 같았고, 종종 그럴 수도 있지만, 항상 그렇지는 않습니다.
jQuery 이벤트 문서를 검토하면 이를 잘 이해할 수 있지만 요약하면 다음과 같습니다.
event.currentTarget
이벤트 버블링 단계 내의 현재 DOM 요소입니다.
event.delegateTarget
현재 호출된 jQuery 이벤트 핸들러가 연결된 요소입니다.
event.relatedTarget
이벤트와 관련된 다른 DOM 요소(있는 경우).
이벤트.표적
이벤트를 시작한 DOM 요소입니다.
jQuery를 사용하여 원하는 기능을 얻으려면 다음 중 하나를 사용하여 jQuery 개체로 래핑해야 합니다.$(this)또는$(evt.target).
그.attr()메서드는 DOM 요소가 아닌 jQuery 개체에서만 작동합니다.$(evt.target).attr('href')아니면 간단히evt.target.href당신이 원하는 것을 줄 것입니다.
jQuery가 "on" 메서드를 사용하여 이 변수를 처리하는 방식에는 상당한 차이가 있습니다.
$("outer DOM element").on('click',"inner DOM element",function(){
$(this) // refers to the "inner DOM element"
})
이를 와 비교하면 다음과 같습니다.
$("outer DOM element").click(function(){
$(this) // refers to the "outer DOM element"
})
http://api.jquery.com/on/ 은 다음과 같이 말합니다.
하면 jQuery가 됩니다.
this키워드는 이벤트가 전달되는 요소에 대한 참조입니다. 직접 바인딩된 이벤트의 경우this는 된 이벤트의 입니다.this요소 일치 선택기입니다.(참고:this같 않 수 있 음 을과 같지 않을 수 .event.target이벤트가 하위 요소에서 버블링된 경우.)요소에서 jQuery 개체를 만들어 jQuery 메서드와 함께 사용하려면 $(이)를 사용합니다.
우리가 가지고 있다면,
<input type="button" class="btn" value ="btn1">
<input type="button" class="btn" value ="btn2">
<input type="button" class="btn" value ="btn3">
<div id="outer">
<input type="button" value ="OuterB" id ="OuterB">
<div id="inner">
<input type="button" class="btn" value ="InnerB" id ="InnerB">
</div>
</div>
다음 출력을 확인합니다.
<script>
$(function(){
$(".btn").on("click",function(event){
console.log($(this));
console.log($(event.currentTarget));
console.log($(event.target));
});
$("#outer").on("click",function(event){
console.log($(this));
console.log($(event.currentTarget));
console.log($(event.target));
})
})
</script>
로 나는 는참하사항고를 합니다.$돔 요소를 래핑하여 jQuery 개체를 만듭니다. 이것이 우리가 항상 하는 방식입니다.
첫 번째 사건의 경우에는this,event.currentTarget,event.target모두 동일한 요소를 참조합니다.
에는 어떤 때, 두번째경, 랩된요대이위트면임리되거이우트에벤한소,면▁while되트리▁are거랩된▁delegate이위임,.event.target요소를 , "는 " " " 입니다.this그리고.event.currentTarget이벤트가 전달되는 위치를 참조합니다.
위해서this그리고.event.currentTargethttp://api.jquery.com/event.currenttarget/ 에 따르면 그것들은 정확히 같은 것입니다.
여기에는 브라우저 간 문제가 있습니다.
일반적인 비jQuery 이벤트 핸들러는 다음과 같습니다.
function doSomething(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;
//do stuff here
}
는 jQuery를 .evt그리고 목표를 다음과 같이 사용할 수 있게 합니다.this.: " 트벤핸들에서일이반인벤같다다핸습니"
function doSomething(evt) {
var $target = $(this);
//do stuff here
}
된 jQuery를 사용하는 입니다.evtPOJS 대상은 다음과 같습니다.
function doSomething(evt) {
var target = evt.target || evt.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;
//do stuff here
}
이벤트 핸들러 함수 또는 개체 메서드 내에서 "포함 요소"의 속성에 액세스하는 한 가지 방법은 특수한 이 키워드를 사용하는 것입니다.이 키워드는 현재 처리 중인 함수 또는 메서드의 소유자를 나타냅니다.그래서:
글로벌 기능의 경우 창을 나타냅니다.
개체 메서드의 경우 개체 인스턴스를 나타냅니다.
이벤트 핸들러에서 이는 이벤트를 수신한 요소를 나타냅니다.
예:
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown() {
alert(this);
}
</script>
</head>
<body>
<p onmouseup="mouseDown();alert(this);">Hi</p>
</body>
</html>
이 HTML을 각각 렌더링한 후 알림 창의 내용은 다음과 같습니다.
object Window
object HTMLParagraphElement
이벤트 개체는 모든 이벤트와 연결됩니다.웹 페이지에서 마우스 클릭 위치와 같은 "이벤트에 대한" 정보를 제공하는 속성이 있습니다.
예:
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown(event) {
var theEvent = event ? event : window.event;
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
alert(event);
alert(locString);
}
</script>
</head>
<body>
<p onmouseup="mouseDown(event);">Hi</p>
</body>
</html>
이 HTML을 각각 렌더링한 후 알림 창의 내용은 다음과 같습니다.
object MouseEvent
X = 982 Y = 329
'this'는 이벤트 수신기가 연결된 DOM 개체를 말합니다.'event.target'은 이벤트 수신기가 트리거된 DOM 개체를 나타냅니다.이벤트 수신기가 다른 DOM 개체에 대해 트리거하는 이유에 대한 자연스러운 질문이 발생합니다.이벤트 수신기 연결 상위 개체에 대해서도 트리거하기 때문입니다.
언급URL : https://stackoverflow.com/questions/12077859/difference-between-this-and-event-target
'programing' 카테고리의 다른 글
| Angular를 사용하여 브라우저를 탐지하는 방법은 무엇입니까? (0) | 2023.08.14 |
|---|---|
| 익스프레스 프레임워크를 사용하여 AJAX 요청을 작성하려면 어떻게 해야 합니까? (0) | 2023.08.14 |
| SQL: 특정 날짜에 대한 시간 범위에서 작성된 레코드 가져오기 (0) | 2023.08.14 |
| Sql 문이 Maria DB와 Mysql에서 서로 다른 결과를 가져옵니다. (0) | 2023.08.14 |
| swift를 사용하여 .svg 이미지를 표시하는 방법 (0) | 2023.08.14 |