网站建设需要工作计划百度seo价格
最近开始JavaWeb,先复习一些前端。html和css了解个大概,需要的时候查一下文档即可。推荐这个专栏,前端的向他学一点也就够了。
JS之前倒没有接触过,写一写自认为重要的专题。
坚持~ 多看,多coding,思维导图什么的都安排上。
另外学数据库的时候老师说到萨师煊和王珊老师的数据库那本书很专业,恰巧我校学的也是这本,但学了个皮毛,争取之后再把有意思的看一看。
文章目录
- 事件的概念
- onload
- onblur
- onchange
- onclick
- onsubmit
事件的概念
事件是电脑输入设备与页面进行交互的响应。我们称之为时间
常用
onload 页面加载完成后,常用于做页面js代码初始化操作
onclick 常用于按钮的点击响应操作
onblur 常用于输入框失去焦点后验证其输入内容是否合法 (onfocus:得到焦点)
onchange 常用于下拉列表和输入框内容发生改变后操作
onsubmit 常用于表单提交前,验证所有表单项是否合法
事件注册
什么是事件注册?
告诉浏览器,事件响应后要执行哪些操作代码,交事件注册或事件绑定。
-
静态注册事件
通过html标签的事件属性直接赋于事件响应后的代码,这种方式叫静态注册 -
动态注册事件
是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码,叫动态注册
基本步骤: 1.获取标签对象 document.getElementById window 2.标签对象.事件名
onload
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js事件</title><script type="text/javascript">//onload事件的方法function onLoadFun() {alert("静态注册onload事件,所有代码");}//onloadshijian动态注册,是固定写法window.onload=function () {alert("动态注册");}</script>
</head><!--静态注册onload事件onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="onLoadFun();">
</body >
</html>
onblur
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onblurTest</title><script type="text/javascript">function onblurFun() {console.log("静态注册失去焦点事件");}window.onload=function () {var pw=document.getElementById("password");pw.onblur=function () {console.log("动态注册失去焦点事件");}}</script></head>
<body>用户名:<input type="text" onblur="onblurFun()"/>密码: <input type="password" id="password"/></body>
</html>
onchange
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onchange</title><script type="text/javascript">function onchangeFun() {alert("静态事件onchange改变");}window.onload=function () {var changeTestObj=document.getElementById("selectTest");changeTestObj.onchange=function () {alert("动态事件onchange发生")}}</script>
</head>
<body><select onchange="onchangeFun()"><option>1</option><option>2</option><option>3</option></select><select id="selectTest"><option>4</option><option>5</option><option>6</option></select>
</body>
</html>
onclick
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onclick</title><script type="text/javascript">function onclickfun() {alert("静态注册onclick事件");}window.onclick=function () {//1. 获取标签对象/*** document是js语言提供的一个对象(文档)* 通过id属性获取标签对象 getElementById* **/var btnObj=document.getElementById("ben01");//2. 通过标签对象.事件名=function(){}btnObj.onclick=function () {alert("动态注册的onclick")}}</script>
</head>
<body><button onclick="onclickfun()">按钮1</button><button id="ben01">按钮2</button></body>
</html>
onsubmit
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onsubmitTest</title><script type="text/javascript">function submitFun() {alert("静态注册表单提交事件——发现不合法")return false;}window.onload=function () {var loadObj=document.getElementById("dt");loadObj.onsubmit=function () {alert("动态注册表单提交事件——发现不合法");return false;//不合法就阻止提交}}</script>
</head>
<body><form action="http://localhost:3306" method="get" onsubmit="return submitFun()"><input type="submit" value="静态注册"/></form><form action="http://localhost:3306" method="get" id="dt"><input type="submit" value="动态注册"></form></body>
</html>