CLASS web

JavaScript

체인지(변경) 이벤트 생성

체인지(변경) 이벤트 생성

이번에는 어떠한 변경사항이 발생했을 때 발생하는 체인지 이벤트에 대해서 알아보겠습니다.

1. inline 방식

저는 이 방식을 잘 사용하지 않지만 가끔 귀찮을 때 사용합니다.

태그에 onChange속성을 지정하고 값으로 실행문을 입력합니다.

예를 들어 select태그의 값을 선택했을 때 체인지이벤트를 지정한다면

  1. <select onChange="명령문">
  2. <option value="value">value</option>
  3. <option value="value2">value2</option>
  4. <option value="value3">value3</option>
  5. </select>

예를들어 선택한 값을 alert창으로 띄운다면 자신의 값을 의미하는 this.value를 사용하여 다음의 코드를 사용합니다.

  1. <select onChange="alert(this.value)">
  2. <option value="value">value</option>
  3. <option value="value2">value2</option>
  4. <option value="value3">value3</option>
  5. </select>

그럼 코드로 만들어서 실행해봅시다.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>pinkcoding - JavaScript - change event</title>
  6. </head>
  7. <body>
  8. <select onChange="alert(this.value)">
  9. <option value="value">value</option>
  10. <option value="value2">value2</option>
  11. <option value="value3">value3</option>
  12. </select>
  13. </body>
  14. </body>
  15. </html>

결과는 바로 아래에서 확인할 수 있습니다.







값을 변경할 때 마다 이벤트가 작동하여 alert창을 띄우고 선택한 값을 보여줍니다.

click event click event

저는 태그내에 자바스크립트 코드를 사용하는것을 선호하지 않아서 잘 사용하지 않습니다.

위와 같이 정말 간단하게 사용할 땐 사용할때도 있지만 태그안에 자바스크립트 코드가 섞이거나하면 보기에도 불편해서 별로 사용하지 않습니다.

2. script태그에서 체인지 이벤트 실행하기

script태그에서 이벤트를 생성하는 방법에 대해서 알아보겠습니다.

addEventLister() 함수를 사용하는 방법에 대해 학습합니다.

이 방법은 함수안에 첫번째 아규먼트로 이벤트명을 입력하는 방식입니다.

사용방법은 다음과 같습니다.

  1. 선택자.addEventLister('이벤트 유형', function(){ 명령문; });

선택자를 사용방법은 앞에서 학습했죠. ^^

바로 가봅시다.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>pinkcoding - JavaScript - change event</title>
  6. <script>
  7. window.onload = function(){
  8. var target = document.getElementsByTagName('select')[0];
  9. target.addEventListener('change', function(){
  10. alert(this.value);
  11. });
  12. };
  13. </script>
  14. </head>
  15. <body>
  16. <select>
  17. <option value="Mickey">Mickey</option>
  18. <option value="Minnie">Minnie</option>
  19. <option value="duffy">duffy</option>
  20. </select>
  21. </body>
  22. </html>

결과는 바로 아래에서 확인할 수 있습니다.







click event

값을 변경할때마다 alert창이 뜨고 선택한 값을 보여줍니다.

click event

자, 이렇게 change 이벤트에 대해 알아봤습니다. ^-^*





댓글 0개

정렬기준

PinkCoding

PinkCoding

X

PinkCoding

Web Scratch Pad

X

loading

            
            
        

컨텐츠로 돌아가기