Java Script ( 이벤트 )

 

 

***** 마우스 관련

***** 키 관련

***** 폼 관련

***** 로드/ 기타 관련

 

 

 

 

 

• 이벤트 (Event)

 

-- 이벤트 : 동작 , 행위 

    -- >  click,  keydown ,  keypress ,  keyup  , mouseover , 

           mouseout ,  mouseleave ,  ........

 

-- 이벤트 리스너 ( Event Listener )

  --> 이벤트가 발생하는것을 대기하고있다가

       이벤트 발생이 감지되면 연결된 기능 (함수) 을 수행함.

       ex ) onclick,   onkeyup ,   onchange,  onsubmit ... ( on이벤트명 )

 

-- 이벤트 핸들러 ( Event Handler )

  --> 이벤트 리스너에 연결된 기능 (함수) 

       이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수.

 

 

 

 

• 인라인 이벤트 모델

-- 요소 내부에 이벤트 리스너, 핸들러를 작성하는 방법 . 

   on이벤트명 = " 함수명() " 

 

<h1>인라인 이벤트 모델</h1>

    <button onclick="fnTest1(this)">인라인이벤트모델 확인</button>   <!--인라인형식-->

function fnTest1( btn ){
               // JS로 요소에 CSS지정시
               // inline 형식으로 CSS 코드가 추가.
    btn.style.color="white";
    btn.style.backgroundColor = "black";
    btn.style.cursor = "pointer";
}

인라인 이벤트 모델

 

 

 

 

 

 

 

• 고전 이벤트 모델

 

-- 요소가 가지고 있는 이벤트 속성(이벤트리스너) 에

   이벤트 핸들러를 직접 연결하는방법.

 

-- 고전/ 표준 이벤트모델의 장점  :::  이벤트 제거가 가능함.

   (  on이벤트명 (이벤트리스너) 속성에 함수대신 null 로 대입 )

 

-- 고전 이벤트모델의 단점 

  --> 한 요소에 동일한 이벤트 리스너에 대한

       다수의 이벤트 핸들러를 작성할 수 없다.

       ( 마지막으로 대입된 이벤트핸들러만 적용 )      --> 해결방법 : 표준 이벤트 모델

<h1>고전 이벤트 모델</h1>

    <button id="btn1">고전 이벤트 모델 확인</button>

document.getElementById("btn1").onclick = function(){
    alert("버튼이 클릭됨");

    //고전/표준 이벤트모델 장점
    // 함수대신 null 로 대입하여 이벤트 삭제
    document.getElementById("btn1").onclick=null;
}

//하나의 요소에 여러 이벤트 추가 가능
document.getElementById("btn1").onmouseover = function(){
    document.getElementById("btn1").style.backgroundColor="red";
}
document.getElementById("btn1").onmouseout = function(){
    document.getElementById("btn1").style.backgroundColor="yellow";
}
// 고전 이벤트모델 단점
document.getElementById("btn1").onclick=function(){

alert("새로운 이벤트 처리방법")
}

// 마지막 이벤트핸들러만 적용

 

 

고전 이벤트 모델

 

 

 

 

 

 

 

 

 

 

• 표준 이벤트 모델  (실무에서 많이사용)

-- W3C 에서 공식적으로 지정한 이벤트 모델

   요소. addEventListener ( " 이벤트명 " , 함수 ) ;

-- 고전 이벤트 모델의 단점 보완 가능

   ( 한 요소에 여러 이벤트 핸들러 설정 가능 ) 

 

    <h1>표준 이벤트 모델</h1>

    <button id="btn2">클릭 해보세요,</button>

// 표준 이벤트 모델

const btn2 = document.getElementById("btn2");

btn2.addEventListener("click",function(){

                     // 이벤트 핸들러 내부의 this = 이벤트발생한요소(btn2)
    console.log(this);

    this.style.backgroundColor="pink";
    this.style.border="3px solid red";
    this.style.padding="10px";
    this.style.display="block";
})

                        // 고전이벤트모델 단점 보완 확인
btn2.addEventListener("click",function(){
    this.style.fontSize="20px";
    this.style.fontWeight="bold";
    this.style.color="red";
})

>

표준 이벤트 모델

 

 

 

 

 

 

• 실습 .  영어로 색을 치세요.

 

    <h1>배경색이 입력한 값으로 변하는 박스</h1>

    <div id="div1"></div>
    <input type="text" id="input1">

const input1 = document.getElementById("input1");
const div1 = document.getElementById("div1")

input1.addEventListener("input",function(){
    div1.style.backgroundColor=input1.value;
})

배경색이 입력한 값으로 변하는 박스

 

 

document.getElementById("input1").addEventListener("keyup",function(){

    const div1 = document.getElementById("div1");
    div1.style.backgroundColor=this.value;
})

이코드도 가능.

 

 

 

 

 

 

 

• 실습2. 나에게마우스를 올려봐

  <div id="box1">나에게 마우스를 올려봐</div>

var a = 0;
document.getElementById("box1").addEventListener("mouseover",function(){

        this.style.fontFamily="궁서";
        this.style.color="white";
        this.style.fontSize="70px";
        this.style.backgroundColor="red";
        this.innerText="사랑해";
        if(a < 9) {
            a++
            this.addEventListener("mouseover",function(){  
                this.innerText+="사랑해";         
            })  
        }else{
            this.addEventListener("mouseover",function(){
                this.style.color="red";
                this.style.backgroundColor="black";
                this.innerText="그만해!!!!"      
            })
        }
})

 

나에게 마우스를 올려봐