먼저 이벤트 객체를 소개하겠습니다. 이벤트는 브라우저에 객체, 즉 이벤트의 형태로 존재합니다. 이벤트가 발생하면 해당 이벤트와 관련된 모든 정보를 포함하는 이벤트 객체 이벤트가 생성됩니다. 이벤트를 발생시킨 요소, 이벤트 유형, 특정 이벤트와 관련된 기타 정보가 포함됩니다. 이 글은 자바스크립트 이벤트 중 js 이벤트 객체 관련 정보를 주로 소개하고 있어 매우 좋고 참고할만한 가치가 있습니다.
#🎜🎜 ## 🎜🎜#1. 이벤트 객체
1. 이벤트 객체에 대해 알아보세요# 🎜🎜#이벤트가 발생합니다. 브라우저에서는 객체, 즉 이벤트의 형태로 존재합니다. 이벤트가 발생하면 해당 이벤트와 관련된 모든 정보를 포함하는 이벤트 객체 이벤트가 생성됩니다. 이벤트를 발생시킨 요소, 이벤트 유형, 특정 이벤트와 관련된 기타 정보가 포함됩니다.
예: 마우스 조작으로 생성된 이벤트에는 마우스 위치에 대한 정보가 포함되며, 키보드 조작으로 생성된 이벤트에는 누른 키와 관련된 정보가 포함됩니다. 모든 브라우저는 이벤트 객체를 지원하지만 지원 방법이 다릅니다. DOM에서는 이벤트 객체를 이벤트 처리 함수에 유일한 매개변수로 전달해야 합니다. IE에서는 이벤트가 창의 속성입니다. 물체.2.event
<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>
3. DOM의 이벤트 객체
DOM0 수준 및 DOM2 수준 이벤트 핸들러 모두 이벤트를 매개변수로 전달합니다.
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.onclick=function(event){ console.log("DOM0 & click"); console.log(event.type); //click } btn.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="click"/> <script> var btn=document.getElementById("btn"); btn.onclick= function () { var event=window.event; console.log(event.type); //click } </script> </body>
두 번째 경우: AttachEvent()를 통해 추가된 이벤트 핸들러, 이벤트 객체가 매개변수로 전달됩니다.
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.attachEvent("onclick", function (type) { console.log(event.type); //click }) </script> </body>
1. 이벤트 매개변수는 DOM0 레벨 메소드를 통해 추가된 이벤트 핸들러에 전달될 수도 있지만 해당 유형은 window.event.type과 동일합니다. 이벤트 매개변수가 window.event와 다른 이유는 무엇입니까?
btn.onclick= function (event) { var event1=window.event; console.log('event1.type='+event1.type); //event1.type=click console.log('event.type='+event.type); //event.type=click console.log('event1==event?'+(event==event1)); //event1==event?false }
2.attachEvent를 통해 추가된 이벤트 핸들러에 전달된 이벤트가 window.event와 다릅니다. 이유는 무엇입니까?
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.attachEvent("onclick", function (type) { console.log(event.type); //click console.log("event==window.event?"+(event==window.event)); //event==window.event?false }) </script> </body>
위 내용은 이벤트 객체를 소개하겠습니다. js 이벤트 객체란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!