JavaScript事件
事件绑定
js事件绑定有两种方式:
- 通过 HTML标签中的事件属性进行绑定:
如下代码,有个按钮元素,我们在该标签上定义一个事件属性,在事件属性中绑定函数。onclick就是一个事件属性。οnclick=“run1()” 表示该点击事件绑定了一个名为run1()的函数。
<input type="button" value="点我啊" onclick="run1()"/>
下面是绑定的run1()函数:
<script>
function run1(){
alert("点了");
}
</script>
效果如下:
点了按钮以后:
- 通过 DOM 元素属性绑定:
如以下代码是按钮标签,此时并没有使用事件属性,绑定的事件操作需要在js代码中完成。
<input type="button" id="btn">
下面 js 代码是获取了 id=‘btn’ 的元素对象,然后将 onclick 作为该对象的属性,并且绑定匿名函数。该函数是在事件触发后自动执行
document.getElementById("btn").onclick = function (){ alert("我被点了"); }
常见事件
属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 时间被加载完成 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标移入某元素上 |
onmouseout | 鼠标从某元素移开 |
点击事件
- οnclick=“函数名()”:当点击文本框,就弹出框。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("弹出框");
}
</script>
</head>
<body>
<input type="text" onclick="run1()"/>
</body>
</html>
效果如下:
焦点事件
获取焦点
- οnfοcus=“函数名()”:文本框获取焦点时 弹出一个对话框
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("获取焦点了");
}
</script>
</head>
<body>
<input type="text" onfocus="run1()"/>
</body>
</html>
效果如下:
失去焦点
- οnblur=“函数名()”:文本框失去焦点时 弹出一个对话框
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("失去焦点了");
}
</script>
</head>
<body>
<input type="text" onblur="run1()"/>
</body>
</html>
效果如下:
先点击文本框,再点击文本框以外的地方,就弹出来。
域内容改变事件
- οnchange=“函数名()”:当选择框中的值发生改变时,弹出一个对话框
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("值改变了");
}
</script>
</head>
<body>
<!--
当选择框 值发生改变时,弹出一个对话框
-->
<select onchange="run1()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</body>
</html>
效果如下:
切换框里的选项:
加载完毕事件
- οnlοad=“函数名()”:当内容加载完毕,就弹出窗口,点击确定后看到内容
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("加载完毕了");
}
</script>
</head>
<body onload="run1()">
你好
今天天气好晴朗
</body>
</html>
效果如下:
表单提交事件
- οnsubmit=“函数名()”: 表单提交按钮被点击 执行run1,onsubmit 用于表单的校验,该事件也可以控制表单的提交。true允许提交 ,false阻止提交。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("表单的提交按钮被点击了");
return false;
}
</script>
</head>
<body>
<form onsubmit=" return run1()">
<input type="submit" value="提交"/>
</form>
</body>
</html>
效果如下:
键位弹起事件
- οnkeyup=“函数名()”:
代码如下:
效果如下:
鼠标移动事件
鼠标移入
- οnmοuseοver=“函数名()”:鼠标移入文本框 弹出对话框
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("鼠标移入");
}
</script>
</head>
<body>
<input type="text" onmouseover="run1()"/>
</body>
</html>
效果如下:
鼠标移出
- οnmοuseοut=“函数名()”:鼠标移出文本框 弹出对话框
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("鼠标移出");
}
</script>
</head>
<body>
<input type="text" onmouseout="run1()"/>
</body>
</html>
效果如下:
元素事件句柄绑定
绑定一个函数
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("run1");
}
function run2(str){
alert(str);
}
function run3(obj){
alert(obj.valuej);
}
</script>
</head>
<body>
<!--绑定一个无参函数-->
<input type="text" value="1111" onclick="run1()"/><br />
<!--绑定一个有参函数,函数就是一个字符串-->
<input type="text" value="2222" onclick="run2('你好啊')"/><br />
<!--绑定一个有参函数,函数就是一个元素对象-->
<input type="text" value="3333" onclick="run3(this)"/><br />
</body>
</html>
效果如下:
绑定多个函数
触发事件时,会根据绑定顺序,按顺序执行这三个函数:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(str){
alert(str);
}
function run2(){
alert("run2");
}
function run3(){
alert("run3");
}
</script>
</head>
<body>
<!--绑定多个函数-->
<input type="text" value="1111" onclick="run1('我爱你'),run2(),run3()"/><br />
</body>
</html>
效果如下:
DOM绑定事件
绑定方式
优点: 使得HTML与JS代码完全分离
缺点: 1.不能传递函数(解决:匿名函数可以)2.一个事件只能绑定一个函数(解决:匿名函数可以绑定多个函数)
- DOM绑定一个函数: 对象,时间属性 一次只能绑定一个函数,不能传递参数
window.onload=run1;
- DOM绑定多个函数: 匿名函数 可以绑定多个函数,可传递参数
window.onload=function (){
run1();
run2();
run3();
};
DOM绑定方式-练习
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1(){
alert("run1");
}
function run2(){
alert("run2");
}
window.onload=function (){
var t1=document.getElementById("t1");
t1.onclick=function (){
run1();
run2();
}
}
</script>
</head>
<body>
<!--为文本框 onclick事件绑定上两个函数,run1和run2-->
<input type="text" id="t1"/>
</body>
</html>
效果如下: