摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="myonload()">
<!-- HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动
一段 JavaScript代码。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作
属性 描述
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onsubmit 确认按钮被点击。 -->
<script type="text/javascript">
function myonfocus(x){
x.style.background='pink'
}
function myonblur(x){
x.style.background='#bd226c'
}
function myonchange(x){
x.value = "内容被改变";
}
function myonclick(x){
// x.style.background='red'
x.style.borderRadius="50px"
}
function myondblclick(x){
x.style.borderRadius="0px"
}
function myonkeydown(){
alert("你在输入栏内按下一个键");
}
function myonkeyup(x){
ss=parseFloat(x.value)
x.value=ss+ss
}
function myonkeypress(x){
alert("你在输入栏内按下一个键");
}
function myonload(){
alert("欢迎进入");
}
function myonmousedown(x){
x.style.color='#d93c87'
}
function myonmouseup(x){
x.style.color='#2dd064'
}
function myonmousemove(x){
x.style.width='300px'
x.style.height='200px'
}
function myonmouseout(x){
x.style.width='400px'
x.style.height='300px'
}
function myonsubmit(){
confirm("请确认输入的内容无误")
}
</script>
<!-- onfocus 元素获得焦点。 -->
获得焦点：<input type="text" name="" value="" onmouseover="myonfocus(this)">
<br>
<br>
<!-- onblur 元素失去焦点。 -->
失去焦点：<input type="text" name="" value="" onblur="myonblur(this)">
<br>
<br>
<!-- onchange 内容被改变。 -->
内容被改变：<input type="text" name="" value="内容被改变" onchange="myonchange(this)">
<br>
<br>
<!-- onclick 当用户点击某个对象时调用的事件句柄。 -->
<div style="width:100px;height:100px;border:5px solid #ccc" onclick="myonclick(this)"></div>
<br>
<br>
<!-- ondblclick 当用户双击某个对象时调用的事件句柄。 -->
<div style="width:100px;height:100px;border:5px solid #ccc;border-radius:50px;" ondblclick="myondblclick(this)"></div>
<br>
<br>
<!-- onkeydown 某个键盘按键被按下。 -->
输入框内摁下一个键：<input type="text" name="" value="" onkeydown="myonkeydown()">
<br>
<br>
<!-- onkeyup 某个键盘按键被松开。 -->
输入框内的数字相加：<input type="text" name="" value="" onkeyup="myonkeyup(this)">
<br>
<br>
<!-- onkeypress 某个键盘按键被按下并松开。 -->
按下松开按键：<input type="text" name="" value="" onkeypress="myonkeypress(this)">
<br>
<br>
<!-- onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开 -->
<p onmousedown="myonmousedown(this)" onmouseup="myonmouseup(this)">
鼠标点击文字不动变色,松开在变色
</p>
<br>
<br>
<!-- onmousemove 鼠标被移动。 onmousemove 鼠标被移动。 -->
<img src="http://img.qqzhi.com/upload/img_2_1929899833D298185223_11.jpg" alt="" onmousemove="myonmousemove(this)" onmouseout="myonmouseout(this)">
<br>
<br>
<!-- onsubmit 确认按钮被点击。 --> -->
<form action="#" onsubmit="myonsubmit()">
名字：<input type="text" name="lname"><br>
<input type="submit" value="提交">
</body>
</html>通过js的事件可以实现很多网页特效，比如进入页面弹窗，输入内容自动计算字数等等。
批改老师：查无此人批改时间：2019-01-12 09:09:31
老师总结：作业完成的不错，作业名好像反了。 js还能实现很多功能，之后你就慢慢懂了。一些常用的方法，可以多练习几遍，记下来。加油。
