관련 판독 값 :
JavaScript 이벤트 학습 요약 (v) JS의 마우스 이벤트 유형
//www.vevb.com/article/86259.htm
JavaScript 이벤트 학습 요약 (i) 이벤트 흐름
//www.vevb.com/article/86261.htm
JavaScript 이벤트 학습 요약 (iv) 이벤트 공개 멤버 (속성 및 방법)
//www.vevb.com/article/86262.htm
JavaScript 이벤트 학습 요약 (ii) JS 이벤트 핸들러
//www.vevb.com/article/86264.htm
JavaScript 이벤트 학습 요약 (iii) JS 이벤트 객체
//www.vevb.com/article/86266.htm
1. 이벤트 객체
1. 이벤트 객체를 이해합니다
이벤트는 브라우저에 객체, 즉 이벤트로 존재합니다. 이벤트를 트리거하면 이벤트 객체 이벤트가 생성되며, 여기에는 이벤트와 관련된 모든 정보가 포함되어 있습니다. 이벤트가 발생하는 요소, 이벤트 유형 및 특정 이벤트와 관련된 기타 정보가 포함됩니다.
예를 들어 : 마우스 작업에 의해 생성 된 이벤트에는 마우스 위치에 대한 정보가 포함됩니다. 키보드 작업에서 생성 된 이벤트에는 프레스 키와 관련된 정보가 포함됩니다.
모든 브라우저는 이벤트 객체를 지원하지만 지원 방법은 다릅니다. DOM에서는 이벤트 객체를 고유 한 매개 변수로 이벤트 처리 기능으로 전달해야합니다. 즉, 이벤트는 창 객체의 속성입니다.
2. HTML 이벤트 핸들러의 이벤트
<입력 id = "btn"type = "button"value = "click"onclick = "console.log ( 'html event handler'+event.type)"/>
이것은 로컬 변수 이벤트가 포함 된 함수를 만듭니다. 이벤트 객체는 이벤트를 통해 직접 액세스 할 수 있습니다.
3. Dom의 이벤트 개체
레벨 DOM0 및 레벨 DOM2의 이벤트 처리기는 이벤트를 매개 변수로 전달합니다.
<body> <input id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementByid ( "btn"); btn.onclick = function (event) {console.log ( "dom0 & click"); console.log (event.type); //click} bbtn.addeventListener("click ", function (event) {console.log ("dom2 & click "); console.log (event.type); // click}, false); </script> </body>4. IE의 이벤트 객체
첫 번째 경우 : DOM0 레벨 메소드를 통해 이벤트 핸들러를 추가 할 때 이벤트 객체는 창 객체의 속성으로 존재합니다.
<body> <input id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.onclick = function () {var event = window.event; console.log (event.type); // 클릭} </script> </body>두 번째 경우 : attachevent ()를 통해 추가 된 이벤트 핸들러와 이벤트 객체는 매개 변수로 전달됩니다.
<body> <input id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.attachevent ( "onclick", function (type) {console.log (event.type); // click}) </body> </body>그러나 나는 두 가지를 이해하지 못한다.
1. 이벤트 매개 변수를 DOM0 레벨 방법을 통해 추가 된 이벤트 핸들러로 전달할 수도 있습니다. 유형은 Window.event.type와 동일하지만 전달 된 이벤트 매개 변수는 Window.event와 다릅니다. 왜?
btn.onclick = function (event) {var event1 = window.event; console.log ( 'event1.type ='+event1.type); //event1.type=ClickConsole.log('event.type='+event.type); //event.type=ClickConsole.log('event1==event?'+(Event==Event1)); // event1 == event? false}2. AttachEvent를 통해 추가 된 이벤트 핸들러에서 통과 된 이벤트는 Window.event와 다릅니다. 왜?
<body> <입력 id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.attachevent ( "onclick", function (type) {console.log (event.type); //clickConsole.log("event==window.event?"+(Event=window.event));위는 편집자가 소개 한 JS 이벤트 개체에 대한 JavaScript 이벤트 학습 (III) 관련 지식의 요약입니다. 모든 사람에게 도움이되기를 바랍니다. 더 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!