本文详细介绍了HTML事件处理器的基本概念、使用方法、事件类型及其响应机制，包括如何添加、删除事件处理器，以及如何实现跨浏览器兼容性。此外，文章还深入探讨了事件对象的属性与用途，并展示了如何通过事件处理器实现表单验证与默认操作的禁止。
本文为个人读书笔记，大部分为书中内容摘要。仅供记录和分享学习中遇到的需要留意的问题，如有相关版权问题请及时通知作者。
事件范例
常见事件处理器
| 事件处理器 | 响应的事件 |
| onBlur | 用户离开字段 |
| onChange | 用户修改了值 |
| onClick | 点击 |
| onDblClick | 双击 |
| onFocus | 用户进入字段 |
| onKeydown | 在元素激活时，一个按键被按下 |
| onKeyup | 在元素激活时，一个按键被释放 |
| onKeypress | 在元素激活时，一个按键被按下，然后被释放 |
| onLoad | 对象已经加载 |
| onMousedown | 鼠标按钮在一个对象上被按下 |
| onMouseup | 鼠标按钮被释放 |
| onMouseover | 鼠标移动到对象上 |
| onMousemove | 鼠标在对象上方移动 |
| onNouseout | 鼠标离开对象 |
| onReset | 用户重置表单 |
| onSelect | 用户选择了对象的一些内容 |
| onSubmit | 用户提交了表单 |
| onUnload |
用户关闭浏览器窗口 //在我个人的实践中发现，几乎所有的浏览器都无法响应这个事件 |
添加事件处理器
内联事件处理器
<input type="button" onclick="myFunction()"/>
另一种：
定义一个函数。在JS代码里利用document.getElementByID（）方法访问元素，在把函数赋予给它相应的方法。
document.getElementById("myButton").onclick=buttonAlert;//这里函数名不能加括号，不然返回函数调用后的返回值。
匿名函数式：
document.getElementById("myButton").onclick=function(){//function body}
删除事件处理器
给它赋值null
document.getElementById("myButton").onclick=null;
默认操作
一般情况下，特定HTML元素的时间处理器是在元素默认操作之前执行的。
禁止默认操作
利用事件处理器优先执行的特点，我们可以禁止HTML元素的默认操作。
如果事件处理器给HTML元素返回一个布尔值false，元素的默认操作就不会执行。
还可以让事件处理器自己决定是否允许默认行为发生。
return confirm("xxx,ok?");
表单验证
function checkform(){
document.getElementById("form1").onsubmit=function(){
var allowSubmit=true;
if(document.getElemtnById("user").value==""{
alert("xxx cannot be blank")；
allowSubmit=false；
}
if（allowSubmit） alert("ok");
return allowSubmit;
}
}
window.onload=checkform;
event对象
由浏览器自动生成，包含的属性涉及被触发事件的方方面面。
浏览器兼容性问题会影响，因此分开说明。
W3C方式
在严格遵循W3C规范规范的浏览器里，事件被触发时，会自动把event对象作为参数传递给事件处理器。为了访问event对象的属性，为了访问event对象的属性，需要给它设置一个名称，也就是给事件处理器声明一个变量。
myElement=document.getElementById("someID");
myElement.onclick=function(e){...}
本例中，访问变量e的属性就可以访问event对象的属性：
myElement.onclick=function(e){alert(e.type);}//e是惯例
微软方式
微软方式是给window对象设计了一个evnet属性。它包含最近一次触发事件的细节：
myElement=document.getElementById("someID");
myElement.onclick=function(e){alert(window.event.type);}
跨浏览器的事件处理器
确保代码能够查看有效的event事件：在事件处理函数里检测event对象的存在性。如果有event对象，就说明是W3C兼容的浏览器；如果不存在，浏览器就可能是微软类型的，这时就需要获得window.event属性，把它赋予对象e
myElement.onclick=function(e){
if(!e) var e=window.event;
...
}
W3C浏览器和微软浏览器
通用事件属性
| 属性 | 描述 |
| type | 事件类型 |
| altKey | Alt键是否按下，布尔值 |
| clientX，clientY | 相对于浏览器窗口的事件坐标 |
| ctrlKey | Ctrl键是否按下，布尔值 |
| keyCode | 键盘字符编码 |
| screenX，sreenY | 相对于屏幕的事件坐标 |
| shiftKey | Shift键是否按下，布尔值 |
不同的事件属性
| 微软 | W3C | 描述 |
| fromElement | relatedTarget | mouseover或mouseout事件从哪个对象来 |
| toElement | relatedTarget | mouseover或mouseout事件到哪个对象去 |
| offsetX，offsetY | n/a | 事件在元素里的水平和垂直坐标 |
| n/a | pageX，pageY | 事件在文档里的水平和垂直坐标 |
| x，y | layerX，layerY | 事件在<body>元素里的水平和垂直坐标 |
| srcElement | target | 接收事件的对象 |
为了实现跨浏览器的代码，需要在脚本中检测event对象是否具有我们需要的方法和属性
if(!e) var e=window.event;
var element=(e.target)?e.target:e.srcElement;
事件处理器的高级方式
给属性注册多个事件处理器
W3C方式
W3C提供了addEventListener和removeEventListener方法，可以根据需要添加和删除任意数量的事件处理器。
element.addEventListener('click',myFunction,false);
element.addEventListener('click',myOtherFunction,false);
element.removeEventListerner('click',myFuction,false);
第一个参数指明要捕获的事件，第二个参数指明事件要执行的函数。
第三个参数是布尔值，表示当多个嵌套元素捕获同一事件时事件处理的属性。一般情况下设置为false.
当多个嵌套元素捕获到同一个事件时，浏览器厂家和W3C采取两种方式之一进行处理。捕获：外部元素先执行，冒泡：内部元素先执行。
微软方式：
attachEvent和detachEvent
element.attachEvent('onclick',myFunction);
element.detachEvent('onclick',myFunction);
微软的onclick对应W3C的click
IE9支持W3C方法
跨浏览器的实现方式
事件检测方式：
function addEventHandler(element,eventType,handlerFunction){
if(element.addEventHandler){
element.addEventListener(eventType,handlerFunction,false);
}else if(element.attachEvent){
element.attachEvent('on'+eventType,handlerFunction);
}
}
var eventType='click';
var myButton=document.getElementById('button01');
addEventHandler(myButton,eventType,myFunction);
去除事件处理器的跨平台方式：
function removeEventHandler(element,eventType,handlerFunction){
if(element.removeEventListener){
element.removeEventListener(eventType,handlerFunction,false);
}else if(element.detachEvent){
element.detachEvent('on'+eventType,handlerFunction);
}
}
removeEventHandler(myButton,eventType,myFunction);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
