在上周与这周学习了JavaScript 函数与事件处理的内容,开始学习这部分内容的时候,刚开始只听老师讲课并没有太明白,等到课下看了两遍课本知识,回忆了半天课上老师讲的内容,敲了敲代码才逐渐清楚了。我认为这部分的知识有点难,所以做个总结:
1、定义函数:
function 函数名(){
函数体;
}
函数命名规范:第一个单词首字母小写,第二个单词的首字母要大写。
2、函数的调用:
(1)函数在定义好之后,不能自动执行,需要进行调用。
(2)必须在<script>标签内调用或在HTML文件中进行调用。
3、事件处理:
事件是用户和浏览器自身进行的特定行为。每个时间都有不同的名字,而用于响应某个事件而调用的函数就称为事件处理函数。每个事件处理函数都由两个部分构成,on+事件名称
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件(一般在body标签后调用)
onUnload 关闭网页事件
举两个关于事件处理代码例子
例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>
例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>