📗 개인적으로 업무하면서 다시 생각해된 부분
동적으로 생성된 요소에 이벤트추가
작업을 하다보니 Ajax나 비동기 방식을 이용해 동적으로 요소가 생성될경우 미리 만들어 두었던 스크립트 코드들이 안먹는 경우가 생긴다.
이경우 Javascript나 Jquery로 동적으로 생성된 코드에 이벤트 바인딩 하는 방법이 있다.
Javascript
- 이벤트 버블링을 이용해 미리 그려져있는 요소에 이벤트를 걸어준다.
const element = document.querySelector('parent');
element.addEventListener('click', function(e) {
if(e.target.id === '이벤트주고싶은요소') {
alert('Hello');
}
});부모의 요소에서 이벤트를 줘서 if문을 사용하여 이벤트를 주고싶은 요소를 찾아 이벤트를 걸어준다.
Jquery
$(document).on('click,'선택자',function(e){});⌛️ 이번주차 스터디 공부에선 반복문에 대해 알아봤는데 평소엔 forEach, map, filter만 주로 사용해서 for(in/of)에 대해 배울 수 있었는데, 개인적인 생각으로는 이들의 최상위는 reduce라고 생각한다. 앞서 말한 메소드들을 다 구현하는게 reduce인거 같은데 사용하는게 생각보다 어렵다. 생각을 알고리즘으로 바꾸지 않으면 제일 쓰기 어려운 메소드 같다.
그리고 함수의 매개변수에 대해서도 배웠는데 컴퓨터 언어는 참 어려운거 같다.매개변수, 파라미터, 변수, 전개연산자 등등..
평소 사용하던것들이긴 했지만 정확한 표현을 몰랐기에 확실하게 배울 수 있는 기회가 있어서 다행이라 생각한다.
전개연산자란 : 배열을 전개해서 함수의 매개변수로 전달해준다. * 함수이름(...배열)
function aaa(...item){
console.log(item)
}
const arr = [1,2,3]
aaa(arr)
//[Array(4)]
aaa(...aaa)
//[1,2,3,4]설명 : 매개변수에 ...을 붙이면(나머지 매개변수) 배열로 들어가고, 호출할때 ...을 붙이면(전개연산자) 배열이 아닌걸로 나열이 된다.
전개연산자에대해 잘 이해가 가지 않아 알아본결과 비슷하게 사용되는게 나머지 매개변수도 있었다.
이 때문에 헷갈렸던거 같은데 두가지의 차이점은
나머지 매개변수 : 함수를 만들때 사용하며 자료형은 배열이다.
const 함수 = function(...매개변수){}전개연산자 : 함수를 호출할때 사용한다.
함수(...배열)