JavaScript 이벤트, 프로세서, 유형 및 끝?
29185 단어 JavaScripttypeeventlistenertech
참조 가능한 문서
사이트에는 각양각색의 활동이 있다.블록 지우기, 블록 압출, 이미지 읽기 완료, JSON 읽기 완료 등을 수행합니다.
button 요소에서는 클릭, 클릭 등 다양한 이벤트가 발생한다.이런 사건을 일으키는 대상을'사건 목표'라고 부른다.이벤트 목표가 발생했을 때의 처리를'사건 청중'이라고 부른다.
다음은 단추를 눌렀을 때 발생하는 처리입니다
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベント</title>
</head>
<body>
<button class="button">クリック</button>
<script>
const button = document.querySelector('.button');
button.addEventListener('click', onClickButton);
function onClickButton() {
window.alert('クリックされました');
console.log('クリックされました');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="button">クリック</button>
<script>
const button = document.querySelector('.button');
button.addEventListener('click', () => {
window.alert('クリックされました');
console.log('クリックされました');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベント</title>
</head>
<body>
<button class="button">クリック</button>
<script>
// オプションを指定
const option = {
once: true // リスナーの呼び出しを１回のみにすか 真偽値
}
const button = document.querySelector('.button');
// 第３引数を使ってオプションを指定できる
button.addEventListener('click', onClickButton, option);
function onClickButton() {
window.alert('クリックされました');
console.log('クリックされました');
}
</script>
</body>
</html>
키보드 입력 처리
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベント</title>
</head>
<body>
<textarea name="" class="textarea" cols="30" rows="10"></textarea>
<script>
document.querySelector('.textarea').addEventListener('keydown', () => {
console.log('キーが押された');
});
document.querySelector('.textarea').addEventListener('keypress', () => {
console.log('文字が入力された');
});
document.querySelector('.textarea').addEventListener('keyup', () => {
console.log('キーが離された');
});
</script>
</body>
</html>
이벤트 처리기?
들고 있던 책을 왜 안 썼는지 몰라서 MDN으로 찾아봤어요.
사용 가능한 모든 이벤트에는 이벤트가 발생할 때 실행되는 코드 블록(일반적으로 사용자정의 JavaScript 함수)이 있습니다.코드 블록을 이벤트 발화에 대한 응답으로 정의하여 이벤트 처리 프로그램의 등록이라고 한다.활동 처리 절차는 때때로 활동 청중이라고 불릴 수 있다. 우리의 목적에 따라 바뀌는 것도 거의 문제가 되지 않지만, 엄밀히 말하면 함께 일하는 또 다른 것이다.이벤트 청자는 이벤트의 발생을 감시하고 이벤트 처리 프로그램은 발생한 이벤트의 응답 동작의 코드이다.
그러니까 이벤트 청취자의 뜻과 같다는 거죠?
유형은?관영 소식에 의하면
Event.type
type은 이벤트 인터페이스를 나타내는 문자열을 반환하는 읽기 전용 속성입니다.구축 이벤트로 설정합니다. 이 이름은 클릭,load,error 등 특정 이벤트를 참고하는 데 자주 사용됩니다.
문서의 견본을 누르면 이벤트가 발생하고 로그를 출력합니다🤔
Vuex의 음소거 코드로 궁금한 거?
store.commit({
type: 'increment',
amount: 10
})
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
복습 후의 소감...
사용자가 단추를 누르면 이벤트가 발생하고 호출 방법이 처리되며 실행됩니다.왜 아직도 이해가 안 되지?😅
JavaScript를 여러 번 베껴 쓰는 연습을 하는데 가장 중요한 것은 개념을 이해하는 것이다!
DOM의 지식이 필요한 건 그런 거겠죠.대개🤔
Reference
이 문제에 관하여(JavaScript 이벤트, 프로세서, 유형 및 끝?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/joo_hashi/articles/c351ce37dd1e08텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
