JavaScript高级程序设计零碎知识点 事件与处理脚本
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){});
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;//选项的值