웹브라우저 Javascript

inline

토픽 웹브라우저 Javascript

인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다.

<input type="button" onclick="alert('Hello world');" value="button" />

이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.

<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다.
  2. 임앤강
    2022-02-14 감사합니다.
  3. 드림보이
    2021.12.29. 이벤트 - 등록방법 - inline 파트 수강완료
  4. pmxsg
    2021.12.23. 수강
  5. labis98
    20210912 좋은 강의 감사합니다.
  6. 박병진
    2020.12.10 완료 / 마지막 까지 집중해서 공부해야 겠습니다.
  7. 박병진
    2020.12.10 완료
  8. anne
    완료
  9. 정승옥
    완료
  10. 한강
    Event inline 방식
    200709
  11. Joo.Love.
    #html(정보) #css(디자인) #javascript(제어) 깔끔한 페이지
  12. ㅎㅅㅁ
    200212
  13. 굼벵이
    완료
  14. 미완성
    20190109
  15. JuicyFresh
    감사합니다.
  16. 김수
    20180901 감사함미다....
  17. SlowStarter
    감사합니다!
  18. 생선과고양이
    20180430 감사합니다
  19. milhouse
    엉덩이로 말합니다. 감사합니다.
  20. 박인호
    12-30
    수강완료.
  21. Byungsoo Kim
    감사합니다. <<< 2020.09.30
  22. 카라멜팝콘
    lol
    대화보기
    • crable@
      감사합니다
    • 폭스킴
      This is Sparta!
    • tachyon
      감사합니다
    • JustStudy
      2016.07.12 화
      고맙습니다 3.
    • JustStudy
      2016.07.02 토
      고맙습니다 2.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 28
      잘보고 갑니다~!
    • JustStudy
      고맙습니다
    • park.
      신기하네여
    • 쥬슈야
      저는 이벤트부분 들어오면서 집중도가 많이 올라가네요.
    • 코딩!
      감사합니다!
    • 호두과자
      감사합니다^^
    • 육점이
      감사합니다.
    • 메롱
      강의 잘 듣고 있습니다.>~~ 너무 재밌습니다. 감사합니다.
    • 키위
      정독하고있습니다. 감사합니다!!!
    • 규빈이아빠
      강의 잘 들었습니다. 귀에 잘 들어오네요^^