js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
onclick 单击事件
onblur 失去焦点事件
onchange 当对象或选中区的内容改变时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onsubmit 当表单将要被提交时触发。
1、静态点击事件
<script type="text/javascript">
// A标签的点击事件
functionaClick(){
alert("A标签被点击了");
}
// div块标签的点击事件
functiondivClick(){
alert("div标签被点击了");
}
// 文本输入框的点击事件
functioninputClick(){
alert("文本输入框被点击了");
}
script>
head>
<body>
<a href="#" onclick="aClick();">单击事件a>
<div style="width:50px;height:50px; background-color: red;" onclick="divClick();">块标签div>
<input type="text" onclick="inputClick()" />
body>
2、动态的给html标签对象添加对象
<script type="text/javascript">
// 动态事件注册
// 当整 个文件 被加载完成之后自动调用
window.onload = function() {
// 2.通过document对象getElementById方法查找到标签对象
varaObj = document.getElementById("a001");
//alert(aObj);
// 3.给这个对象的事件赋值
aObj.onclick = function() {
alert("用心学习");
}
//通过div标签的id属性值，查找到对应的div标签dom对象
vardivObj = document.getElementById("div001");
//alert(divObj);
// 给div对象的单击事件赋值
divObj.onclick = function() {
alert("不要睡觉");
}
// 通过标签的name属性查找到对应的input标签对象
varinputObjs = document.getElementsByName("username");
//alert(inputObjs.length);
//inputObjs[0].onclick = function() {
//alert("输入框点击了");
//}
// 循环遍历给每一个标签对象的单击事件赋值
for(var i = 0; i < inputObjs.length; i++) {
inputObjs[i].onclick = function(){
alert("输入框点击了");
}
}
// 通过html标签名查找到所有对应的html标签对象
varinputObj2 = document.getElementsByTagName("input");
//alert(inputObj2.length);
// 循环遍历。每一个input标签对象。给单击事件赋值
for(var i = 0; i < inputObj2.length; i++) {
inputObj2[i].onclick = function(){
alert("输入框点击了");
}
}
}
script>
head>
<body>
<a id="a001" href="#" >单击事件a>
<div id="div001" style="width:50px;height:50px; background-color: red;">块标签div>
<input type="text" />
<input type="text" />
body>
3、失去焦点事件
<script type="text/javascript">
// 定义一个失去焦点的javaScript函数
functioninputOnBlur() {
alert("文本框失云焦点");
}
script>
head>
<body>
用户名:<input type="text" onblur="inputOnBlur();" />
body>
4、改变事件
<script type="text/javascript">
// 下拉列表改变事件
functionselectChange(){
alert("改变了");
}
script>
head>
上面头，下面身体
<body>
省份：<select onchange="selectChange();">
<option>海南省option>
<option>广东省option>
<option>河南省option>
select>
5、 鼠标进来事件<script type="text/javascript">
// 动态事件第一步，千万要先注册这个文档被加载完成之后的事件
window.onload =function() {
vardivObj = document.getElementById("div001");
// alert(divObj);
// 动态给div标签添加鼠标移入事件
divObj.onmouseover =function() {
alert("鼠标 进来 了");
}
}
script>
head>
<body>
<div id="div001" style="width:100px;height:100px; background-color: red;">块标签div>
body>
6、鼠标移除事件<script type="text/javascript">
// 定义一个鼠标 移动的函数
functiondivOut(){
alert("鼠标 出去了");
}
script>
head>
<body>
<div id="div001" onmouseout="divOut();" style="width:100px;height:100px; background-color: red;">块标签div>
body>
7、表单提交页面<script type="text/javascript">
// 表单提交事件
functioninvalidate() {
alert("验证表单数据");
return false;
}
script>
head>
<body>
<form action="http://127.0.0.1:8080" method="get" onsubmit="return invalidate();">
用户名:<input name="username" type="text" /><br />
<input type="submit" />
form>
body>