이벤트
<리>
onclick 속성(비동기 스크립트를 호출할 필요는 없지만 반복 호출이 필요함, 이벤트 리스너 호출 시 이벤트 예약어 사용)
<xmp>
<단추 온 클릭=“fn1_1(‘안녕하세요’)”>버튼단추>
xmp>
리>
<리>
DoM 파싱 이벤트(브라우저 읽기)br>
<xmp>
//렌더링 시작 시, 파싱 종료 시, 문서가 화면에 표시될 때
document.addEventListener(`DoMContentLoaded`, funtion(){
})
// 소스 로딩이 완료되면
window.addEventListener(`로드`, 함수() {
})
xmp>
리>
선택기
getElementByID(`IDName`) : 객체 선택
getElementByClassName(`classname`) : 배열로 선택
getElementByTagName(`TagName`) : 배열로 선택
querySelector(`css selector`) : 첫 번째 요소를 선택합니다.
querySelectorAll(`css selector`) : 배열로 선택
이벤트 리스너.대상
document.querySelector(`.ex2 버튼`).addEventListener(`클릭`, 함수() {
console.log(e.target)
})
<사업부 수업=“ex1”>
-- onclick = when clicked !
It is used when calling JavaScript.-->
It is used when calling JavaScript.-->
--"fn1 (Hello)" The quotes here are not JavaScript quotes, they are HTML quotes.
So when I write this, it says that I declared a variable, so I can't call it in the console log.
The onclick attribute is not a JavaScript attribute, but a script called as an html attribute
Reserved word that must be promised to the event listener-->
<단추 온 클릭=“fn1_1(‘안녕하세요’)”>버튼단추>
<단추 온 클릭=“fn1_2(이벤트)”>버튼단추>
사업부>
<시간>
<사업부 수업=“ex2”>
<단추>버튼단추>
<단추 ID=“ex2btn”>버튼단추>
<단추 수업=“ex2btn”>버튼단추>
사업부>
기능 fn1_1(매개변수) {
콘솔.통나무(매개변수);
}
기능 fn1_2(이벤트) {
콘솔.통나무(이벤트.표적); // event.target은 jQuery에서 $(this)와 동일합니다!
클릭을 찾고
클릭을 찾고
// 원클릭 속성으로 함수를 호출하면 이벤트가 약속됩니다.
. 이벤트 리스너 !
결정했다 !
. 이벤트 리스너 !
결정했다 !
}
/*
$(문서).ready(함수(){
}) 확실히 더 빠릅니다!
*/
*/
/*
$(창).로드(함수(){
})
모든 이미지 또는 동영상이 실제로 다운로드되고 출력이 완료되면 실행됩니다.
*/
/* $(창).로드(함수(){
}) load 이벤트는 항상 ready 이벤트보다 늦게 발생하기 때문에 꼭 다운받아야 합니다!
*/
*/
창문.addEventListener(‘로드’, 기능 () {
})
/* 이것을 바닐라로 변환 */
문서.addEventListener(`DOMContentLoaded`, 기능 () {
/* css 구문으로 쿼리 선택기를 찾으시겠습니까? */
/* 쿼리 선택자는 하나만 찾습니다.
All을 추가하면 모두 찾을 수 있습니다.
All을 추가하면 모두 찾을 수 있습니다.
배열 개체 반복문 비동기식 학습 필수 */
/*querySelector(`.ex2 버튼`) -> 배열 */
문서.쿼리 선택기(`.ex2 버튼`).addEventListener(‘클릭’, 기능 () {
알리다()
})
/* id만 찾기 */
문서.getElementById(`ex2btn`).addEventListener(‘클릭’, 기능 () {
알리다(getElementById)
}) /* 웹페이지는 아이디가 1개밖에 없기 때문에 1개만 찾아도 오류가 없다 */
/* $(`.ex2 버튼`).클릭*/
/*
document.getElementsByClassName(`ex2btn`).addEventListener(`click`, function () {
경고(getElementById)
클래스가 많으니 배열 찾기 */
})
문서.addEventListener(‘DOMContentLoaded’,기능(){
문서.쿼리 선택기(`.ex2btn`).addEventListener(‘클릭’, 기능(ㅏ){
콘솔.통나무(ㅏ.표적);
})
})
/* document.getElementsByClassName(`ex2btn`) -> 라이트 */
/* document.getElementsByTagName(`div`) -> 배열 */