JS의 이벤트 객체와 JQ_javascript 스킬의 차이점 분석

코드 테스트:

코드 복사 코드는 다음과 같습니다.

테스트 텍스트

<스크립트> test.addEventListener('click', function(e){console.log(e);}, false),
$('#test').on('클릭', function(e){console.log(e)})




결과 분석:

코드 복사 코드는 다음과 같습니다. js-jq-이벤트-공통:{

altKey: 거짓,

거품: 사실,
버튼: 0,
취소 가능: 사실,
clientX: 58,
clientY: 13,
Ctrl 키: 거짓,
offsetX: 50,
오프셋Y: 5,
페이지X: 58,
페이지Y: 13,
screenX: 58,
screenY: 122,
보기: 창,
어느 것: 1,
유형: '클릭',
타임스탬프: 1407761742842,
메타키: false,
관련 타겟: null,
target: div#test /*jq-evt의 대상은 반드시 jQuery 선택기와 일치하는 요소일 필요는 없습니다. 이벤트를 캡처하는 첫 번째 요소일 수 있으며, 버블링이 발생하면 요소 중 하나가 요소가 됩니다. 선택자와 일치*/
},
js-jq-event-diff:{
currentTarget: null/*일반적으로 null인 것 같습니다*/
|| div#test/*jq 선택기와 일치하는 요소는 [currentTarget] 속성에 있습니다*/,
이벤트 단계: 0 || 2,
toElement: div#test
},
js-이벤트-솔로:{
x: 58,
y: 13,
cancelBubble: 거짓,
charCode: 0,
클립보드데이터: 정의되지 않음,
데이터 전송: null,
defaultPrevented: false,
srcElement: div#test,
fromElement: null,
세부정보: 1,
키코드: 0,
레이어X: 58,
layerY: 13,
반환값: true
},
jq-이벤트-솔로: {
버튼: 정의되지 않음,
데이터: 정의되지 않음,
DelegateTarget: div#test/*누가 듣고 있나요? 이것이 요소입니다. */,
isDefaultPrevented: 함수,
handlerObj: 객체,
jQuery211024030584539286792: 참,
원본 이벤트: MouseEvent,
ShiftKey: 거짓
}
본문-클릭-대리자-이벤트: {
currentTarget: HTMLBodyElement,
DelegateTarget: HTMLBodyElement,
대상: HTMLDivElement
}



요약:

js의 이벤트 매개변수(target, toElement 또는 srcElement)에서 모두 이벤트를 트리거하는 첫 번째 요소를 가리키며(아직 버블링되지 않음) fromElement는 클릭 이벤트에서 null입니다. 많은 요소의 상위 컨테이너 상위 이벤트를 포함하도록 설정한 경우 해당 이벤트는 이 상위 요소의 하위 요소에 의해 트리거될 가능성이 높습니다.

따라서 실제 응용에서는 부모를 참조하고 싶을 경우에는 이것만 사용하면 됩니다

jq의 이벤트 매개변수에서

currentTarget은 원하는 요소인 선택기와 일치하는 요소입니다.
DelegateTarget은 이벤트를 수신하는 요소이며 위임된 요소
에 속합니다. 대상은 js의 이벤트 매개변수에 있는 대상과 동일합니다. 이벤트를 트리거하는 첫 번째 요소입니다. currentTarget만큼 유용하지는 않습니다(bodyclick 이벤트의 애플리케이션과 같이 반드시 그런 것은 아닙니다)
어떤 학생들은 장치 이벤트의 대상이 되는 요소를 직접 참조하려면 이것을 사용하면 된다고 말할 수도 있습니다. 이 아이디어는 당신이 단지 jQuery를 사용하고 있고 Backbone과 같은 도구를 사용한 적이 없다는 것을 증명합니다.

Backbone은 이것을 여러 곳에서 바인딩하므로 해당 기능에서 사용할 수 없습니다.

코드 복사 코드는 다음과 같습니다. var view = Backbone.View.extend({

엘: document.body,

이벤트: {
'click p': 'showText' // p의 클릭 이벤트를 모니터링하도록 본문을 위임합니다 },
showText: 함수(e){
var p = e.currentTarget; // [currentTarget] 선택기와 일치하는 요소를 가져옵니다. this.log(p.innerHTML) // 보시다시피, 이것은 p 요소를 가리키지 않습니다. },
로그: 함수(msg){
console.log(msg)
}
});

JS와 JQ의 이벤트 객체는 유사하지만 여전히 몇 가지 차이점이 있습니다.