DOM 기본 튜토리얼 : 이벤트 객체

브라우저의 이벤트는 모두 객체 형태로 존재합니다. 마찬가지로 IE 브라우저와 표준 DOM 브라우저 사이에 이벤트 객체를 얻는 데 차이가 있습니다. IE 브라우저에서 이벤트 객체는 Windows 객체의 속성 이벤트입니다. 다음 방법은 일반적으로 액세스하는 데 사용됩니다.

코드 사본은 다음과 같습니다.

op.onclick = function () {

varoevent = Window.event;

}

Window Object 속성이지만 이벤트 객체는 이벤트가 발생할 때만 액세스 할 수 있습니다. 모든 이벤트 처리 기능이 실행되면 객체가 사라집니다.

표준 DOM은 이벤트 객체를 고유 한 매개 변수로 이벤트 처리 기능으로 전달해야한다고 규정합니다. Firefox 브라우저에서 이벤트 객체에 액세스하는 것은 일반적으로 매개 변수로 사용되며 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

op.onclick = function (oevent) {

}

따라서 두 브라우저와 호환 되려면 다음 방법이 일반적으로 사용됩니다.

코드 사본은 다음과 같습니다.

op.onclick = function (oevent) {

if (window.event) oevent = window.event;

}

이벤트 객체를 얻은 후 브라우저는 마우스 이벤트, 키보드 이벤트 및 브라우저 이벤트와 같은 일련의 속성 및 메소드를 통해 다양한 이벤트를 처리 할 수 ​​있습니다. 기다리다

다음은 공통 속성 및 방법을 나열합니다.

위에서부터 두 가지 유형의 브라우저에는 여전히 유사성이 있음을 알 수 있습니다. 예를 들어, 유형 속성은 다양한 브라우저와 호환됩니다. "클릭"및 "MouseMove"와 같은 값을 검색하고 반환하는 이벤트 유형을 나타냅니다.

이것은 동일한 기능에서 여러 종류의 이벤트를 처리하는 데 매우 유용합니다.

다음과 같이 : 동일한 함수가 여러 이벤트를 처리합니다.

코드 사본은 다음과 같습니다.

<script language = "javaScript">

함수 핸들 (oevent) {

var disp = document.getElementById ( "display");

if (window.event) oevent = window.event; // 호환성을 처리하고 객체를 얻습니다

if (oevent.type == "click")

disp.innerhtml += "당신은 나를 클릭했습니다!";

else if (oevent.type == "마우스 오버")

disp.innerhtml += "당신은 광산으로 이동합니다";

}

Window.onload = function () {

var op = document.getElementById ( "box");

op.onclick = 핸들;

op.onmouseover = 핸들;

}

</스크립트>

<div>

<div id = "box"> </div>

<p id = "display"> me </p>를 클릭하십시오

</div>

위의 코드는 ID = "Box"의 div에 두 가지 이벤트 응답 함수를 추가 하고이 두 이벤트는 동일한 기능입니다.

이 기능에서 먼저 이벤트 객체 호환을 얻은 다음 이벤트 이름에 유형 속성 디스크를 사용하여 이벤트 이름을 고려하십시오.

Shift의 세 가지 키, ALT 및 CTRL의 세 가지 키를 감지 할 때 두 가지 유형의 브라우저에서 사용하는 방법은 정확히 동일하며, 둘 다 ShiftKey, Altkey 및 CtrlKey의 세 가지 속성을 갖습니다.

코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

var bshift = oevent.shiftkey;

var balt = oevent.alkey;

var bctrl = oevent.ctrlkey;

또한 마우스 포인터를 얻을 때 두 유형의 브라우저에서 사용되는 방법은 동일하며, 둘 다 ClientX, Clienty, ScreenX 및 Screeny를 포함합니다.

그중에서도 ClientX와 Client는 클라이언트 영역의 마우스의 위치를 ​​나타내며 브라우저의 상태 표시 줄, 메뉴 표시 줄 등을 포함하지 않습니다.

코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

var iclientx = oevent.clientx;

var iclienty = oevent.clienty;

Screenx 및 Screeny 전체 컴퓨터 화면에서 마우스의 위치를 ​​참조하고 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

var iscreenx = oevent.screenx;

var iscreeny = oevent.screeny;

여러 번 개발자는 이벤트가 해당 대상, 즉 이벤트의 목표에 의해 유발된다는 것을 알고 싶어합니다.

<p> 요소가 OnClick 이벤트 핸들러 함수를 할당한다고 가정하면 <p>는 클릭 이벤트가 트리거 될 때 대상으로 간주됩니다.

IE 브라우저에서 대상은 이벤트 객체의 srcelement 속성에 포함되어 있으며 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다. var otarget = oevent.srcelement;

표준 DOM 브라우저에서 대상은 대상 속성에 포함되며 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다. var otarget = oevent.target;

이벤트의 목표를 얻으십시오

코드 사본은 다음과 같습니다.

<script language = "javaScript">

함수 핸들 (oevent) {

var disp = document.getElementById ( "display");

if (window.event) oevent = window.event; // 호환성을 처리하고 객체를 얻습니다

var otarget;

if (oevent.srcelement) // 호환성을 처리하고 이벤트를 얻습니다

otarget = oevent.srcelement;

또 다른

otarget = oevent.target;

disp.innerhtml + = "요소 이름 :" + otarget.tagname.tagname + "<br>" + "요소 컨텐츠 :" + otarget.textContent + "<br>"

+ " + otarget.textContent +"<br> "

;

}

Window.onload = function () {

var op = document.getElementById ( "box");

op.onclick = 핸들;

}

</스크립트>

<div>

<div id = "box">

상자 내용

</div>

<p id = "display"> </p>

</div>

(보충) 요소 객체의 속성 http://www.w3school.com.cn/xmldom/dom_element.asp

(보충) 요소 객체의 방법 http://www.w3school.com.cn/xmldom/dom_element.asp

이벤트 대상은 두 가지 유형의 브라우저에서 다르므로 코드는 호환성을 보장해야합니다. 일반적인 관행은 객체를 IF 문의 조건으로 직접 사용하는 것입니다. 코드는 다음과 같습니다

코드 사본은 다음과 같습니다.

if (oevent.srcelement)

otarget = oevent.srcelement;

또 다른

otarget = oevent.target;

이 방법은 일반적으로 다른 속성에서 사용됩니다.