事件是电脑输入设备与页面交互的响应。
onload加载完成事件：onload事件 是在页面被浏览器加载完成之后。自动触发的响应 ???onclick单击事件 onblur失去焦点事件onchange内容发生改变事件 ?经常用于select下拉列表选中后的内容发生改变时候触发onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种
静态注册事件：在标签上使用事件属性赋值的形式 给这个标签的事件响应添加javaScript代码的方式；动态注册事件：动态注册，需要我们先获取到标签对象。然后通过对标签对象的的属性进行赋值一个function函数的形式。
事件一、onclick（下面是静态注册单击事件示例）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>The event of script</title><script type="text/javascript"> ??function onclickEvent(){ ??????alert("您点击了我 我是一个单击钮触发的事件并且此处由静态加载！！"); ??}</script></head><body><input type="button" onclick="onclickEvent();" value="单击事件静态"/></body></html>
事件二、onload（下面是静态加载）事件 是在页面被浏览器加载完成之后。自动触发的响应
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- ????onload事件 是在页面被浏览器加载完成之后。自动触发的响应 ???此处静态注册 --> <script type="text/javascript"> ???alert("onloadFun() 还未起作用 ??现在页面还没有加载完！"); ????function onloadFun(){ ???//alert("页面被加载完成！之后执行"); ???// 在javaScript中，我们要操作一个标签要分两步走： ???// 第一步，先获取标签对象 ???//get 获取 ???//Element 元素（元素也就是标签） ???// by 是由 经 ，通过 ???// id 是id属性 ???var spanObj = document.getElementById("span01"); ????alert(spanObj.innerHTML); ???// ?alert(spanObj); ???// 第二步，操作标签对象的属性 ??// innerHTML 表示对象的起始标签和结束标签中间的html文本内容 ???//alert( spanObj.innerHTML ); ???//spanObj.innerHTML = "xxxxxx"; ?// 创建一个date对象获取当前时间var date = new Date(); // 把日期对象转换成为字符串var dateStr = date.toLocaleString();alert("页面加载完 script函数执行中我将更改span标签的内容！！为一个时间"); ????spanObj.innerHTML = dateStr;} </script></head><body onload="onloadFun();"> ???<button>我也是一个按钮</button><br /> ???<span id="span01">我是span标签用来检验onload事件的静态加载 ?现在页面加载完 ?我出现</span></body></html>《2》动态注册onload 和 onclick 事件（单击事件 加载完成事件）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> ??????alert("页面加载前 未显示页面内容"); ???/* ???????onload事件的动态注册的写法 ???*/ ???window.onload = function() {// ?????alert("页面被加载完成！");// ?????动态注册需要分两步走：// ?????第一步，先获取标签对象 ???????var buObj = document.getElementById("bu01");// ?????alert(buObj);// ?????第二步，通过标签对象.事件名 = function(){ ?} ????????alert("页面加载完成 我已获取按钮并绑定单击事件！！"); ???????buObj.onclick = function(){ ???????????alert("这是刚刚页面动态加载完给按钮绑定的单击事件 点击看看！"); ???????} ???}</script></head><body> ???<button id="bu01">我是一个按钮</button> ???<font color="red" size="5">如果页面加载完 就会看见我了</font></body></html>
事件三onblur 动态 和 静态 注册（失去焦点事件）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> alert("现在未执行动态加载是页面加载前你看不懂表单吧！！"); ???//onblur静态触发的script函数 ???function onblurFun(){ ???????alert("用户名失去焦点！"); ???} ???//动态获取加载完页面并赋与触发事件 ???window.onload = function() { ???????alert("此时页面加载完 账号标签已经被静态的注册了失去焦点事件"); ???????//第一步，先获取标签对象 ???????var passObj = document.getElementById("password"); ???????// ?alert(passObj); ???????//第二步，通过标签对象.事件名 = function(){} ???????alert("页面已加载完 已获取到密码标签并正在执行绑定onblur事件"); ???????passObj.onblur = function() { ???????????alert("密码框动态注册的onblur事件生效 "); ???????} ???}</script></head><body><!-- ????静态注册失去焦点事件 ?-->账号:<input type="text" onblur="onblurFun()"/><br/>密码:<input id="password" type="password" /><br/>邮箱:<input id="email" type="text" /><br/></body></html>
事件四onchange 动态 和 静态 注册（内容发生改变事件）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function onchangeFun(){ ???alert("静态注册的onchage事件 ");}alert("现在页面未加载但是男神下拉框 已经被静态绑定了onchange 改变事件");// 页面加载完成之后window.onload = function() { ???// 1.通过id属性值获取第二个select标签对象 ???var selectObj = document.getElementById("select01"); ???// 2.通过标签对象.事件名 = function(){} ???alert("现在页面加载完成 对女神下拉框动态注册onchange事件中"); ???selectObj.onchange = function() { ???????alert("这是动态创建的onchange事件 "); ???}}</script></head><body>请选择你心中的男神：<select onchange="onchangeFun();"> ???<option selected="selected">刘德华</option> ???????<option>张学友</option> ???????<option>张国荣</option></select><br/>请选择你心中的女神：<select id="select01"> ???<option>李四</option> ????<option selected="selected">张三</option> ????<option>王五</option></select></body></html> ?
事件五onsubmit 动态 和 静态 注册（内容发生改变事件）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function onsubmitFun() { ???alert("验证所有的表单操作……"); ???// 情况1 如果有一个表单不合法，我们就可以直接return false;阻止表单提交到服务器 ???alert("有表单不合法，阻止提交"); ???return false; ???// 情况2 如果所有的表单都合法 ???alert("所有的表单都合法，通过验证，让表单提交到服务器"); ???return true;}</script></head><body><!-- ????onsubmit事件 ，是表单提交事件。经常用来在表单提交的时候验证所有表单项是否合法。 ???我们在静态注册的时候，必须手动态写上reutrn false可以阻止表单的提交 ???return false可以阻止html标签元素的默认行为 --> ???<form action="http://www.baidu.com" method="get" ????onsubmit="return onsubmitFun();"> ???用户名:<input type="text" /><br /><br /> ???<input type="submit" value="我是一个sumbit按钮"/></form></body></html>
JS事件
一、什么是事件？事件是电脑输入设备与页面交互的响应。我们称之为事件。
常用的事件：
onload加载完成事件 ???onclick单击事件 onblur失去焦点事件onchange内容发生改变事件 ?经常用于select下拉列表选中后的内容发生改变时候触发onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。事件五onsubmit 动态 和 静态 注册（内容发生改变事件）
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function onsubmitFun() { ???alert("验证所有的表单操作……"); ???// 情况1 如果有一个表单不合法，我们就可以直接return false;阻止表单提交到服务器 ???alert("有表单不合法，阻止提交"); ???return false; ???// 情况2 如果所有的表单都合法 ???alert("所有的表单都合法，通过验证，让表单提交到服务器"); ???return true;}</script></head><body><!-- ????onsubmit事件 ，是表单提交事件。经常用来在表单提交的时候验证所有表单项是否合法。 ???我们在静态注册的时候，必须手动态写上reutrn false可以阻止表单的提交 ???return false可以阻止html标签元素的默认行为 --> ???<form action="http://www.baidu.com" method="get" ????onsubmit="return onsubmitFun();"> ???用户名:<input type="text" /><br /><br /> ???<input type="submit" value="我是一个sumbit按钮"/></form></body></html>064_Js常用的五大事件 onclick nochanger onload onsubmit onblur
原文地址：https://www.cnblogs.com/bandariFang/p/9674696.html