Java Script(三) |
您所在的位置：网站首页 › onclick和onchange › Java Script(三) |
Java Script(三)
|
js中的事件
事件是电脑输入设备与页面进行交互的响应。 常用的事件： onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作 onclick 单击事件： 常用于按钮的点击响应操作。 onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。 onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作 onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。 事件的注册： 什么是事件的注册（绑定）？ 就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。 静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。 动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。 动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion(){} 和onload加载完成事件结合起来，有了onload动态注册才实现了后续其它事件的动态注册。 动态注册事件可以做到当页面加载完成后再执行script中的代码。 静态注册事件遵循从上到下依次执行，可能会出错。 1.onload加载完成事件onload事件是浏览器解析完页面之后就会自动触发的事件。 1.1静态注册onlaod属性 必须写在body标签中。 JS-2021-01-15 function onloadFun() { alert('静态注册 onload 事件，所有代码'); }其实这里面function函数只有一句alert函数，是可以直接写的，就不用再写function函数了，区别看第7行。 JS-2021-01-15 1.2动态注册 JS-2021-01-15 window.onload=function (){//固定格式 alert('动态注册 onload 事件，所有代码'); } 这里就不用再写οnlοad=" "了 2.onclick单击事件常用于按钮的点击响应操作。 也分为静态注册和动态注册： JS-2021-01-15 function onclickFun() { alert('静态注册的 onclick 事件'); } window.onload=function () { var btn=document.getElementById("btn02"); btn.onclick =function () { alert('动态注册的 onclick 事件'); } } 按钮1 //静态注册 按钮2 //动态注册 3. onblur失去焦点事件什么是失去焦点？ 想象一下学习通的看视频过任务点时，每当鼠标离开视频界面视频就会暂停。 我们可以把视频看作一个焦点，鼠标离开后就是发生了一次失去焦点事件。 onblur事件在失去焦点后触发，分为静态触发和动态触发，常用于输入框失去焦点后验证其输入内容是否合法。 
console 是控制台对象 ，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用 log()是其打印的方法 JS-2021-01-15 //静态注册失去焦点 function onblurFun() { console.log("静态注册失去焦点事件"); alert('静态:离开文本框了，亲！'); } //动态注册 onblur 事件 window.onload=function () { var pwd=document.getElementById("passwd"); pwd.onblur=function () { console.log('动态注册失去焦点事件'); alert('动态:离开文本框了，亲！'); } } 用户名： 密码： 4. onchange 内容改变事件 JS-2021-01-15 //静态注册 function onchangeFun() { alert('女神已经改变了'); } //动态注册 window.onload=function () { var sel=document.getElementById("select"); sel.onchange=function (){ alert('男神已经改变了'); } } 请选择你心中的女神： --女神-- dd ee ff 请选择你心中的男神： --男神-- aa bb cc 5. onsubmit 表单提交事件 JS-2021-01-15 function onsubmitFun() { //假设这一部分内容要验证所有表单项是否合法，如果有一个不合法就输出提示，并阻止表单提交 alert("静态注册表单提交事件----发现不合法"); return false; //返回false，阻止提交 } window.onload=function (){ var fm=document.getElementById("form"); fm.onsubmit=function (){ //检查环节 alert("动态注册表单提交事件----发现不合法"); return false; } } |
【本文地址】