JS 之onchange onclick ……常用事件
2017-07-31 23:39
555 查看
|
---|
JS事件
一、什么是事件?事件是电脑输入设备与页面交互的响应。我们称之为事件。常用的事件:
onload加载完成事件 onclick单击事件 onblur失去焦点事件 onchange内容发生改变事件 经常用于select下拉列表选中后的内容发生改变时候触发 onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。
二、事件的注册又分为静态注册和动态注册两种:
静态注册事件:
就是在标签上使用事件属性赋值的形式 给这个标签的事件响应添加javaScript代码的方式,我们称之为静态注册事件。
动态注册事件:
动态注册,需要我们先获取到标签对象。 然后通过对标签对象的的属性进行赋值一个function函数的形式。
动态注册需要分两步走:
第一步,先获取标签对象 第二步,通过标签对象.事件名 = 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:1.6事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)
- JS:1.6,事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)
- JS中onpropertychange和onchange事件区别小结
- JS中onpropertychange事件和onchange事件区别
- js 触发select onchange事件代码
- JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
- 下拉框的触发事件分析(onchange、onfocus、onclick)
- js select onchange事件
- js中的事件onchange案例
- js 触发select onchange事件代码
- onkeydown onpropertychange onchange js事件
- js onpropertychange输入框 事件获取属性
- js ie input onchange事件兼容BUG
- js onpropertychange输入框 事件获取属性
- JS中onpropertychange和onchange事件区别小结
- asp.net中,js改变textBox的文本内容的触发事件是onpropertychange
- js 触发select onchange事件
- js 触发事件(input onchange )
- 发现一个有用的js事件onpropertychange
- DropDownList 前台 onchange 事件js控制显示隐藏元素