I learned about JavaScript functions and event processing last week and this week. When I started to learn this part, I just listened to the teacher's lecture and didn't quite understand it. After reading the textbook twice after class, I recalled half a day of class. The content of the teacher's speech is gradually clear after typing in the code. I think this part of the knowledge is a bit difficult, so make a summary:
1. Define a function:
function function name () {
function body;
}
function naming convention: the first letter of the first word is lowercase, and the first letter of the second word should be capitalized .
2. Function call:
(1) After the function is defined, it cannot be executed automatically and needs to be called.
(2) It must be called within the <script> tag or in the HTML file.
3. Event handling: An
event is a specific behavior performed by the user and the browser itself. Each time has a different name, and the function that is called in response to an event is called an event handler. Each event handler is composed of two parts, on+event name
onClick click event
onMouseOver mouse over event
onMouseOut mouse out event
onChange text content change event
onSelect text box selection event
onFocus cursor gathering event
onBlur cursor removal event
onLoad web page loading event (usually called after the body tag)
onUnload closes web page events
Give two examples of event handling code
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document1</title>
<script type="text/javascript">
function show(value){
alert('当前文本文本框一共包含'+value.length+'个文字!');
}
</script>
</head>
<body>
请任意输入一段文字：
<form action="">
<input type="text" name="username" id="username" onblur="show(this.value)" value="" />
</form>
</body>
</html>
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document2</title>
<script type="text/javascript">
function show(abc){
var result=document.getElementById('result');
var html='你的最高学历是'+select.value;
result.innerHTML=html;
}
</script>
</head>
<body>
你的学历：
<select id='select' onchange="show(this);">
<option value="高中">高中</option>
<option value="大学">大学</option>
<option value="硕士">硕士</option>
<option value="4">博士</option>
</select>
<div id="result"></div>
</body>
</html>