一、onload.加载事件
load事件什么时候发生？
onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生
1、以下执行是错误的，因为代码执行的时候id="btn"的元素还没添加
<body><script type="text/javascript">// 第一步:根据id获取节点对象var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没加载到内存)// 第二步:给节点对象绑定事件btn.onclick = function(){alert("hello js");}</script><input type="button" value="button" id="btn"/>
2、onload事件
2.1、静态注册的onload事件
<!-- load事件什么时候发生？onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生。--><body onload="ready()"><!--注意：不要丢了小括号--><script type="text/javascript">function ready() {document.getElementById("btn").onclick = function(){alert("load加载完成事件")}}</script><input type="button" value="button" id="btn"/></body>
2.2、动态注册的onload事件
<body><script type="text/javascript">// 页面加载的过程中,将a函数注册给了load事件// 页面加载完毕之后,load事件发生了,此时执行回调函数a// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件// 当id="btn"的节点发生click事件之后,b函数被调用并执行.window.load = function(){// 这个回调函数叫做adocument.getElementById("btn").onclick = function () {// 这个回调函数叫做balert("动态注册的onload事件")}}</script><input type="button" value="load" id="btn"/></body>
3、JS代码设置节点的属性
<body><script type="text/javascript">window.onload = function () {document.getElementById("btn").onclick = function () {var mytext = document.getElementById("mytext")// 一个节点对象中只要有的属性都可以"."mytext.type = "checkbox";}}</script><input type="text" id="mytext"/><input type="button" value="将文本框变为复选框" id="btn"/></body>
点击按钮后：
二、onblur失去焦点事件
<body><script type="text/javascript">//静态注册失去焦点事件function onblurFun() {// console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，// 用于测试使用// log()是 打 印 的 方法console.log("静态注册失去焦点事件");}//动态注册失去焦点事件window.onload = function () {var passwordObj = document.getElementById("password");passwordObj.onblur = function () {console.log("动态注册失去焦点事件");}}</script>用户名：<input type="text" onblur="onblurFun()"/><br/>密码：<input id="password" type="text"/><br/></body>
三、onchange内容发生改变事件
<body><script type="text/javascript">//静态注册onchange事件function onchangeFun(){alert("爱好已经改变了");}//动态注册onchange事件window.onload = function () {//1、获取标签对象var dance = document.getElementById("dance");// alert( selObj );// 2 通 过 标 签 对 象 . 事 件 名 = function(){dance.onchange = function () {alert("舞种已经改变了")}}</script>请择你的爱好：<!--静 态 注 册 onchange事 件 --><select onchange="onchangeFun()"><option>唱歌</option><option>演戏</option><option>说相声</option><option>跳舞</option></select><br/><br/><br/>请择你要学习的舞种：<select id="dance"><option>狂派舞</option><option>街舞</option><option>地板舞</option><option>锁舞</option></select></body>
四、onsubmit 表单提交事件
<body><script type="text/javascript">//静态注册表单提交事件function onsubmitFun() {//要 验 证 所 表 单 项 是 否 合 法 ， 如 果 ， 一 个 不 合 法 就 阻 止 表 单 提交alert("静态注册表单提交事件----发现不合法");return false;}//动态注册表单提交事件window.onload = function () {//获取标签对象var form = document.getElementById("form");//通过对象.事件名=function(){}form.onsubmit = function () {//要 验 证 所 表 单 项 是 否 合 法 ， 如 果 ， 一 个 不 合 法 就 阻 止 表 单 提交alert("动态注册表单提交事件----发现不合法");return false;}}</script><!--return false可 以 阻 止 表 单 提 交--><form action="http://localhost:8080" onsubmit="return onsubmitFun();"><input type="submit" value="静态注册"/></form><form action="http://localhost:8080" id="form"><input type="submit" value="动态注册"/></form></body>
