English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 현재 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

JavaScript 매일 배워야 할 이벤트

이 글은 꽤 오래전에 썼었지만, sf 저장 방식의 버그 때문에 그때 많은 것을 썼지만 저장되지 않았습니다. 이를 쓰지 않은 것은 큰 아쉬웠습니다. 오늘은 바쁘지 않아, 추가하려고 했습니다. 또한, 제 JavaScript 학습 요약을 완료하는 것을 목표로 했습니다.　

이곳에서는 주로 JS와 관련된 이벤트를 논의하겠습니다——　

이벤트 처리 프로그램　

DOM에서 일부 이벤트를 정의했으며, 특정 이벤트에 응답하는 함수는 이벤트 처리 프로그램(또는 이벤트 리스너)이라고 합니다. 이벤트 처리 프로그램의 이름은 일반적으로 'on'으로 시작합니다. 예를 들어, onclick과 같습니다　

이벤트 버블과 캡처　

이벤트 스트림은 페이지에서 이벤트를 수신하는 순서를 말합니다. 인터넷 익스플로러, 파이어폭스, 크롬 브라우저는 모두 이벤트 버블을 지원합니다. 이벤트 버블이란 이벤트가 가장 구체적인 요소에서부터 시작하여 점진적으로 불구체적인 노드로 상승하는 것을 의미합니다. 반대로 이벤트 캡처는 넷스케이프가 제안한 것으로, 이벤트 버블과 캡처는 다음과 같이 보입니다:

　

이벤트 캡처는 넷스케이프가 유일하게 지원하는 이벤트 스트림 모델이지만, 현재 인터넷 익스플로러9파이어폭스와 구글도 이러한 이벤트 스트림 모델을 지원합니다.　

이벤트 버블의 장점　

이벤트가 버블 메커니즘을 가지고 있기 때문에, 버블의 원리를 활용하여 이벤트를 부모 레벨에 추가하고, 실행 효과를 유발할 수 있습니다. 이렇게 하면 성능을 향상시키는 것이 장점입니다.

 <head lang="en">
 <meta charset="UTF-8>
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var aUl = document.getElementsById("bubble");
  var aLi = aUl.getElementsByTagName("li");
  for(var i = 0;i<aLi.length;i++){
  aLi[i].onmouseover = function () {
   this.style.backgroundColor = "blue";
  };
  ali[i].onmouseout = function () {
   this.style.backgroundColor = "";
  }
  }
 };
 </script>
</head>
<body>
<div>
 <ul id = "bubble">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>
</body>

이렇게 하면 li에 마우스 이벤트를 추가할 수 있습니다. 하지만 많은 li가 있을 경우 for문을 사용하면 성능에 영향을 미칠 수 있습니다.　

이제 이러한 효과를 이벤트 위임 방식으로 구현할 수 있습니다. html은 변하지 않습니다:

 <script type="text/javascript">
 window.onload = function () {
 var aUl = document.getElementsById("bubble");
 var aLi = aUl.getElementsByTagName("li");
 //어떤 이벤트에서든, 조작하는 요소가 이벤트 소스라면.
 // ie: window.event.srcElement
 // 기준하면 :event.target
 aUl.onmouseover = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() == "li"){
  target.style.background = "blue";
  }
 };
 aUl.onmouseout = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() = "li"){
  target.style.background = "";
  }
 }
 };
</script>

그럼, 이벤트 퍼블리싱을 억제하는 방법은 무엇인가요? 아래의 예제를 보세요:

 <div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//이벤트 버블링을 방지한 후, 회색 상자를 클릭하면 전체 과정에서 대화 상자가 한 번만 떠납니다(기본 상태와 비교하여 주세요)
function showMsg(obj,e)
{
 alert(obj.id);
 stopBubble(e)
}
//이벤트 버블링 방지 함수
function stopBubble(e)
{
 if (e && e.stopPropagation)
 e.stopPropagation()
 else
 window.event.cancelBubble=true
}
</script>

검은 외곽 효과 그래픽을 클릭하세요:

　

DOM 0레벨 이벤트 핸들러　

이벤트 핸들러를 지정하는 것은 일반적으로 콜백 함수를 이벤트 핸들러의 속성에 할당하는 것입니다. 각 요소는 자신만의 이벤트 핸들러 속성을 가지고 있습니다(속성은 소문자, 예를 들어 onclick)

 btn.onclick = function(){
 console.log('hello');
};

