javascript 에서 select 상자 트리거 이벤트 프로 세 스 분석
저 희 는 mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown 사건 을 select 에 연결 하여 고객 이 관련 사건 을 선택 하 는 트리거 절 차 를 모 의 했 습 니 다.
마지막 으로 트리거 과정 은 기본적으로 같 습 니 다.현재 표 시 된 option 을 선택 하거나 선택 하지 않 으 면 change 사건 이 발생 하지 않 고 다른 option 을 선택 할 때 만 change 사건 이 발생 합 니 다.다음은 서로 다른 option 을 선택 한 후 이 벤트 를 터치 하 는 캡 처 입 니 다:
input 이벤트 와 change 이 벤트 를 촉발 할 수 있 는 변 화 를 주 었 습 니 다.변경 되 지 않 거나 아래로 끌 어 내리 지 않 고 다른 곳 을 직접 클릭 하면 이 두 이 벤트 를 촉진 하지 않 습 니 다.
코드 첨부:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="input">
<option value="1">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</body>
<script>
document.getElementById("input").addEventListener("focus",function () {
console.log("focus");
});
document.getElementById("input").addEventListener("mousedown",function () {
console.log("mousedown");
});
document.getElementById("input").addEventListener("mouseup",function () {
console.log("mouseup");
});
document.getElementById("input").addEventListener("input",function () {
console.log("input");
});
document.getElementById("input").addEventListener("change",function () {
console.log("change");
});
document.getElementById("input").addEventListener("blur",function () {
console.log("blur");
});
document.getElementById("input").addEventListener("click",function () {
console.log("click");
});
document.getElementById("input").addEventListener("keydown",function () {
console.log("keydown");
});
document.getElementById("input").addEventListener("keyup",function () {
console.log("keyup");
});
document.getElementById("input").addEventListener("select",function () {
console.log("select");
});
</script>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
