jQuery 08

이벤트 위임

버튼을 body 태그에 연결하는 것이 포인트!!!

body 태그에 on 함수 연결하는 것이 포인트!!!

document.createElement("태그명").prop(속성)

[참조링크] https://www.techiedelight.com/ko/dynamically-generate-input-type-button-javascript/

JavaScript/jQuery로 입력 버튼을 동적으로 생성

이벤트를 등록하기

2번째 버튼(.btn2)는 이벤트를 2개 동시에 실행되도록 등록했고

다시 이벤트 2개 등록해서 처음에 등록된 이벤트 효과가 없어지게 했다.

(왼쪽)  script 코드  /  (오른쪽)  html 코드

코드분석 

.btn1은 클릭이벤트를 선언하여 버튼을 클릭했을 때 '내용1' 의 색깔이 빨강이 되게 했다.

.btn2은 한 번에 이벤트를 2개 선언했다.

"mouseover" - 마우스를 위에 올렸을 때 css가 적용되어 '내용2'의 색깔이 연초록이 된다

"focus" - 'Tab' 키를 여러 번 눌러 브라우저에서 버튼2에 포커스가 맞춰지면 '내용2'의 색깔이 변한다

 

"mouseout" - 마우스가 선택된 요소에서 벗어날 때 css가 적용되어 '내용2'의 색깔이 검정이 된다

"blur" - 버튼2의 초점이 없어지면 '내용2'의 색깔이 검정이 된다