DOM 0레벨 이벤트 핸들러는 요소의 메서드로 간주됩니다. 따라서, this는 현재 요소를 가리킵니다:

 var btn = document.getElementById('myDiv');
//DOM에서 발생하는 이벤트는 이벤트 객체 event를 생성합니다
btn.onclick = function (event) {
 alert(this.id);//myDiv 
};

DOM level 1

DOM level 1 HTML과 XML 문서 모델에 집중합니다. 그것은 문서 탐색 및 처리 기능을 포함하고 있습니다.　

DOM level 1 에 1998 년 10 월. 1 일이 W3C 권고 표준.　

2번째 버전의 작업 초안은 2000년 9 월. 29 일.　

值得一提点是：DOM level 0은 W3C 규范. 그러나 Netscape Navigator에 대해선 단순히 Netscape Navigator 3.0과 IE 3.0에서의 등가 기능적 정의.　

DOM 2가 이벤트 핸들러.　

DOM 2가 두 가지 메서드를 정의하여 이벤트 핸들러를 지정하고 제거하는 작업을 수행합니다: addEventListener()와 removeEventListener()이며, 모두 세 가지 매개변수를 받습니다:

1.이벤트 이름. 예를 들어, 위의 click
2.이벤트 핸들러로 사용되는 함수.
3.부울값(true는 이벤트 핸들러 호출 단계를 의미하고, false는 버블링 단계를 의미합니다)

Element 객체의 addEventListener 메서드를 통해 이벤트의 콜백 함수도 정의할 수 있습니다.

 //element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
 console.log(this.id);
},false);

IE의 이벤트 처리기　

IE9이전의 IE 브라우저는 addEventListener()와 removeEventListener()를 지원하지 않습니다.　

다른 브라우저와 달리, IE는 attachEvent()와 detachEvent() 메서드를 사용하여 DOM에 이벤트 처리기를 추가합니다. 그리고 IE8및 이전 버전은 이벤트 퍼지를 지원하기 때문에 두 개의 매개변수만을 받습니다:
1、이벤트 처리기 이름(앞에 on을 추가해야 합니다)
2、이벤트 처리기 함수
attachEvent()를 사용하여 추가된 이벤트 처리기는 다음과 같습니다:

 var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
 console.log(this.id);
});

attachEvent() 메서드를 사용하는 경우, 이벤트 처리기는 전역 스파이스에서 실행되므로, 이때 this는 window입니다.　

이벤트 객체
　
DOM에 어떤 이벤트를 트리거할 때마다, 이벤트 객체 event가 생성되며, 이 객체는 이벤트와 관련된 모든 정보를 포함하고 있습니다. 이벤트를 유발한 요소, 이벤트의 유형, 그리고 특정 이벤트와 관련된 다른 정보 등을 포함합니다. 이벤트 객체는 첫 번째 매개변수로 이벤트 리스너 콜백 함수에 전달됩니다. 이 이벤트 객체를 통해 현재 이벤트와 관련된 많은 정보를 얻을 수 있습니다:
　type (String) — 이벤트의 이름
target (node) — 이벤트의 원점 DOM 노드
currentTarget?(node) — 현재 콜백 함수가 트리거된 DOM 노드(다음에 상세히 설명할 것)
bubbles (boolean) — 이 이벤트가 퍼지 이벤트인지를 나타냅니다. (다음에 설명할 것)
preventDefault(function) — 이 메서드는 브라우저 내 사용자代理가 현재 이벤트와 관련된 기본 동작을 트리거하는 것을 방지합니다. 예를 들어, <a> 요소의 click 이벤트가 새로운 페이지를 로드하는 것을 방지합니다.
cancelable (boolean) — 이 변수는 이 이벤트의 기본 동작이 event.preventDefault() 호출을 통해 방지될 수 있는지를 나타냅니다.
stopPropagation (function) — 이벤트의 추가 캡처나 버블링을 취소합니다. bubbles가 true일 때 이 메서드를 사용합니다.
eventPhase：이벤트가 현재 위치한 단계를 나타내는 숫자를 반환합니다. 0은 이벤트가 DOM 표층에서 목표 요소로 전파 시작.1캡처 단계.2이벤트가 목표 요소에 도달할 때.3버블 단계.

