집 > 기사 > 웹 프론트엔드 > JS의 이벤트 응답

JS의 이벤트 응답

不言원래의: 2018-04-04 13:39:211349검색

이 기사의 내용은 js의 시간 응답에 관한 것입니다. 이제 여기에서 공유하겠습니다. 도움이 필요한 친구들도 이 기사의 내용을 참조할 수 있습니다.

다음은 일반적으로 사용되는 몇 가지 시간 응답입니다. 매우 일반적입니다. 간단하고 훌륭하게 작동합니다.

1. 키 트리거

이런 종류의 이벤트 응답은 매우 일반적이며 처음부터 발생합니다. 간단한 예를 들자면:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>

이 유형의 방법의 핵심은 버튼 라벨에 onclick+함수 이름을 추가하여 함수를 실행하는 것입니다.

2. 마우스 트리거 또는 입력 트리거.

첫 번째 방법의 단점은 실제로 매우 명백합니다. 예를 들어, 일괄 데이터를 처리하려고 하는데 입력 상자가 많은 경우 각 상자 뒤에 확인 키를 추가해야 합니까? 이는 사용자 입력에 있어 매우 불합리하므로 양식이나 여러 입력 상자를 채울 때 마우스나 Enter 키를 사용하여 효과를 발동시키는 것이 훨씬 더 효율적입니다.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

핵심은 입력 상자에서 함수를 호출하기 위해 onchange를 사용하는 것입니다. 입력한 후 마우스로 아무 곳이나 클릭하거나 Enter 키를 누르면 함수가 호출됩니다.

3. 언제든지 트리거됩니다.

실제 예에서는 웹 페이지에서 온라인 16진수 변환을 시도해 볼 수 있습니다. 즉, 확인 키를 누르거나 Enter를 칠 필요가 없습니다. 언제든지 그것을 잃어버리고 변환할 수 있습니다. 휴대폰의 계산기를 포함하여 실시간으로 입력값을 계산해 줍니다.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

사용방법의 핵심은 oneKeyUp + 메소드명 입니다. 이 외에도 onkeypress, oneKeyDown 등의 키워드도 있습니다. 개인적으로는 oneKeyUp이 더 실용적이라고 생각합니다.

JS의 이벤트 응답

관련 기사