JavaScript高级程序设计零碎知识点 事件与处理脚本
2015-05-12 18:44
645 查看
1.事件处理程序
事件就是用户或浏览器自身执行的某种动作,处理程序的名字一on 开头。1)通过event变量,可以直接访问事件对象:onclick="alert(event.type)";//输出click;通过this变量,可以访问目标元素
<input type="button" value="feng" onclick="alert(this.value)"/>//输出feng当然这样可能会报错,比如处理函数是在按钮图像页面的最下方定义的,页面的内容虽然刷出来了,但是处理函数却没有开始解析,系统报错!换成如下的方式可以避免
<input type="button" value="Click me" onclick="try{showMessage();}catch(ex){}"/>
可以通过使用type属性,来使用一个函数处理多个事件。例如,按钮的三种状态的转换
第一种方式:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <script> window.onload=function(){//注意,此处的作用是为了window对象创建时就加载JS函数,否则btn会为null,类似于上面说的样样子 var btn = document.getElementById("myBtn"); var handler = function(event){ switch(event.type){ case "click": alert("Click"); break; case "mouseover": event.target.style.backgroundColor = "red"; break; case "mouseout": event.target.style.backgroundColor = ""; break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler; } </script> </head> <body> <input id="myBtn" type="button" value="Click me"/> </body> </html>
第二种方式:通过跨浏览器的EventUtil对象提供支持
EventUil.addHandler(window,"load",function(event){ //创建图像元素,其他的属性也可以,如script var img = document.createElement("img"); //对图像元素设置onload处理函数,以便图像完全加载完毕后给出提示 EventUil.addHandler("img","load",function(event){ <span style="color:#ff0000;">event = EventUtil.getEvent(event);</span> alert(EventUtil.getTarget(event).src) //将图像添加入页面中,还设置了src属性 document.body.appendChild(image); //指定src属性就会开始下载 image.src = "smile.gif"; }) })
可以使用event.stopPropagation()来阻止特定事件的默认行为,如组织链接到指定URL
2.事件类型
1)UI事件1.load:当页面完全加载后在window上面触发,当所有框架都加载完毕时在框架集上出发,当图像加载完毕时在img标签上触发
<!--可以像上面的那个例子一样,使用windows.load=function,也可以直接在body里使用, 如果window.onload=function(){ alert("aaa");} 刷新页面之后会先出现aaa,再出现feng --> <body onload = "alert('feng')"> <input id="myBtn" type="button" value="Click me"/> </body>
2.unload:当xxx完全卸载后触发
3.abort:当用户停止下载过程中
2)焦点事件
1.blur:当元素失去焦点是触发
2.focus:当元素或阿胶电视触发
3)鼠标与滚轮事件
1.click:单击鼠标左键或者按下回车键是触发
2.dblclick:双击鼠标左键
3.mouseout:
4.mouseover
5.触发鼠标事件是event的坐标属性:
浏览器视口区水平及垂直坐标(clientX,clientY)
页面坐标位置(浏览器左上角相对)(pageX,pageY)
电脑屏幕坐标位置:(screenX,screenY)
6.event.keyCode:键盘按键的ASCII值
3.内存和性能
1)事件委托:如果某一个父元素内有多个子元素会响应同一类事件,则将这一个事件委托给父元素,限制连接的次数,判断target.id来区分。这样只获取了一个DOM元素,节省内存<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <script> window.onload=function(){ var list = document.getElementById("myUl"); EventUtil.addHandler(list,"click",function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); alert(target) switch(target.id){ case "li_a": document.title = "I changed the document's title"; break; case "li_b": location.href = "http://www.baidu.com"; break; case "li_c": alert("feng"); break; } }); } </script> </head> <body> <ul id="myUl"> <li id="li_a">wei</li> <li id="li_b">xiao</li> <li id="li_c">feng</li> </ul> </body> </html>
2)移除事件:在设置<div>等标签的InnerHTML属性之前,县一处按钮的事件处理函数
var btn = document.getElementById("myBtn");//单击按钮是将按钮移除并替换成一条消息 btn.onclick = function(){ //先执行某些操纵 btn.onclick = null;//移除事件处理程序,释放内存 document.getElementById("myDiv").innerHTML = "Processing " }
4.表单脚本
在HTML中,表单是有<form>元素来表示的,而在JS中,则对应HTMLFormElement类型1)获取表单元素
<span style="font-size:18px;"> <span style="white-space:pre"> </span>var f1 = document.getElementById("myForm");//获得单独的某个表单</span>
<span style="font-size:18px;"><span style="white-space:pre"> </span>var first = document.forms[0];//通过索引获取表单</span>
2)提交表单:以下三种任何一种都可以触发提交表单的事件
<span style="font-size:18px;"> <!--通用提交按钮--> <input type="sbumit" value="Submit Form" /><span style="color:#ff0000;">//var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){},false);</span> <!--自定义提交按钮--> <button type="submit">Submit Form</button> <!--图像按钮--> <input type="image" src="some.gif"></span>
<span style="font-size: 18px;"> 或者使用这种方式:form.submit();可以无需包含提交按钮,但是不会触发submit事件,所以需要再调用此方法之前先验证表单数据</span>
阻止提交:以这种方式提交表单时,浏览器会在将请求发给服务器之前触发submit事件,所以浏览器在这个时机决定是否允许表单提交
</pre><pre name="code" class="html"> <span style="font-size:18px;">以这种方式提交表单时,浏览器会在将请求发给服务器之前触发submit事件,所以浏览器在这个时机决定是否允许表单提交 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <script> window.onload=function(){ var EventUtil = { addHandler : function(element, type, handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on" + type, handler); }else{ elmenet["on" + type] = handler; } }, removeHandler : function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false); }else if(element.detachEvent){ element.detachEvent("on"+type, handler); }else{ element["on"+type] = null; } }, //返回对event对象的引用 getEvent:function(event){ return event?event:window.event; }, //返回事件的目标 getTarget:function(event){ return event.target||event.srcElement; }, //取消事件的默认行为 preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); } else{ event.returnValue = false; } } }; var form = document.getElementById("myForm"); EventUtil.addHandler(form,"submit",function(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); alert("成功阻止表单的提交") }); } </script> </head> <body> <form id = "myForm"> <input id="my"type="submit" value="Submit Form" /> </form> </body> </html></span>
3)重置表单事件
EventUtil.addHandler(form,"reset",function(event){});
4)表单字段
1.每个表单都有一个elements属性,该属性是表单所有字段的集合,可按出现顺序form.elements[1]调用,或者按name属性form.elements["name"]
2.共有的表单字段属性
disabled:布尔值,当前字段是否被禁用。可以监听submit事件,并在发生时btn.disabled=true;禁用提交按钮,防止重复提交
readOnly:布尔值,当前字段是否只读
value:当前字段被提交给服务器的值。对文件字段来说,这个属性是只读的,包含文件在计算机中的路径
form:指向当前字段所属表单的指针,只读
3.共有的表单字段方法
focus():将焦点设置到表单字段。
blur():从元素中移走焦点
4.共有的表单字段事件:blur,change,focus
4.文本框脚本
1)select事件:当鼠标选择了文本框内的文字后触发,<span style="white-space:pre"> </span>var textbox = document.forms[0].elements["textbox1"]; EventUtil.addHandler(textbox,"select",function(event){ alert("Text selected"+textbox.value);//返回的是所有内容,而不是选中的内容 })
2)过滤输入
1.通过判断输入的字符,来进行定向的阻止:
实例:只允许在输入框内输入数字
<span style="white-space:pre"> </span>var textbox = document.forms[0].elements["textbox1"]; EventUtil.addHandler(textbox,"keypress",function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); var charCode = EventUtil.getCharCode(event); alert(charCode) if(!/\d/.test(String.fromCharCode(charCode))){//只允许输入数字 alert(charCode) EventUtil.preventDefault(event); } });需要在EventUtil中添加如下函数
getCharCode:function(event){ if (typeof event.charCode == "number"){ return event.charCode; }else return event.keyCode;//IE8之前或opera浏览器 }
3)自动切换焦点功能:输入字符达到上限后自动跳转到下一个文本框,下面是脚本,Hmtl文件省略掉了,就是三个输入框
(function(){ function tabForward(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if(target.value.length == target.maxLength){ var form = target.form; for(var i =0,len =form.elements.length;i<len;i++){ if(form.elements[i] == target) { if(form.elements[i+1]){ form.elements[i+1].focus(); } } } } } var textbox1 = document.getElementById("txt1"); var textbox2 = document.getElementById("txt2"); var textbox3 = document.getElementById("txt3"); EventUtil.addHandler(textbox1,"keyup",tabForward); EventUtil.addHandler(textbox2,"keyup",tabForward); EventUtil.addHandler(textbox3,"keyup",tabForward); })();
5.选择框脚本
1)访问选项数据<span style="white-space:pre"> </span> var selectbox = document.forms[0].elements["location"]; var text = select.options[0].text;//选项的文本 var value= select.options[0].value;//选项的值
相关文章推荐
- 跨浏览器的JavaScript事件处理[JavaScript高级程序设计]
- JavaScript高级程序设计 DOM事件处理 读书笔记
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
- JavaScript高级程序设计知识点汇总
- js高级程序设计之跨浏览器事件处理
- javascript的高级使用,设置页面元素是否相应事件与显示“正在处理”对话框
- javascript高级程序设计---事件笔记
- javascript高级程序设计第二版第十二章事件要点总结
- JavaScript第六章知识点总结——JavaScript常用DHTML对象 Document相关对象 事件处理
- Javascript高级程序设计第八章知识点总结
- JavaScript高级程序设计学习笔记--事件(二)(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- Javascript高级程序设计第十三章(事件)
- JavaScript表单处理[JavaScript高级程序设计]
- javascript高级程序设计---事件类eventUntil
- javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
- Javascript高级程序设计第七章知识点总结
- javascript高级程序设计---事件封装的测试html