자바스크립트 다중 선택 상자의 실행 과정에 대한 자세한 설명-JS 튜토리얼-php.cn

자바스크립트 다중 선택 상자의 실행 과정에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-08-14 13:49:51

원래의

1405명이 탐색했습니다.

이 글에서는 자바스크립트의 선택 상자 트리거 이벤트 프로세스 분석에 대한 관련 정보를 주로 소개합니다. 이 부분에 대한 이해를 돕기 위해 선택 트리거 프로세스에 대한 심층 분석을 소개합니다.

자바스크립트의 선택 상자 트리거 이벤트 프로세스 분석

우리는 mousedown, mouseup, click, input,change, focus, Blur, keydowm, keydown 이벤트를 작성하고 이를 선택하도록 바인딩하여 고객 선택 관련 이벤트의 트리거 프로세스를 시뮬레이션했습니다.

드디어 트리거 프로세스는 기본적으로 동일합니다. 선택 항목이 없거나 현재 표시된 옵션이 선택된 경우 변경 이벤트는 다른 옵션을 선택한 경우에만 트리거됩니다. 다음은 다양한 옵션을 선택한 후 트리거된 이벤트의 스크린샷입니다.

변경하면 입력 이벤트 및 변경 이벤트가 트리거될 수 있지만 변경 사항이 없거나 드롭다운이 나타나고 다른 곳을 클릭하면 해당 이벤트가 발생합니다. 다음 두 가지 이벤트가 발생하지 않습니다.

첨부 코드:

<!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>

로그인 후 복사

위 내용은 자바스크립트 다중 선택 상자의 실행 과정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!