Event response in JS-JS Tutorial-php.cn

Event response in JS

不言

Release： 2018-04-04 13:39:21

Original

1385 people have browsed it

The content in this article is about the time response of js. Now I will share it with you. Friends in need can also refer to the content of this article.

Here are some commonly used ones. Time response, usage are simple and the effect is very good.

1. Key trigger

This kind of event response is very common, and it is also encountered from the beginning. To give a simple example:

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

Copy after login

The core of this type of method is to add onclick+function name to the button label to trigger the function.

2. Mouse trigger or enter trigger.

The shortcomings of the first method are actually very obvious. For example, if I want to process a batch of data and there are many input boxes, do I need to add a confirmation key after each box? This is very unreasonable for user input, so it will be much more efficient to use the mouse or enter key to trigger the effect when filling in a form or multiple input boxes.

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

Copy after login

The core is to use onchange to call the function in the input box. After filling in, the function will be called by clicking anywhere with the mouse or pressing enter. Different effects will appear according to different processing.

3. It is better to trigger

at any time. For real-life examples, you can try the online hexadecimal conversion on the web page, which does not require you. Pressing the confirm key does not require you to press enter. You can enter it at any time and convert it at any time. Including the calculator on the mobile phone, it calculates the input value in real time.

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

Copy after login

The core of the usage method is oneKeyUp+method name. In addition to this, there are also keywords onkeypress, oneKeyDown, etc. Personally, I think oneKeyUp is more practical.

Related recommendations:

JS implementation of event response examples for OCX controls_javascript skills

Complete Javascript event response study notes _javascript tips

The above is the detailed content of Event response in JS. For more information, please follow other related articles on the PHP Chinese website!