LWC에서 DOM 이벤트 사용하기

● 사용하는 이벤트

1. onchange : HTML element가 바뀌었을 때 발생합니다.
2. onclick : 유저가 HTML element를 클릭했을 때 발생합니다.
3. onmouseover : 유저가 HTML element 위로 마우스를 옮겼을 때 발생합니다.
4. onmouseout : 유저가 HTML element 위로 마우스를 옮겼을 때 발생합니다.
5. onscroll : HTML element의 스크롤 막대가 스크롤될 때 발생합니다.

▷더 많은 이벤트

● 코드 작성

※ lwc003Events.html

<template>
    <ul class="basic-con">
        <li>
            <p>onchange</p>
            <input onchange={titleChange} class="custom-input" value="Title" />
        </li>
        <li>
            <p>onclick</p>
            <button onclick={btnClick} class="custom-btn">버튼클릭</button>
        </li>
        <li>
            <p>onmouseover, onmouseout</p>
            <div onmouseover={handleMouseOver} onmouseout={handleMouseOut} class={mouseoverbg}>마우스를 가져다 대 보세요</div>
        </li>
    </ul>
    <div onscroll={handleScroll} class="scroll-area">
        <p>onscroll</p>
    </div>
</template>

aura에서 컨트롤러로 이동할 때를 사용했다면,
lwc에서는 onclick={btnClick}를 사용한다.

※ lwc003Events.js

import { LightningElement, track } from 'lwc';

export default class Lwc003Events extends LightningElement {
@track mouseoverbg = 'custom-area';   

   //input의 메세지가 바뀌었을 때 
    titleChange(event) {
        console.log('titleChange : ', event.target.value);
    }
    //버튼을 클릭했을 때
    btnClick() {
        console.log('btnClick');
    }
    //마우스를 가져다 댔을때
    handleMouseOver() {
        console.log('handleMouseOver');
        this.mouseoverbg = 'bg-red custom-area';
    }
    //마우스를 뗐을 때
    handleMouseOut() {
        console.log('handleMouseOut');
        this.mouseoverbg = 'bg-blue custom-area';
    }
    //해당 영역을 스크롤 했을 때
    handleScroll(event) {
        console.log('handleScroll scrollTop : ', event.target.scrollTop);
    }

}

aura에서는 <aura:attribute name="mouseoverbg" type="String"/>을 썼다면,
lwc에서는 html에 정의하지 않고 js에서 @track 등을 사용해 정의한 뒤, html에서 {mouseoverbg}로 사용한다. class삼항연산자가 되지 않는 듯하다.

※ lwc003Events.css

.basic-con{
    background-color: #FFFFFF;
    padding: 20px;
}
.basic-con li{
    width: 100%;
    padding: 12px;
    background-color: #ddd;
}
.basic-con li + li{
    padding-top: 10px;
}
.custom-area{
    width: 500px;
    height: 50px;
    border: 1px solid tan;
    background-color: #ffffff;
}
.custom-area.bg-red{
    background-color: red;
}
.custom-area.bg-blue{
    background-color: blue;
}
.scroll-area{
    width: 100%;
    margin-top: 10px;
    max-height: 80px;
    padding: 10px;
    overflow-y: auto;
}
.scroll-area p{
    width: 100%;
    height: 500px;
    background: rgb(45,15,107);
    background: linear-gradient(0deg, rgba(45,15,107,1) 0%, rgba(94,138,221,1) 50%, rgba(190,243,255,1) 100%);}

※ lwc003Events.js-meta.xml

<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>

● 작동 확인