본문 바로가기
  • Monstera
[javascript] DOM 요소에 각각 이벤트 걸기 wrap이라는 클래스를 가진 ul 안의 li에 각각 접근하여 클릭 이벤트를 걸어주고 싶을 때. 예시 : 각 li를 클릭하면 li안의 텍스트가 콘솔에 찍힌다. 1번 2번 3번 4번 5번 6번 7번 8번 9번 1. for문을 이용하여 접근 const li = document.querySelectorAll('.wrap li'); for(let i= 0 ; i{ console.log(e.target.innerText); }); }; 2. forEach를 활용하여 접근 const li = document.querySelectorAll('.wrap li'); li.forEach((v)=>{ v.addEventListener('click',(e)=>{ console.log(e.target.innerText); }) .. 2019. 11. 3.
[javascript] 자바스크립트 이벤트와 이벤트 헨들러 MDN에서 가장 일반적인 카테고리를 참고했다. 그 외 더 자세한 정보는 하단의 참고 페이지 링크에서 확인 이벤트 사용법 Element.addEventListner('click',(e)=>{ //클릭되었을 때의 코드 // e.target // e.type // e.screenX // e.screenY // e.ctrlKey // e.altKey ... ETC }) 이벤트 핸들러 사용법 - 이벤트 앞에 on을 붙히면 된다. - HTML은 대,소문자를 구분하지 않지만 리액트 등에서는 구분을 해서 써 주어야 한다. 버튼 핸들링 제거 버튼 마우스 이벤트 * 포인팅 장치 : pc는 마우스, 모바일은 손 등 이벤트 이벤트 핸들러 발생하는 시점 click onClick 포인팅 장치 버튼이 엘리먼트에서 눌렸다가 놓였을 .. 2019. 11. 1.
[React] 리액트 인라인 스타일 적용 더블브라켓을 사용하여 인라인 스타일을 적용할 수 있다.(권장되지 않음) 2019. 10. 27.
[javascript] splice, slice, split 비교 1. splice() Array.prototype.splice(); 기존 배열의 요소를 삭제,교체,추가 하여 원래 배열을 변경 array.splice(start[,deleteCount[, item1[, item2[, ...]]]]){ // start 배열 변경 시작 인덱스 : item1 추가 시 인덱스가 start인 자리에 추가 된다 // deleteCount 제거할 요소의 수 : array.length-start보다 크면 start부터 모두 제거 // item1,2,... 배열에 추가할 요소 // return값 : 제거한 요소를 담은 배열 } 2. slice() Array.prototype.slice() 기존 배열에대한 얕은 복사본을 새로운 배열로 반환. 원본배열은 수정되지 않음 array.slice(.. 2019. 10. 25.

티스토리툴바