@charset "UTF-8";
*{margin: 0;padding: 0}
.box{
width: 50px;
height: 10px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
border: solid;
border-width: 1px;
}
.sub-box{
width: 50px;
height: 50px;
background-color: darkgreen;
margin: 25px auto;
}
-------------------------
function btn() {
alert("你点我了");
}
/*
function bdtn() {
alert("我是双击事件");
}
function bdtn2() {
alert("我是聚焦事件");
}*/
-------------------------------------------------
<head>
<meta charset="UTF-8">
<title>4js函数事件</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!--
事件: 事件是JavaScript侦测到的页面行为. 事件需要配合对应的函数才能产生实际意义.
第一批常用事件:
序号 事件 中文名 触发方式
1 onclick 单击事件 鼠标左键单击时
ondbclick 双击事件 鼠标左键双击时
2 onsubmit 提交事件 表单提交时
3 onfocus 聚焦事件 光标进入输入框时
4 onblur 失焦事件 光标离开输入框时
5 onmouseover 移入事件 鼠标移入盒子范围时
onmouseenter
6 onmouseout 移出事件 鼠标离开盒子范围时
onmouseleave
7 onchange 变更事件 输入框/选择框/下拉框的值变更时
8 onload 加载事件 加载完成时
通常使用 window.onload 页面加载事件
9 onkeydown 键盘点击事件 按下键盘按钮时
onkeypress
10 onkeyup 键盘抬起事件 键盘按钮抬起时
-->
<!--单机事件-->
<span onclick="btn()">单击</span><br>
<!--return confirm的值到a标签 true就跳转-->
<a href="http://www.baidu.com" onclick="return confirm('去百度吗')">百度</a><br>
<span onclick="btn()">单击</span><br>
<div class="box" onclick="btn()">单击</div><br>
<hr>
-------------------------------双击事件-----------------------------------------
<br>
<span ondblclick="btn()">双击</span><br>
<!--return confirm的值到a标签 true就跳转-->
<a href="http://www.baidu.com" ondblclick="return confirm('去百度吗')">百度</a><br>
<span ondblclick="btn()">双击</span><br>
<div class="box" ondblclick="btn()">双击</div><br>
<hr>
-------------------------------提交事件-----------------------------------------
<br>
<form action="../3匿名函数/3匿名函数.html" method="post" onsubmit="return confirm('确认提交吗')">
<input type="submit" value="提交">
</form>
<hr>
-------------------------------聚焦和失焦事件-----------------------------------------
<br>
<div>
用户名:<input type="text" onfocus="testFocus1(this)" onblur="testBlur1(this)">
密码:<input type="text" onfocus="testFocus2(this)" onblur="testBlur2(this)">
</div>
<hr>
-------------------------------onmouseover和onmouseout失焦事件-----------------------------------------
<br>
<div>
<span onmouseover="testOver(this)" onmouseout="testOut(this)">移上来</span>
</div>
<div class="box1" onmouseover="testOver()" onmouseout="testOut()">
<div class="sub-box"></div>
</div>
<!--在父元素和资源之间跨越时不触发-->
<div class="box1" onmousleave="testOver()" onmouseenter="testOut()">
<div class="sub-box"></div>
</div>
-------------------------------变更事件-----------------------------------------
<!--
输入框/选择框/下拉框的值变更时
-->
<div>
<input type="text" onchange="testChange()">
</div>
<div>
<select onchange="testChange()">
<option>apple</option>
<option>orange</option>
<option>chery</option>
<option>cat</option>
</select>
</div>
</body>
<script src="js/js.js"></script>
<script>
function testChange(){
alert("变了");
}
function testOver() {
alert("over");
}
function testOut() {
alert("out");
}
/*function testOver(that) {
alert("我是小红,你别乱点");
that.value="小红";
}
function testOut(that) {
document.write("小红今天心情好:"+that.value);
}*/
function testFocus1(that) {
that.value="请输入用户名";
}
function testBlur1(that) {
document.write("你的用户名是:"+that.value);
}
function testFocus2(that) {
that.value="请输入密码";
}
function testBlur2(that) {
that.value="";
}
</script>
浙公网安备 33010602011771号