49일차 : 이벤트, 효과

20230206

 

1. 이벤트

1 - 1 ) 이벤트 연결 ( 인라인, 고전, 표준 )

    <h2>이벤트를 연결하는 방법</h2>
    <h3>1. inline이벤트 : 자바스크립트와 동일 onclick = "func1();"</h3>
    <h3>2. 고전이벤트모델 : 요소.이벤트이름(function(){})</h3>
    <p> 예 : $("btn1").click(function(){})</p>
    <h3>3. 표준이벤트모델 : 요소.on("이벤트이름", function(){})</h3>
    <div id="test1">
        <div class="d1" onclick="func1();">test-1</div>
        <div class="d1">test-2</div>
        <div class="d1">test-3</div>
    </div>

//인라인이벤트모델
function func1(){
    console.log("인라인 이벤트 모델!");
} 

//고전이벤트모델
/*
$(".d1").click(function(){
    console.log($(this).text());
});
*/

//표준이벤트모델
/*
$(".d1").on("click", function(){
    console.log($(this).text());
});
*/
//방법2 : 문서전체에 click이벤트를 걸기 
$(document).on("click", ".d1", function(){ 
    //전체 클릭을 하는데 클릭한게 혹시 d1일 경우에만 동작
    //이렇게 생성하면 편하긴 하지만 페이지가 느려진다 
    // > 요소생성 시 마다 이벤트를 걸어주는 이상적인 방법이 제일좋음
    console.log($(this).text());
});
$("#btn1").on("click", function(){
    const div = $("<div>"); //<div></div>
    div.addClass("d1");     //<div class="d1"></div>
    div.append("test-4");   //<div class="d1">test-4</div>
    //새로생긴 요소는 기존이벤트를 걸 수 없음 - 요소생성 시 따로 만들어줘야한다
    //가장 이상적인 방법 
    /*
    div.on("click", function(){
        console.log($(this).text())
    });
    */
    $("#test1").append(div);
});

 

1 - 2 ) trigger

레벨업을 클릭하면 해당요소의 숫자가 카운트되고, 전체레벨업을 클릭하면 전체요소의 숫자가 카운트된다.

    <h2>이벤트 강제실행(trigger)</h2>
    <div class="levelup">
        <div>
            <button id="btn2">레벨업</button>
            <span>HTML : </span>
            <span>1</span>
        </div>
        <div>
            <button id="btn3">레벨업</button>
            <span>CSS : </span>
            <span>1</span>
        </div>
        <div>
            <button id="btn4">레벨업</button>
            <span>Javascript : </span>
            <span>1</span>
        </div>
        <div>
            <button id="btn5">레벨업</button>
            <span>jQuery : </span>
            <span>1</span>
        </div>
        <button id="btn6">전체레벨업</button>
    </div>

$(".levelup>div>button").on("click", function(){
    const levelSpan = $(this).next().next();
    const currentLevel = Number(levelSpan.text());
    levelSpan.text(currentLevel+1);
});

$("#btn6").on("click", function(){
    //방법 1. 각 span.text()를 가져와서 +1
    //방법 2. 각 버튼을 한번씩 클릭하게함
    //$(".levelup>div>button").trigger("click");
    $(".levelup>div>button").click();
});

1 - 3 ) 마우스이벤트

    <h2>마우스 이벤트</h2>
    <p id="click">클릭</p>
    <p id="dblclick">더블클릭</p>
    <p id="mouseupdown">마우스업/다운</p>
    <div>현재 마우스 위치 : <span id="mousemove"></span></div>

$("#click").on("click", function(){
    $(this).css("color", "red");
});

$("#dblclick").on("dblclick", function(){
    $(this).css("color", "blue");
});
$("#mouseupdown").on("mouseup", function(){
    //마우스를 뗼때(클릭뗄때)
    $(this).css("color", "red");
});
$("#mouseupdown").on("mousedown", function(){
    //마우스를 누를때(클릭할때)
    $(this).css("color", "blue");
});

$(document).on("mousemove", function(event){
    const text = event.pageX+", "+event.pageY;
    $("#mousemove").text(text);
});

 

1 - 4 ) 입력양식(input) 이벤트

    <h2>입력양식 이벤트</h2>
    <form action="test.html" id="frm">
        입력1 : <input type="text" id="input1"><br>
        입력2 : <input type="text" id="input2"><br>
        <input type="radio" name="test1" value="1">
        <input type="radio" name="test1" value="2">
        <br>
        <input type="submit" value="제출" id="submit">
    </form>

$("#input1").on("focusin", function(){
    $(this).css("border-bottom", "1px solid black");
});
$("#input1").on("focusout", function(){
    $(this).css("border-bottom", "1px solid lightgray");
});

$("#input2").on("change", function(){
    console.log("input2 값 변경");
});

$("input[name=test1]").on("change", function(){
    console.log($(this).val());
});

$("#submit").on("click", function(event){
    const input1 = $("#input1");
    //기존이벤트제거
    event.preventDefault();
    /*
    if(input1.val() == ""){
    }
    */
    input1.trigger("focus");
});