코드 테스트 :
코드 사본은 다음과 같습니다.
<div id = "test"> <p> 테스트 텍스트 <p> </div>
<스크립트 src = "공급 업체/jQuery-2.1.1.js"> </script>
<cript>
test.addeventListener ( 'click', function (e) {console.log (e);}, false),
$ ( '#test'). on ( 'click', function (e) {console.log (e)});
</스크립트>
결과 분석 :
코드 사본은 다음과 같습니다.
JS-JQ-Event-Common : {
Altkey : False,
거품 : 사실,
버튼 : 0,
취소 가능 : 사실,
ClientX : 58,
고객 : 13,
ctrlkey : 거짓,
오프셋 : 50,
오프셋 : 5,
Pagex : 58,
Pagey : 13,
screenx : 58,
Screeny : 122,
보기 : 창,
어느 : 1,
유형 : '클릭',
타임 스탬프 : 1407761742842,
Metakey : False,
관련 타겟 : NULL,
대상 : div#test /*JQ-EVT의 대상은 반드시 jQuery 선택기와 일치하는 요소 일 필요는 없으며, 이벤트를 캡처하는 첫 번째 요소 일 수 있으며, 그 중 하나는 선택기와 일치하는 요소* /입니다.
},
JS-JQ-Event-Diff : {
currentTarget : null/*일반적으로 null 인 것 같습니다*/
|| div#test/*jq selector는 [currentTarget] 속성*/, 요소와 일치합니다.
Event -wase : 0 || 2,
토지 : div#테스트
},
JS-Event-Solo : {
X : 58,
Y : 13,
CancelBubble : False,
charcode : 0,
ClipboardData : 정의되지 않은,
Datatransfer : Null,
DefaultPrevented : False,
srcelement : div#test,
Fromelement : Null,
세부 사항 : 1,
키 코드 : 0,
Layerx : 58,
계층 : 13,
returnValue : true
},
JQ-Event-Solo : {
버튼 : 정의되지 않은,
데이터 : 정의되지 않은,
delegateTarget : div#test/*누가 듣고 있습니까? 그것이 요소입니다. */,
isdefaultprevented : 함수,
handleobj : 객체,
JQuery211024030584539286792 : True,
Originalevent : Mouseevent,
ShiftKey : False
}
바디 클릭 텔레그 테이트 이벤트 : {
CurrentTarget : htmlbodyElement,
delegatetArget : htmlbodyElement,
대상 : htmldivelement
}
요약 :
JS의 행사 매개 변수는 대상, 토일 및 srcelement에 관계없이 이벤트를 트리거하는 첫 번째 요소 (아직 버블 링되지 않음)를 가리키며 클릭 이벤트에서 Fromelement가 널입니다. 따라서 많은 요소로 부모 이벤트를 설정하면 트리거링 이벤트 가이 부모의 자식 요소 일 수 있습니다.
따라서 실제 응용 프로그램에서 부모를 참조하려면이를 사용할 수 있습니다.
JQ의 이벤트 매개 변수에서
CurrentTarget은 선택기와 일치하는 요소이며 원하는 요소입니다.
DelegateTarget은 이벤트를 듣고 있으며 위임 된 요소에 속하는 요소입니다.
동일한 JS의 이벤트 매개 변수의 대상은 이벤트를 트리거하는 첫 번째 요소이며 현재 타격만큼 유용하지 않습니다 (예를 들어 BodyClick 이벤트의 응용 프로그램과 같은 것은 아닙니다).
일부 학생들은 장치 이벤트의 요소를 직접 참조하고이를 사용해야한다고 말할 수 있습니다. CurrentTarget과 Target을 이해하는 이유는 무엇입니까? 이 아이디어는 당신이 jQuery를 사용하고 있으며 백본과 같은 도구를 사용한 적이 없다는 것을 증명합니다.
백본은 이것을 여러 곳에서 바인딩하므로 기능에서 이것을 사용하는 것은 불가능합니다.
코드 사본은 다음과 같습니다.
var view = backbone.view.extend ({
el : document.body,
이벤트 : {
'클릭 p': 'showtext'// Body가 P의 클릭 이벤트를 들으려면 대표단},
showtext : function (e) {
var p = e.currentTarget; // [currentTarget] 선택기와 일치하는 요소를 가져옵니다. // 나는 그것을 봤는데, 이것은 p 요소를 가리키지 않습니다},
로그 : 함수 (msg) {
Console.log (MSG);
}
});
JS와 JQ의 이벤트 객체는 비슷하지만 여전히 몇 가지 차이점이 있습니다. 이해했나요?