JS-13 (22/11/15)

e.target

    <h1>value : 
        <span id="counter"></span>
    </h1>
    <button id="incre">+</button>
    <button id="decre">-</button>

        const display = document.querySelector("#counter")
        const incrementBtn = document.querySelector("#incre")
        const decrementBtn = document.querySelector("#decre")

        let num = 0
        display.innerHTML = num

        function increHandler (e) {
            // +버튼 클릭
            display.innerHTML = ++num
        }
        function decreHandler (e) {
            // -버튼 클릭
            display.innerHTML = --num

        }

        increBtn.addEventListener("click", increHandler)
        decreBtn.addEventListener("click", decreHandler)

위 코드에서 이벤트 핸들러 함수를 하나로 병합하려면?

힌트는 e.target
(e.target의 리턴값은 Element)

e.target에는 지정한 엘리먼트에 관한 여러 정보가 담겨져있다.

e.target을 활용해서 선택된 엘리먼트의 id값을 if문에 넣어주자.
console.log(e.target.id)
(+버튼을 누르면 incre 출력)
(-버튼을 누르면 decre 출력)

        const display = document.querySelector("#counter")
        const increBtn = document.querySelector("#increment")
        const decreBtn = document.querySelector("#decrement")

        let num = 0
        display.innerHTML = num

        //이벤트에 의해 호출되는 함수임을 명시하기 위해 매개변수에 e 혹은 event 기입
        function handler (e) {
            console.log(e.target)
            if (e.target.id === 'incre') {
                // +
                ++num
            } else {
                // -
                --num
            }
            display.innerHTML = num
        }
        
        increBtn.addEventListener("click", handler)
        decreBtn.addEventListener("click", handler)

display.innerHTML = e.target.id === "incre" ? ++num : --num

(if문을 삼항연산자로 변환한 코드.
가독성이 떨어져서 좋은 방법이라고 볼 수는...)

e.target은 이렇게 활용할 수도 있다.

        const ulElement = document.querySelector("ul")

        function handler(e) {
            console.log(e.target)
        }

        ulElement.addEventlistener("click", handler)

ul > li에 이벤트를 부여해야 할 때

li를 배열로 선택해서 반복문을 돌리는 것 보다는

ul 객체를 선택 > e.target을 활용하는 것이 간편