또한, 이벤트 객체는 다른 많은 속성을 가질 수도 있습니다. 그러나 이들은 특정 event에 대해 있습니다. 예를 들어, 마우스 이벤트는 clientX와 clientY 속성을 포함하여 마우스가 현재 뷰윈도의 위치를 나타냅니다.　

또한, stopPropagation() 메서드는 즉시 이벤트가 DOM에서의 전파를 중지하도록 사용됩니다. 즉, 더 이상의 이벤트 버블링이나 캡처를 취소합니다.

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 alert("clicked");
 event.stopPropagation();
};
//document.body에 있는 이벤트 처리기를 트리거하지 않도록 합니다
document.body.onclick = function (event) {
 alert("Body clicked"); 
};

이벤트 처리기가 실행 중인 동안에만 event 객체가 존재합니다. 이벤트 처리기가 실행이 끝나면 event 객체는 자동으로 파괴됩니다.　

IE의 이벤트 객체　

DOM 0단계에서 이벤트 처리기를 추가할 때, event 객체는 window 객체의 속성으로 존재합니다:

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 var event = window.event;
 alert(event.type);//click
};

IE의 event 객체는 생성된 이벤트와 관련된 속성과 메서드도 포함합니다.
cancleBubble 부울　　 기본 값은 false입니다. true로 설정하면 이벤트 버블링을 취소합니다. dom의 stopPropagation() 메서드와 동일.
returnValue　　 부울　　　 기본 값은 true입니다. false로 설정하면 기본 행동을 취소합니다. dom의 preventDefault()와 동일.
srcElement　　요소　 　 이벤트의 대상, dom의 target 속성과 동일.
type　　　　 문자열　　 트리거된 이벤트 유형.

click 이벤트　

사용자가 클릭한 후, event 객체는 다음 속성을 포함합니다.
　pageX, pageY: 클릭 위치가 html 요소에 대한 좌표이며, 단위는 픽셀입니다.
clientX, clientY: 클릭 위치가 뷰포트에 대한 좌표이며, 단위는 픽셀입니다.
screenX, screenY: 클릭 위치가 장치 디스플레이 화면에 대한 좌표이며, 단위는 장치 하드웨어 픽셀입니다.

clientX, clientY　

그래프: clientX와 clientY, 이들의 값은 이벤트가 발생할 때 마우스 포인터가 화면의 수평 및 수직 좌표에 위치한다고 가정합니다(스크롤 바를 포함하지 않습니다).

오프셋

다음과 같이4요소의 오프셋을 얻을 수 있는 attribute가 있습니다.

　　 （1）offsetHeight: 요소가 수평 방향으로 사용하는 공간 크기, 픽셀로 계산됩니다. 요소의 높이, (보이는) 수평 스크롤 바의 높이, 상단 테두리 높이 및 하단 테두리 높이를 포함합니다.

　　 （2）offsetWidth: 요소가 수직 방향으로 사용하는 공간 크기, 픽셀로 계산됩니다. 요소의 너비, (보이는) 수직 스크롤 바의 너비, 왼쪽 테두리 너비 및 오른쪽 테두리 너비를 포함합니다.

　　 （3）offsetLeft: 요소의 좌측 외부 테두리가 포함 요소의 좌측 내부 테두리와의 픽셀 거리입니다.

　　 （4）offsetTop: 요소의 상단 외부 테두리가 포함 요소의 상단 내부 테두리와의 픽셀 거리입니다.

pageX, pageY　

이 두 개의属性는 마우스 포인터가 페이지 내에서의 위치를 나타내며, 페이지가 스크롤하지 않는 경우 pageX, pageY의 값은 clientX, clientY의 값과 같습니다.　

스크롤 크기　

스크롤 크기, 스크롤 내용을 포함하는 요소의 크기입니다.

　　　 다음은4스크롤 크기와 관련된属性가 있습니다.

　　 （1）scrollHeight: 스크롤 바가 없는 경우 요소의 내용의 총 높이입니다.

　　 （2）scrollWidth: 스크롤 바가 없는 경우 요소의 내용의 총 너비입니다.

