TIL 2022-10-05 복습, 이벤트

JYR00·2022년 10월 6일

TIL

목록 보기

21/60

오버로딩(Overloading) 오버라이딩(Overriding)

오버로딩

메서드의 이름은 같고 매개변수의 갯수나 타입이 다른 함수를 정의하는 것.
리턴값만을 다르게 갖는 오버로딩은 작성할 수 없다.

오버라이딩

상위클래스의 메서드를 하위 클래스가 재정의하는 것.
메서드의 이름,

이벤트와 이벤트처리기

이벤트

웹 브라우저나 사용자가 행하는 동작
웹 문서 영역 안에서 이루어지는 동작만을 가리킴
주로 마우스나 키보드 사용할 때, 웹 문서 불러올 때, 폼에 내용 입력할 때 발생.

이벤트 처리기

이벤트가 발생했을 때 처리하는 함수
이벤트 핸들러라고도 함.
이벤트가 발생한 html태그에 이벤트 처리기를 직접 연결.

DOM을 이용한 이벤트 처리기

DOM을 사용하면 자바스크립트가 주인이 되어 HTML요소를 가져와 이벤트 처리기를 연결

이곳에 들어가 참조하시오..
https://developer.mozilla.org/ko/docs/Web/JavaScript

JQuery

jquery사이트
https://jquery.com/download/

우리가 사용할 제이쿼리는 바로 이것!

https://developers.google.com/speed/libraries#jquery

밑에 이거 붙여넣기하면 jQuery 사용할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>

bxslider : 부트스트랩 카드 넘기는 기능을 제공하는 라이브러리
=> 웹브라우저 파편화 관련 없이 모든 웹사이트에 적용되는 jQuery

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>
    <script>

이걸 head에 넣으면 부트스트랩, jquery를 사용할 수 있다.

alert를 이용해보자

(1)inline 방식

<div class = "container">
    <div id ="div01">
        <button class="btn-primary" onclick="alert('inline방식으로 클릭 이벤트 발생(1)')">inline 방식 이벤트</button>

        <button class="btn btn-primary" onclick="popAlert()">inline방식에서 함수 호출</button>

<script>
    function popAlert(){
        alert("inline방식으로 클릭이벤트발생!!");
    }
</script>

(2) DOM객체를 이용한 방식

<div id="div02">
        <button class="btn btn-success" id="btn03">dom 객체를 사용한 방식</button>
        <div style="width: 200px; height: 200px; border: 1px dashed black; background-color: cornflowerblue;
    margin-top:5px" id="sub-div"></div>
    </div>

window.onload = function(){
        let btn03 = document.getElementById("btn03");
        btn03.onclick = clickEvent; // 아래에 생성한 함수를 활용 DOM사용

        function clickEvent(){
            alert("클릭이벤트가 발생했습니다.DOM");