javascript 에서 select 상자 트리거 이벤트 프로 세 스 분석

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> 

이상 은 javascript 에서 select 상자 가 사건 을 촉발 하 는 과정 에 대한 분석 입 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 커 뮤 니 티 에 가서 토론 을 교류 하 십시오.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기