hmtl의 버튼의 클릭을 감지하는 방법은 여러가지가 있다.
1. html에서 온클릭함수 주기
ex) <button onclick="function()">
2. js에서 eventlistener
3. js 온클릭함수 주기
이렇게 세종류가 있다. (더 있다. 그러나 이거를 제일 많이 쓰는 것 같다. 그러니 이거만 알아보자)
리액트를 사용하던 나로써는 1번 방법이 가장 눈에 익고 손에 익어서 많이 사용했다.
그러나 오늘 onclick을 사용했는데 이벤트가 동작을 하지 않았다.
구글링을 통해 문제와 해결방법 알았다 !!!!
그걸 여기에 적어 놓을 거다 ! 예를 들어 보즈았!!!!!!!!!!!!!!!!!!!!!!!
1. js에 onclick 이벤트 주기
<!DOCTYPE html>
<html>
<body>
<input class="secret" type="password" value="123">
<button class="view">show</button>
<script>
const $secret = document.querySelector('.secret');
const $view = document.querySelector('.view');
function onclickBtn() {
let isShow = false;
return function () {
$secret.setAttribute('type', isShow ? 'password' : 'text');
isShow = !isShow;
$view.innerHTML = isShow ? 'hide' : 'show';
};
}
$view.onclick = onclickBtn();
</script>
</body>
</html>
잘 작동한다.
2. EventListener
<!DOCTYPE html>
<html>
<body>
<input class="secret" type="password" value="123">
<button class="view">show</button>
<script>
const $secret = document.querySelector('.secret');
const $view = document.querySelector('.view');
function onclickBtn() {
let isShow = false;
return function () {
$secret.setAttribute('type', isShow ? 'password' : 'text');
isShow = !isShow;
$view.innerHTML = isShow ? 'hide' : 'show';
};
}
$view.addEventListener('click', onclickBtn())
</script>
</body>
</html>
1번과 아주 유사하다.
2번또한 1번처럼 아주 잘 작동하는 것을 알 수 있다.
addEventListener을 사용하면 이론적으로 무제한의 이벤트를 단일 요소에 첨부할 수 있다.
이 방법은 함수 참조 또는 클로저를 사용하여 이벤트리스너를 추가할 수 있다.
그럼 대망의 3번!!!
3. html에 onclick 함수 주기
<!DOCTYPE html>
<html>
<body>
<input class="secret" type="password" value="123">
<button class="view" onclick="onclickBtn()">show</button>
<script>
const $secret = document.querySelector('.secret');
const $view = document.querySelector('.view');
function onclickBtn() {
console.log("혁이는");
let isShow = false;
return function () {
console.log("코딩 중...");
$secret.setAttribute('type', isShow ? 'password' : 'text');
isShow = !isShow;
$view.innerHTML = isShow ? 'hide' : 'show';
};
}
</script>
</body>
</html>
동영상을 보면 알 수 있듯이 작동을 하지 않는다.
이 방법은 '인라인 이벤트'라고 불린다.
이 방법의 장점은 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를 배치할 수 있다.
이 것은 클로저 또는 익명함수를 사용할 수 없으며 범위가 제한된다.
위의 함수는 클로저기 때문에 동작을 하지 않는 것이다!
이 방법의 단점은 이벤트리스너나 2번과 달리 하나의 인라인 이벤트만 할당할 수 있고, 클로저와 익명함수를 쓸 수 없다는 것이다.
그러니 독자들은 3번의 방법은 최대한 쓰지말고 1번과 2번의 방법을 써서 이벤트를 처리하는 것을 습관화하도록 하자!!
추가 )))
1번 방법보다 2번 방법을 쓰는 것이 좋다.
이유는 2번은 함수를 여러가지 사용할 수 있지만, 1번은 제일 마지막에 이벤트 선언해준 함수 하나만 사용할 수 있기 때문이다.
1. onclick 예제
<!DOCTYPE html>
<html>
<body>
<input class="secret" type="password" value="123">
<button class="view">show</button>
<script>
const $secret = document.querySelector('.secret');
const $view = document.querySelector('.view');
function onclickBtn() {
let isShow = false;
return function () {
console.log("코딩 중...");
$secret.setAttribute('type', isShow ? 'password' : 'text');
isShow = !isShow;
$view.innerHTML = isShow ? 'hide' : 'show';
};
}
function onclickBtn2() {
console.log("222");
}
$view.onclick = onclickBtn();
$view.onclick = onclickBtn2;
// $view.addEventListener('click', onclickBtn2)
// $view.addEventListener('click', onclickBtn())
</script>
</body>
</html>
마지막에 이벤트를 넣어준 onclickBtn2만 동작하는 것을 볼 수 있다.
다음으로
2. addEventListener
<!DOCTYPE html>
<html>
<body>
<input class="secret" type="password" value="123">
<button class="view">show</button>
<script>
const $secret = document.querySelector('.secret');
const $view = document.querySelector('.view');
function onclickBtn() {
console.log("혁이는");
let isShow = false;
return function () {
console.log("코딩 중...");
$secret.setAttribute('type', isShow ? 'password' : 'text');
isShow = !isShow;
$view.innerHTML = isShow ? 'hide' : 'show';
};
}
function onclickBtn2() {
console.log("222");
}
$view.onclick = onclickBtn;
$view.onclick = onclickBtn2;
// $view.addEventListener('click', onclickBtn2)
// $view.addEventListener('click', onclickBtn)
</script>
</body>
</html>
잘 작동하는 것을 볼 수 있다!
그러니까 독자들은 1번도 3번도 아닌 2번!!!! addEventListener를 사용하도록 습관화 하자 !
참고 사이트
http://daplus.net/javascript-addeventlistener%EC%99%80-onclick/
[javascript] addEventListener와 onclick - 리뷰나라
차이 무엇 addEventListener과 onclick? var h = document.getElementById("a"); h.onclick = dothing1; h.addEventListener("click", dothing2); 위의 코드는 별도의 .js 파일에 함께 있으며 모두 완벽하게 작동합니다. 답변 둘 다 정
daplus.net
'Javscript' 카테고리의 다른 글
| [Javascipt] 화살표 함수 => (1/30) (0) | 2022.01.31 |
|---|---|
| [Javascript] 이벤트루프, 동시성, 이벤트 종류 (1/30) (0) | 2022.01.30 |
| [Javascript] DOM (문서 객체 모델:Document Object Model) (1/29) (0) | 2022.01.29 |
| [Javascript] 자바스크립트 메소드, 프로퍼티 (1/28) (0) | 2022.01.29 |
| [Javascript] 다른 언어 배열들과의 차이점, 장단점 (1/28) (0) | 2022.01.29 |
