이벤트 객체를 소개하겠습니다. js 이벤트 객체란 무엇인가요?-JS 튜토리얼-php.cn

이벤트 객체를 소개하겠습니다. js 이벤트 객체란 무엇인가요?

php是最好的语言

풀어 주다： 2018-07-26 12:53:37

원래의

1712명이 탐색했습니다.

먼저 이벤트 객체를 소개하겠습니다. 이벤트는 브라우저에 객체, 즉 이벤트의 형태로 존재합니다. 이벤트가 발생하면 해당 이벤트와 관련된 모든 정보를 포함하는 이벤트 객체 이벤트가 생성됩니다. 이벤트를 발생시킨 요소, 이벤트 유형, 특정 이벤트와 관련된 기타 정보가 포함됩니다. 이 글은 자바스크립트 이벤트 중 js 이벤트 객체 관련 정보를 주로 소개하고 있어 매우 좋고 참고할만한 가치가 있습니다.

#🎜🎜 ## 🎜🎜#

1. 이벤트 객체

1. 이벤트 객체에 대해 알아보세요

# 🎜🎜#이벤트가 발생합니다. 브라우저에서는 객체, 즉 이벤트의 형태로 존재합니다. 이벤트가 발생하면 해당 이벤트와 관련된 모든 정보를 포함하는 이벤트 객체 이벤트가 생성됩니다. 이벤트를 발생시킨 요소, 이벤트 유형, 특정 이벤트와 관련된 기타 정보가 포함됩니다.

예: 마우스 조작으로 생성된 이벤트에는 마우스 위치에 대한 정보가 포함되며, 키보드 조작으로 생성된 이벤트에는 누른 키와 관련된 정보가 포함됩니다.

모든 브라우저는 이벤트 객체를 지원하지만 지원 방법이 다릅니다. DOM에서는 이벤트 객체를 이벤트 처리 함수에 유일한 매개변수로 전달해야 합니다. IE에서는 이벤트가 창의 속성입니다. 물체.

2.event

<input id="btn" type="button" value="click" onclick=" console.log(&#39;html事件处理程序&#39;+event.type)"/>

로그인 후 복사

은 지역 변수 event를 포함하는 함수를 생성합니다. 이벤트 개체는 이벤트를 통해 직접 액세스할 수 있습니다.

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(&#39;event1.type=&#39;+event1.type); //event1.type=click
console.log(&#39;event.type=&#39;+event.type); //event.type=click
console.log(&#39;event1==event?&#39;+(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 이벤트 객체 관련 지식(3)이 소개한 JavaScript 이벤트 학습을 요약한 내용입니다. 더 알고 싶으시다면 스크립트하우스 홈페이지를 주목해주세요! ### ## ## ## ## #####관련 권장 사항 :#🎜🎜 ## ## ## ## ## ##### 🎜🎜 #JavaScript 이벤트 학습 요약(2) js 이벤트 핸들러

javaScript 이벤트 학습 요약(4) 이벤트의 공개 멤버(속성 및 메소드) )