概述
onclick 单击事件
onblur 失去焦点事件
onchange 当对象或选中区的内容改变时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onsubmit 当表单将要被提交时触发。
1、静态点击事件
<script type="text/javascript">
// A标签的点击事件
function aClick(){
alert("A标签被点击了");
}
// div块标签的点击事件
function divClick(){
alert("div标签被点击了");
}
// 文本输入框的点击事件
function inputClick(){
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方法查找到标签对象
var aObj = document.getElementById("a001");
//alert(aObj);
// 3.给这个对象的事件赋值
aObj.onclick = function() {
alert("用心学习");
}
//通过div标签的id属性值，查找到对应的div标签dom对象
var divObj = document.getElementById("div001");
//alert(divObj);
// 给div对象的单击事件赋值
divObj.onclick = function() {
alert("不要睡觉");
}
// 通过标签的name属性查找到对应的input标签对象
var inputObjs = 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标签对象
var inputObj2 = 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函数
function inputOnBlur() {
alert("文本框失云焦点");
}
</script>
</head>
<body>
<!-- 以静态事件注册 的方式 给input标签添加，失去焦点事件 -->
用户名:<input type="text" onblur="inputOnBlur();" />
</body>
4、改变事件
<script type="text/javascript">
// 下拉列表改变事件
function selectChange(){
alert("改变了");
}
</script>
</head>
上面头，下面身体
<body>
<!-- 以静态注册方式，给下拉列表添加选择改变的事件 -->
省份：<select onchange="selectChange();">
<option>海南省</option>
<option>广东省</option>
<option>河南省</option>
</select>
5、 鼠标进来事件<script type="text/javascript">
// 动态事件第一步，千万要先注册这个文档被加载完成之后的事件
window.onload = function() {
var divObj = 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">
// 定义一个鼠标 移动的函数
function divOut(){
alert("鼠标 出去了");
}
</script>
</head>
<body>
<div id="div001" onmouseout="divOut();" style="width: 100px;height: 100px; background-color: red;">块标签</div>
</body>
7、表单提交页面<script type="text/javascript">
// 表单提交事件
function invalidate() {
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>
最后
以上就是执着蜗牛为你收集整理的js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件的全部内容，希望文章能够帮你解决js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复