一、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>

onload事件、onblur事件、onchange事件、onsubmit事件举例相关推荐

关于onsubmit事件return的使用
onsubmit事件支持所有浏览器. onsubmit事件支持且仅支持form标签. 按正常的理解来说,该事件是发生在submit事件触发,但是执行action之前这中间.但是它的使用上有一个小坑. ...
事件介绍、两种事件注册的介绍、onload事件、onclick事件、onblur事件、onchange事件、onsubmit事件
事件介绍事件就是电脑输入设备与页面进行交互的响应,被称之为事件常用的事件: onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作 onclick ...
Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件
js中的事件事件是电脑输入设备与页面进行交互的响应. 常用的事件: onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作 onclick 单击事件: 常用于按钮的点击响 ...
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
WEB前端 -- 下拉框的触发事件分析（onchange、onfocus、onclick）
select的onChange事件问题解决 (onchange.onfocus.onclick.onmousedown) 一.onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第 ...
php onsubmit方法,表单元素的submit()方法和onsubmit事件应用概述
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...
JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...
表单元素的submit()方法和onsubmit事件
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...

onload事件、onblur事件、onchange事件、onsubmit事件举例

一、onload.加载事件

二、onblur失去焦点事件

三、onchange内容发生改变事件

四、onsubmit 表单提交事件

onload事件、onblur事件、onchange事件、onsubmit事件举例相关推荐

最新文章

热门文章