JS:事件
1.常用的事件
- onload 加载完成事件 ：页面加载完成之后，常用于做页面js代码初始化操作
- onclick 点击事件 ： 常用于按钮的点击响应操作
- onblur 失去焦点事件： 常用于下来列表和输入框内容发生改变之后的操作
- onchange 内容发生改变事件：常用于下来列表和输入框内容发生改变之后的操作
- onsubmit 表单提交事件 常用于表达提交，验证所有表单项是否合法
2.事件的注册
事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫做事件注册或事件绑定
静态注册事件：
通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册
动态注册事件：
是指先通过js代码得到标签的dom对象，然后通过dom对象.事件 = function(){} 这种形式赋予事件响应后的代码，叫动态注册
动态注册的基本步骤：
1.获取标签对象
2.标签对象.事件名= function( ){ }
onload 事件
<head>
<script type="text/javascript">
//onload 事件的方法
function onloadFun(){
alert('静态注册onload事件');
}
</script>
</head>
<body onload="onloadFun()">
</body>
<script type="text/javascript">
//onload 动态注册，固定写法 并不用调用，页面打开就执行
window.onload = function(){
alert("onload 动态注册");
}
</script>onclick事件
<head>
<script type="text/javascript">
function onclickFun(){
alert("静态注册onclick事件")
}
</script>
</head>
<body>
<!--静态注册onClick事件，按钮点击被调用-->
<button onclick="onclickFun();">按钮</button>
</body>
<head>
<script type="text/javascript">
//动态注册onclick事件
window.onload = function (){
//1.获取标签对象
/**
* document 是js语言提供的一个对象（文档）
* document 指的就是整个当前的页面
* getElementById 通过id属性获取标签对象
*/
var btObj = document.getElementById("btn01");
//2.通过标签对象.事件名 = function（）{}
btObj.onclick = function(){
alert("动态注册的onclick事件");
}
}
</script>
</head>
<body>
<button id="btn01">按钮</button>
</body>onblur失去焦点事件
当我的光标从 用户名 这个文本框中 移走的时候，（点击一下文本框外面的内容），文本框失去焦点，执行对应方法
<head>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurFun() {
//console 是控制台对象，是由js语言提供，专门用来向量浏览器的控制器打印输出，用于测试使用
//log（） 是打印方法
console.log("静态注册失去焦点事件");
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br>
</body>动态注册onblur事件
<head>
<script type="text/javascript">
//动态注册失去焦点事件
window.onload = function(){
//1.获取标签对象
var passwordObj = document.getElementById("password");
//2.通过标签对象.事件名 = function(){};
passwordObj.onblur = function (){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text"><br>
密码:<input id="password" type="text">onchange内容发生改变事件
<head>
<script type="text/javascript">
function onchangeFun() {
alert("你的选择改变了");
}
</script>
</head>
<body>
请选择：
<!--静态注册onchange事件-->
<select onchange="onchangeFun();">
<option>--数字--</option>
<option>--1--</option>
<option>--2--</option>
</select>
</body>动态注册onchange事件
<head>
<script type="text/javascript">
//动态注册onchange事件
window.onload = function (){
//1.获取标签对象1
var selObj = document.getElementById("sel01");
//2.通过标签对象.事件名 = function（）{}
selObj.onchange = function (){
alert('你的选择已经改变！');
}
}
</script>
</head>
<body>
请选择：
<!--静态注册onchange事件-->
<select id="sel01">
<option>--数字--</option>
<option>--1--</option>
<option>--2--</option>
</select>
</body>onsubmit表单提交事件
<head>
<script type="text/javascript">
//静态注册表单提交事务
function onsubmitFun(){
//需要验证所有表单项是否合法，如果，有一个不合法就组织表单提交
alert("“不合法");
return false;
}
</script>
</head>
<body>
<!--return 可以阻止 表单提交-->
<form action="https://www.dangzhifu.com" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册" />
</form>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//获取标签对象
var formObj = document.getElementById("form01");
//2.通过标签对象.事件名 = function（）{ }
formObj.onsubmit = function(){
alert("不合法");
return false;
}
}
</script>
</head>
<body>
<!--return 可以阻止 表单提交-->
<form action="https://www.dangzhifu.com" method="get" id="form01">
<input type="submit" value="动态注册" />
</form>
</body>
阅读剩余
版权声明：
作者：Tin
链接：http://www.tinstu.com/1323.html
文章版权归作者所有，未经允许请勿转载。
THE END
