관리 메뉴

막내의 막무가내 프로그래밍 & 일상

[Javascript] addEvenetListener 본문

웹/Javascript

[Javascript] addEvenetListener

막무가내막내 2019. 4. 17. 20:44
728x90

이러한 위와 같은 두가지 addEvenetListener 선언방식을 자주사용한다고한다.

즉 이벤트 등록 표준방법이며 이 방법을 쓰도록 하자.

 

 

 

P.S)

<button>Change color</button>


=======================================================


var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

이와 같이도 선언 할 수 있지만 이렇게 쓰는건 추천하지 않는다고 하니 처음나오는 방식을 사용하도록하자.

 

출처는 다음 사이트와 같으며 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

 

Introduction to events

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user clicks a button on a webpage, you might want to respond to that ac

developer.mozilla.org

이 사이트의 가장 상단에 있는 방식에 추천하지않는 방식이 있는데 스킵하고 그 밑에 있는 선언방식들을 보도록하자.


리스너 파라미터에 e가 들어가서 해당 엘리먼트의 여러가지 정보를 얻을 수 있음. 파라미터.target을 이용해서 정보를 가져올수 있다고 한다.

 

 

추가 자료 : https://developer.mozilla.org/en-US/docs/Web/Events

 

Event reference

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about wh

developer.mozilla.org

https://www.edwith.org/boostcourse-web/lecture/16700/

 

[LECTURE] 3) Browser Event, Event object, Event handler : edwith

들어가기 전에 어떤 영역을 마우스 클릭하거나, 화면을 스크롤 하거나 하는 작업에 따라서 브라우저는 반응합니다. 이런 것들은 모두 브라우저가 Event기반으로 동작되게 만들어졌기 때... - 부스트코스

www.edwith.org

 

728x90

' > Javascript' 카테고리의 다른 글

[javascript] ajax 예시 정리  (0) 2020.02.11
[Javascript] 자바스크립트 호이스팅  (0) 2019.04.17
Comments