064_Js常用的五大事件 onclick nochanger onload onsubmit onblur
事件是电脑输入设备与页面交互的响应。
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的更多相关文章
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- 事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)【转载】
ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse ...
- javascript中常用的DOM事件
//常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放 ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- 两种常用的jquery事件加载的方法 的区别
两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){} 第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...
- JavaScript中,有三种常用的绑定事件的方法
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...
- 事件类型(onload)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- HTML事件(onclick、onmouseover、onmouseout、this)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS事件 鼠标单击事件( onclick )通常与按钮一起使用。onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行
鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发 ...
随机推荐
- ubuntu安装cuda、cudnn和nvidia-docker
目录 安装前的工作 要安装的cuda和cudnn版本说明 安装cuda 检查cuda的安装情况 安装cudnn 安装nvidia-docker 在红米book14上的实践 本文参考自Ubuntu18. ...
- 常用Linxu指令
1.查看端口占用情况 1.查看所有的服务端口: netstat -a 2.查看所有端口并显示进程号(PID): netstat -ap 若需停止某一进程,可通过kill PID来杀死进程或者用kill ...
- python_异常处理(try except)
1,异常捕获 异常捕获的字段为python解释报错的最后一行的第一个单词.使用try方法,程序报错时,可以使用except方法匹配报错的异常关键字,继续except下方定义的代码,从而保证代码可以正常 ...
- ps如何正确擦除文字 如何正确用ps擦除文字
1.启动PS:新建文档,进入到软件操作界面中. 2.再把图片素材拖入到PS中.接下来,要把图片上的文字清除掉. 3.按L键,调出套索工具,接着,把文字给框选出来. 4.再按SHIFT+F5调出填充对话 ...
- 将【jar包、bat、其他文件】注册到windows服务的三种方法
将[jar包.bat.其他文件]注册到windows服务的三种方法 1.instsrv.exe和srvany.exe 1.下载配置instsrv和srvany 下载地址:https://dl.pcon ...
- spring的aop的粗浅理解
aop有什么用? 假设你写了一本书,写的是一个平民的日常聊天.现在突然你想让这个平民变成一个书生的口气.于是你想在这个平民的每句话之前加上"之乎",后面加上"者也&quo ...
- NodeJS增删改查的获取方法
get獲取方法 ctx.query post獲取方法 ctx.request.body delete ctx.request.body put ctx.query ctx.request.body
- 软件工程日报六——TextView和button
今天继续学习安卓stduio的知识--TextView和button TextView是安卓stduio中十分重要的一个控件,它可以在安卓应用上显示文字 通过网络我找到了TextView的相关用法如下 ...
- (0321) 路科 视频 ,讲 uvm_pkg
loading
- stl算法汇总