자바스크립트 이벤트 중첩 문제(버블링)

작업을 하던 중 테이블 row에 클릭 이벤트가 걸려 있고, 해당 row 안에 삭제 기능을 하는 버튼이 존재하여 삭제 버튼을 클릭시 버튼 이벤트와 row에 걸려있는 클릭 이벤트가 중첩되어 발생하는 문제가 생겼다. 이는 이벤트의 버블링 때문에 발생하는 문제였는데 이벤트가 중첩된 구조에서 child 엘리먼트의 이벤트 콜백 함수에서 event 객체의 stopPropagation() 함수를 사용해서 버블링을 막아주면 이를 해결할 수 있다.

하지만 button의 onclick attribute에 함수를 호출하도록 설정하여 이벤트를 동작시킬 때 파라미터로 event를 넘길 수 없었다. (넘길 수 있는 방법이 있는데 못찾은 걸지도) 자바스크립트에서 bind나 event 리스너를 사용하면 간단히 해결되었지만 button이 정의될 떄 넘겨야할 파라미터 값이 있어서 이런 방식으로 하지 못했다.

button element에 data attribute를 추가해서 파라미터로 전달할 값을 저장하고 클릭 이벤트는 bind를 사용해서 발생시키도록 수정했다.