728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ._target{
        width: 200px;
        height: 200px;
        background-color: beige;
    }
</style>
<body>
    <div class="_target"></div>
    <input id="_input" type="text">
    <form action="">
        <button id="_btn">시작</button>
    </form>
</body>
<script src="01.js"></script>
</html>

 

// 이벤트 함수의 타겟


// 클릭이벤트
window.onclick = function(event){
    //event.target은 이벤트가 발생한 요소
    //event 태그의 이벤트가 담겨있다.
    console.log(event.target);
    event.target;
    //클래스가 무엇인지로 판단을 해서 이벤트를 적용시킬수도 있다.
    if(event.target.classList.contains("_target")){
        console.log("있어")
    }

    //클래스가 무엇인지 가져와서 조건문으로 이벤트를 설정해 줄수 있다.
    let _class = event.target.className;
    switch(_class){
        case "_target":
        break;
        case :
        break;
        default:
        break;
    }
}



// //마우스의 현재 페이지에서의 위치
window.onmousemove = function(e){
    //e.type 해당 이벤트의 타입이 무엇인지
    //e.pageX 문서 페이지의 상에서 마우스의 X좌표
    //e.pageY 문서 페이지의 상에서 마우스의 Y좌표
    console.log(e.pageX,e.pageY,e.type)
}




// 키보드 입력 이벤트
_input.onkeydown = function(e){
    //_input 여기에 이벤트는 kyboardEvent
    //e.keyCode ascii코드 숫자로 보이고 영문키 엔터 컨트롤 알트 숫자 입력시 표기
    console.log(e.keyCode);
}



//기본 동작을 취소하는 방법
_btn.onclick = function(e){
    //기본 동작을 취소하는 preventDefault()
    e.preventDefault();
    //버블링 현상을 막는 방법(이벤트 전파)
    //stapPropagetion() 이벤트 전파를 막는 함수
    e.stopPropagetion();
};

 

2. 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        width: 800px;
        height: 800px;
        display: flex;
        flex-wrap: wrap;
    }
    .box{
        width: 400px;
        height: 400px;
        border: 1px solid;
        box-sizing: border-box;
    }
    .item{
        width: 100%;
        height: 100%;
        background-color: aqua;
    }
</style>
<body>
    <div class="container">
        <div class="box">
            <!-- draggable 드래그를 혀용 하는지 어트리뷰트-->
            <div class="item" draggable="true"></div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
<script>
    //드래그할 target을 넣을 변수 초기에 null
    let _target = null;

    //ondragstart 드래그가 시작될때
    document.ondragstart = function(e){
        //item 클래스가 있으면 t
        if(e.target.classList.contains("item")){
            // _target 드래그가 시작될때 이벤트의 타겟을 넣어준다.
            _target = e.target;
            // 타겟이 잘 잡혔는지 확인하려고 스타일 입힘
            //일반 css에서 쓰는 하이픈(-)이 포함된 이름은 하이픈지우고 뒤글자를 대문자로
            e.target.style.backgroundColor = "red";
        }
    }
    
    //ondragend 드래그가 끝났을때
    document.ondragend = function(e){
        //e.target에 item 클래스가 있으면
        // 드래그가 끝나서 _target을 비워줌
        _target = null;
        if(e.target.classList.contains("item")){
            //처음 설정했던 컬러로 backgroundColor 변경
            e.target.style.backgroundColor = "aqua";

        }
    }

    //dragenter 드래그를 해서 다른 요소 위세 마우스가 올려졌을때
    document.ondragenter = function(e){
        //타겟이 box클래스를 가지고 있으면
        if (e.target.classList.contains("box")&& _target !== null){
            e.target.style.backgroundColor = "green"
        }
    }

    //ondragleave 드래그해서 요소안에 있다가 마우스가 요소 밖으로 나갔을때
    document.ondragleave = function(e){
        if(e.target.classList.contains("box")){
            e.target.style.backgroundColor = "transparent";
        }
    }

    //ondargover 드롭 대상에서 이벤트를 발생할수 있게
    document.ondragover = function(e){
        if(e.target.classList.contains("box") && _target !== null){
            //드롭을 허용하도록 preventDefault() 호출
            e.preventDefault();
        }
    }

    //ondrop 드래그를 하다가 마우스 버튼을 땠을때
    document.ondrop = function(e){
        //타겟이 box 클래스를 가지고 있으면
        if(e.target.classList.contains("box")){
            //타겟의 backgroundColor를 다시 투명하게
            e.target.style.backgroundColor = "transparent";
            //타겟에 처음 드래그 시작해서 변수에 전달한 item용
            //드래그하다가 놓은 타겟이 box면 타겟에 자식요소로 item 담긴 변수를 넣는다.
            e.target.appendChild(_target);
        }
    }
</script>
</html>

 

 

728x90
반응형

'개발 > html, css, js' 카테고리의 다른 글

[JavaScript] 농구게임 만들기  (0) 2022.06.21
[HTML, JavaScript] 정규표현식  (0) 2022.06.21
[HTML, CSS] 이벤트리스너  (0) 2022.06.09
[HTML, JavaScript] 가위바위보, 일정 캘린더 만들기  (0) 2022.06.07
[JavaScript] 각종 이벤트  (0) 2022.06.07

티스토리툴바