[자바스크립트] Event on접두사 속성

이벤트

• 사용자(사용자의 행위)에 의하여 주로 발생이 된다.
• 마우스, 키보드, 버튼, 양식(form)전송, 페이지로드 (html 문서), 포커스(커서) 등 다양한 변화 혹은 전달 등 행위가 실행 된다.
• 변화에 따른 발생 혹은 시점이 일어 났을 경우 추가적인 코드로 실행
• 자바스크립트의 이벤트는 주로 콜백함수, 클로져와 주로 사용된다
  • 이벤트 (event)
  • [명사] [정보·통신 ] 컴퓨터를 사용할 때 프로그램이 반응하도록 사용자가 생성하는 작업. 키보드의 키를 누르는 것이 대표적이며, 마우스 버튼을 누르거나 마우스를 이동하는 것 따위가 있다  출처: 네이버 백과사전 

 

 

 

자바스크립트의 이벤트 등록 종류

• html 요소를 활용하여 이벤트 등록(on 접두사 속성)

html 요소 이벤트

• html의 모든 요소가 on 접두사의 속성을 가짐
• on 속성값에는 자바스크립트 코드가 들어간다.
• on 속성 행위가 사용자에 이루어 졌을 시 등록된 자바스크립트 코드가 실행 주로 자바스크립트의 함수와 함께 사용된다
• 함수와 같이 사용시 이벤트 발동되어 해당 함수가 실행되었을 때 인수에 this키워드 넣으면 이벤트 발동할 수 있다.

자주 사용되는 on 접두사 속성 종류

 

• ​onchange : 사용자가 선택하여 값을 바꾸었을 경우
• onkeyup : 키보드를 눌렀다가 뗐을 때
• onkeydowo : 키보드를 누를 때
• ​onkeypress : 키보드를 누르고 있을 때
• onbluc : 키보드 커서가 빠져 나갔을 때
• onfucus: 키보드 커서가 빠져 나갔을 때 ​​​​

onclick

 

    function myclick1(userName){
        alert(userName + '안녕하세요2');
    }
    function myclick2(obj){

        console.log({obj});  
        console.log(obj.innerText);
        obj.innerText = '3번재 버튼';
        console.log(obj.value);
        obj.value = '3번째 버튼입니다.';
        console.log(obj.value);

남 여

function myFormFn(){
    console.log(myForm);
    console.log(myForm.myName.value);
    console.log(myForm.myName);
    console.log(myForm.myGender);
    myForm.myName.value='이순신'
    console.log(myForm.myAge);
    myForm.myAge.value = 40;
    if(myForm.myAddr.value == ''){
        alert('주소를 입력해주세요');
        myForm.myAddr.focus();
        return;
    }

    //radio, checkbox 태그는 체크가 되었는 확인 할 수 있는 속성 checked가 있다.
    //체크가 되어 있다면 checked 속성의 값이 true, 아니라면 false가 반환이 된다.
    var cnt = 0;
    for(var i = 0; i<myForm.myGender.length; i++){
        if(myForm.myGender[i].checked){
            cnt++
        }

    }
    if(cnt == 0){
        alert('성별을 체크해주세요');
        myForm.myGender[0].checked = true;      
        return;
    }

    myForm.submit();
}

 

onchange

select는 선택된 값을 바로 value 속성을 접근하여 값을 가지고 올 수 있다.

(하위요소인 option 태그 객체까지 접근하여 seleced 된 대상의 value값을 가지고 올 필요까지 없다.)

선택 1 2

function myChange(obj){
        console.log({obj});
        console.log(obj.value);

        // option에 있는 값을 대입시 일치하는 option태그는 강제 seleced
        obj.value = '2';
    }