　　 （3）scrollLeft: 내용 영역 왼쪽에 숨겨진 픽셀 수입니다. 이属性를 설정하여 요소의 스크롤 위치를 변경할 수 있습니다.

　　 （4）scrollTop: 내용 영역 위에 숨겨진 픽셀 수입니다. 이属性를 설정하여 요소의 스크롤 위치를 변경할 수 있습니다.

포커스 이벤트　

포커스 이벤트는 페이지 요소가 포커스를 얻거나 잃을 때 발생하며, 다음과 같은4포커스 이벤트:
　1.blur: 요소가 포커스를 잃을 때 발생하며, 이 이벤트는 퍼블릭이 발생하지 않습니다.
　2.focus: 요소가 포커스를 얻을 때 발생하며, 퍼블릭은 발생하지 않습니다.
　3.focusin: 요소가 포커스를 얻을 때 발생하며, 퍼블릭이 발생합니다.
　4.focusout: 요소가 포커스를 잃을 때 발생하며, 퍼블릭이 발생합니다.　

마우스 이벤트　

DOM 3레벨이 정의되었습니다.9마우스 이벤트:
　click: 사용자가 마우스의 메인 버튼(일반적으로 마우스의 왼쪽 버튼 또는 엔터 키)을 클릭할 때 발생합니다.

dbclick: 사용자가 마우스를 더블 클릭할 때 발생합니다.

mousedown: 사용자가 마우스의 어떤 키를 누를 때마다 발생하는 이벤트이며, 키보드를 통해 발생시키는 것은 불가능합니다.

mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。

mousemove: 마우스가 어떤 요소 주위를 움직이면 반복적으로 발생하며, 이 이벤트는 키보드 이벤트를 통해 발생할 수 없습니다.

mouseout: 마우스가 요소에서 벗어나면 발생하며, 키보드를 통해 발생할 수 없습니다.

　mouseover: 마우스가 요소에 들어가면 발생하며, 키보드를 통해 발생할 수 없습니다.

mouseenter: mouseover와 유사하지만, 버블링하지 않으며, 커서가 자식 요소에 있을 때는 발생하지 않습니다.

mouseleave: mouseout과 유사하지만, 버블링하지 않습니다. 요소 위에 있을 때는 발생하지 않습니다.

mouseup: 마우스 키를 떼면 발생하며, 키보드를 통해 발생할 수 없습니다.
마우스 이벤트 처리 프로그램에 전달되는 이벤트 객체는 clientX와 clientY 속성을 가지며, 이들은 마우스 포인터가 포함된 창에 대한 좌표를 지정합니다. 창의 스크롤 이동량을 추가하여 마우스 위치를 문서 좌표로 변환할 수 있습니다.

페이지 상의 모든 요소는 마우스 이벤트를 지원합니다.mouseenter와 mouseleave를 제외하고, 모든 이벤트는 버블링이 가능하며, 기본 행동은 취소될 수 있습니다. 하지만 마우스 이벤트의 기본 행동을 취소하면 다른 이벤트에 영향을 줄 수 있습니다. 왜냐하면 일부 마우스 이벤트는 상호依存관계가 있기 때문입니다.　

（1）drag 이벤트
　drag 이벤트는 원본 객체가 끌어다놓혀지는 동안 발생합니다.
（2）dragstart, dragend 이벤트
　dragstart 이벤트는 사용자가 마우스로 어떤 객체를 끌어다놓기 시작할 때 발생하며, dragend 이벤트는 끌어다놓기를 끝내면 발생합니다.
（3）dragenter, dragleave 이벤트
　dragenter 이벤트는 원본 객체가 목표 객체로 들어가면 목표 객체에서 발생합니다. dragleave 이벤트는 원본 객체가 목표 객체를 떠나면 목표 객체에서 발생합니다.
（4）dragover 이벤트
　dragover 이벤트는 원본 객체가 다른 객체 위로 끌어다놓혀 있을 때, 후자에서 발생합니다.
（5）drop 이벤트

　원본 객체가 목표 객체 위로 끌어다놓혀 마우스를 떼었을 때, 목표 객체에서 drop 이벤트가 발생합니다.

이 글의 모든 내용이 끝입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한, 노래 외침 강의에 많은 지지를 부탁드립니다.

기본 튜토리얼
추천 합니다