事件就是配合输入设备和用户操作所触发的行为。我们之前一直使用的onclick就是其中的一种。
事件
概述
| onclick 鼠标单击事件 ondblclick 鼠标双击事件 onmousedown 鼠标按下事件（左键） onmouseup 鼠标抬起事件(左键) onmousemove 鼠标移动事件 onmouseout 鼠标移出事件 onmouseover 鼠标移动到上面事件 onblur 失去焦点事件 onchange 发生改变并失去焦点 onfocus 获得焦点事件 onkeydown 键盘上所有按键都会触发 onkeypress 能输入内容的按键才会触发 onkeyup onreset <form>的事件 οnreset=”return fun()” 当fun返回fasle时，不能重置表单 onsubmit <form>的事件 οnsubmit=”return fun()” 当fun返回fasle时，不能提交表单 onreset 和 onsubmit 相当于 重置按钮和提交按钮的 onclick事件 |
绑定方式
第一种绑定方式
| <script> function fun(){ alert(‘111’); } </script>
<input type=”button” id=’btn’value=”OKOK”οnclick=”fun()”/> |
第二种绑定方式
| <input type=”button” id=’btn’value=”OKOK”/> <script> document.getElementById(‘btn’).οnclick=function(){ alert(‘111’); } </script> |
还有第三种方式在代码中演示：
第一种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
document.getElementById("inp").value="";
}
function fun2(){
document.getElementById("inp1").style.backgroundColor="cornflowerblue";
}
function fun3(){
document.getElementById("inp1").style.backgroundColor="blueviolet";
}
function fun4(){
document.getElementById("inp2").style.backgroundColor="aqua";
}
</script>
</head>
<body>
输入：<input type="text" id="inp" value="输入..." ondblclick="fun1()"/>
输入：<input type="text" id="inp1" value="输入..." onmousedown="fun2()" onmouseup="fun3()"/>
输入：<input type="text" id="inp2" value="输入..." onmouseout="fun4()"/>
</body>
</html>
第二种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.getElementById("inp").ondblclick=function fun1(){
document.getElementById("inp").value="";
}
document.getElementById("inp1").onmousedown=function fun2(){
document.getElementById("inp1").style.backgroundColor="cornflowerblue";
}
document.getElementById("inp1").onmouseup=function fun3(){
document.getElementById("inp1").style.backgroundColor="blueviolet";
}
document.getElementById("inp1").onmouseout=function fun4(){
document.getElementById("inp2").style.backgroundColor="aqua";
}
</script>
</head>
<body>
输入：<input type="text" id="inp" value="输入..." />
输入：<input type="text" id="inp1" value="输入..."/>
输入：<input type="text" id="inp2" value="输入..." />
</body>
</html>
第三种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(obj){
obj.value="";
}
function fun2(obj){
obj.style.backgroundColor="cornflowerblue";
}
function fun3(obj){
obj.style.backgroundColor="blueviolet";
}
function fun4(obj){
obj.style.backgroundColor="aqua";
}
</script>
</head>
<body>
输入：<input type="text" id="inp" value="输入..." ondblclick="fun1(this)"/>
输入：<input type="text" id="inp1" value="输入..." onmousedown="fun2(this)" onmouseup="fun3(this)"/>
输入：<input type="text" id="inp2" value="输入..." onmouseout="fun4(this)"/>
</body>
</html>
利用超链接调用JS函数
当我们点击某些链接时，我们可能不是让它来跳转到某个界面，而是想让它来进行调用某些函数得到某些功能或者效果时。我们可以：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function func(){
alert("调用函数");
}
</script>
</head>
<body>
<a onclick="func()" style="color:blue;text-decoration:underline;cursor:pointer" >链接1</a>
<a onclick="func()" href="#">链接2</a>
<a href="javascript:func()">链接3</a>
</body>
</html>既可以得到超链接的效果，又达到了我们的功能。
事件源
当我们有嵌套的几层标签全都是一类标签的时候，我们如果想要对里层的所有标签做同样的操作的时候，我们之前的做法是在每一个标签里加一个ID，但是如果标签太多的时候，我们需要做大量重复的工作，而这样是极其浪费时间的。所以，我们需要：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//参数传进来可以自定义名字
function func(e){
//下面两步都是为了兼容IE浏览器。
e = e || event;
//target也是关键字，获取里层标签的目标。
var target = e.target || e.srcElement;
alert(target.innerText);
}
</script>
</head>
<body>
//这里event是关键字，代表着里层的标签
<div id="dd" onclick="func(event)">
<div>语文</div>
<div>数学</div>
<div>英语</div>
</div>
</body>
</html>
3055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
