JavaScript事件作业
<!DOCTYPE html>
<html>
<head>
<title>事件作业</title>
</head>
<body>
<script type="text/javascript">
// onfocus 元素获得焦点。
function myfovus(x) {
x.style.background="blue"
}
function myfovus2(y) {
y.style.background="red"
}
</script>
<!-- onfocus对div无效，无法再div中获取焦点 -->
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onfocus="myfovus(this)">
<input type="" name="" onfocus="myfovus2(this)" >
</div>
<script type="text/javascript">
// onblur 元素失去焦点。
function myonblur(x) {
x.style.background="blue"
}
function myonblur1(y) {
y.style.background="red"
}
</script>
<!-- onblur对div无效 -->
<!-- onfocus对input生效 -->
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onblur="myonblur(this)">
<input type="" name="" onblur="myonblur1(this)">
</div>
<script type="text/javascript">
// onchange 域的内容被改变。
function myonchange(x) {
x.style.background="blue"
}
function myonchange1(y) {
y.style.background="red"
}
</script>
<!-- 当文本域中的更改后，div和input的状态改变 -->
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onchange="myonchange(this)">
<input type="" name="" onchange="myonchange1(this)">
</div>
<script type="text/javascript">
// onclick 当用户点击某个对象时调用的事件句柄。
function myonclick(x) {
x.style.background="blue"
}
function myonclick1(y) {
y.style.background="red"
}
</script>
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onclick="myonclick(this)">
<input type="" name="" onclick="myonclick1(this)">
</div>
<script type="text/javascript">
// ondblclick 当用户双击某个对象时调用的事件句柄。
function myondblclick(x) {
x.style.background="blue"
}
function myondblclick1(y) {
y.style.background="red"
}
</script>
<div style="width: 100px;height: 100px;border: 1px solid #ccc; background: pink;" onclick="myondblclick(this)">
<input type="" name="" onclick="myondblclick1(this)">
</div>
</div>
</body>
</html>
