js event객체2

• 

  JS (자바스크립트 ) event객체 실습 이벤트객체의 활용을 연습해보자 각각의 더보기에 html코드와 js코드가 들어있다. 실습1 사진을 클릭하면 결과 div에 있는 사진이 바뀌게 만들어보자 더보기 이벤트객체활용 결과: 실습2 이벤트 위임을 통해 상위 태그인 tbody에 이벤트를걸고 내부에있는 tr을 조종해 복사를 누르면 맨아래에 복사가 되고 / 삭제를 누르면 행이 삭제되게 만들어보자 더보기 이벤트 위임 이용해서 다음을 만들어 보세요. 번호 제목 내용 삭제 복사 1 첫글 hi 삭제 복사 2 첫글 hi 삭제 복사 3 첫글 hi 삭제 복사 4 첫글 hi 삭제 복사 실습3 메뉴를 클릭하면 밑의 내용이 바뀌게 만들어보자 ul에 이벤트 버블링을 이용해서 클릭이벤트를 걸고 클릭되는 타겟의 data-id를 얻는다. toggle-menu의 active속성을 .. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) Event Object 이벤트 객체 이벤트 발생시 실행되는 함수의 (인자값) 으로 현재 실행되는 event객체를 넣어주게 되어있다. 이벤트 객체의 기능 설명 stopPropagation() 이벤트 전파를 막는다. (버블링 중단하기) target 이벤트를 적용한 타겟 속성 currentTarget 실제 이벤트가 걸려있는 타겟 속성 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 예시(비효율) 실제 li 태그가 많다면 비효율적인 코드가 된다. 여러 이벤트를 한 번에 걸어주기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선택한 태그의 값: 결과(비효율) 리스트를 클릭하면 선택한 태그의 값에 선택한 값이 들어간다. 예시(효율) 이벤트 전파 특성 활용하기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선.. JS/JS (자바스크립트) ES5 2023. 1. 3.