[HTML DOM] Javascript 로 HTML DOM 의 Onclick 이벤트 적용하기

이벤트의 적용방법에 대한 선택

웹 프론트 프레임 워크로 HTML DOM Component를 만들고 

프레임 워크에서 제공하는 이벤트 핸들러를 사용하여 이벤트를 캐치하곤 하는데,

 

가끔은 직접 HTML DOM 을 입력하여 이벤트를 적용해야하는 상황이 발생한다.

 

그 이벤트가 onClick 라고 한다면 아래의 방법이 있겠다.

 

1. html dom 의 onclick 속성에 이벤트 추가하기

  1-1. javascript function 만들고 함수 호출 (프레임워크함수, javascript 함수)

  1-2. element addEventListener 정의

2. JQuery 로 dom을 찾은 뒤 Click event 를 캐치함. ( $('').click() 또는 on('click') )

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

https://www.geeksforgeeks.org/html-dom-onclick-event/

HTML DOM onclick Event - GeeksforGeeks

---

1-1. html dom 의 onclick 속성에 이벤트 정의 - js 프레임워크 함수를 만들고  호출 경우 (비추천)

아래의 예시는

프론트엔드 프레임워크를 사용할 때, 프레임 워크에서 사용하는 함수 정의 방법에 따라 함수를 정의하고 

div에 함수를 호출하는 방식이다.

이 경우에는, 클릭 됐을 때 함수가 호출될 뿐만 아니라 

최상위 dom 에 내가 만든 div dom 이 그려질 때 함수가 호출된다.

 

그리고 코드 수정 측면에서

함수 이름을 변경하게 되면 dom을 찾고 onclick 이벤트를 직접 찾아야한다.

따라서 함수를 만들고 onclick 속성에 함수이름을 작성하여 연결하는 방법은 좋은 방법이 아니다.

Ext.define('class명.Controller', {
	... Ext 정의...
    
    userFunction: function () {
    	alert('클릭');
    },
    afterrender: function () {
    	var me = this;
        var view = me.getView();
        
        var dom = view.getEl().dom.querySelector('[view-id="addEventDiv"]');
        dom.innerHtml = `
        	<div style="width:inherit; height:inherit"  onclick="${me.userFunction}">
            	클릭
            </div>
        `;
    },
    
    
});

 

 

 

---

1-1. Javascript 함수를 만들고 onclick 속성에 클릭 이벤트를 연결하는 방법 (비추천)

javascript 함수를 만들고 onclick 속성에 클릭 이벤트를 연결하는 예시이다.

이것의 단점은 1-1과 동일하다.

function userAddEvent {
	alert('add event');
}


function addDivTxt {
	var divTxt = '<div onclick="userAddEvent()">클릭</div>';
    return divTxt;
}

 

---

1-1 의 방법은 좋은 방법이 아니라고 했다.

그럼 수정 측면에서 좋은 방법은 무엇일까?

 

다른 함수에서 dom을 가져와서 onclick 이벤트를 추가하는 방법이다.

이것은 해당하는 div의 onclick을 찾지 않고 div만 가지고 있으면 함수를 정의할 수 있다.

 

1-2. element addEventListener 정의

부모 el에서 한정하여 이벤트를 등록할 수 있다. 

돔을 레이어라고 생각하면 

클릭된 엘리먼트는 최하위 뎁스? 즉 맨 나중에 생성된 div가 타겟이된다.

부모 el에 이벤트를 정의하면, 이벤트 버블링, 이벤트 위임 원리에 기반하여

e.target 으로 classList를 비교하고 무엇인지 확인함으로 이벤트를 자식에게 위임할 수 있다.

이렇게 하면 동적으로 추가된 것도 클래스 비교하면서 이벤트 적용을 할 수 있다.

var divEl = ...div 획득관련 코드...; // 부모
var childEl = <div class='child'></div> // 자식

divEl.addEventListeners('click', function (e) {
	if (e.target.classList.contains('child')) {
    	alert('childEl클릭');
        e.preventDefault(); // 이벤트 위임 후 다른 이벤트 버블링이 발생되지 않도록 방지
    }
});

 

2. JQuery 로 dom을 찾은 뒤 Click event 를 캐치함. ( $('').click() 또는 on('click') )

$(부모el).on("click", "div[class='children']", function () {
  $(부모el).append("<div class='children'>자식el</button>");
});