您的位置：首页 > Web前端 > JavaScript

js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件

2017-09-20 10:05 609 查看

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
cd5c
: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航