18.10 이벤트

DOM API에는 200개 가까운 이벤트가 정의되어 있고, 각 브라우저마다 비표준 이벤트를 따로 만들고 있으므로 이 책에서 이벤트를 모두 설명하는 건 불가능합니다.
책에서는 꼭 알아야하는 이벤트만 설명하겠습니다.
이해하기 쉬운 click 이벤트부터 시작합시다.
클릭 이벤트를 통해 하이라이트 버튼과 highlightParas 함수를 연결하겠습니다.

function highlightParas(containing) {
    if (typeof containing === 'string')
        containing = new RegExp(`\\b${containing}\\b`, 'i'); // 두 번째 인자는 플래그
    const paras = document.getElementsByTagName('p');
    console.log(paras);
    for (let p of paras) {
        if (!containing.test(p.textContent)) continue;
        p.classList.add('highlight');
    }
}
function removeParaHighlights() {
    const paras = document.querySelectorAll('p.highlight');
    for (let p of paras) {
        p.classList.remove('highlight');
    }
}

const highlightActions = document.querySelectorAll('[data-action="highlight"]');
for (let a of highlightActions) {
    a.addEventListener('click', evt => {
        evt.preventDefault();
        highlightParas(a.dataset.containing)
    })
}
const removeHighlightActions = document.querySelectorAll('[data-action="removeHighlights"]');
for (let a of removeHighlightActions) {
    a.addEventListener('click', evt => {
        evt.preventDefault();
        removeParaHighlights();
    })
}

<button data-action="highlight" data-containing="unique">
    Highlight paragraphs containing "unique"
</button>
<button data-action="removeHighlights">
    Remove highlights
</button>

모든 요소에는 addEventListener라는 메서드가 있습니다.
이 메서드를 통해 이벤트가 일어났을 때 호출할 함수를 지정할 수 있습니다.
호출할 함수는 Event 타입의 객체 하나만 매개변수로 받습니다.
이벤트 객체에는 해당 이벤트에 관한 정보가 모두 포함되어 있습니다.
예를 들어 click 이벤트에는 클릭한 좌표를 나타내는 clientX, clientY 프로퍼티가 있고, 이벤트가 일어난 요소를 나타내는 target 프로퍼티도 있습니다.

이벤트 모델은 이벤트 하나에 여러 가지 함수(핸들러)를 연결할 수 있도록 설계되어 있습니다.
기본 핸들러가 지정된 이벤트도 많습니다.
예를 들어 사용자가 <a> 링크를 클릭하면 브라우저는 이벤트에 응답해서 요청 페이지를 불러옵니다.
이런 기본 핸들러를 막으려면 이벤트 객체에 preventDefault()를 호출합니다.
기본 핸들러의 동작에 다른 기능을 추가하는 이벤트 핸들러를 만들 생각이 아니라면, 대부분 이벤트 핸들러에서 preventDefault()를 사용하게 될 겁니다.

문단을 하이라이트할 때는 highlightParas를 호출하면서 버튼의 데이터 속성 containing을 넘깁니다.
이렇게 하면 나중에 어떤 단어를 찾을지 쉽게 바꿀 수 있습니다.

LHJ

18.10 이벤트

18.10 이벤트

Related Posts