注册事件处理程序
1、设置HTML标签属性
eg. <button οnclick="alert('Hello World')"></button>
注:客户端编程的通用风格是保持HTML内容和JavaScript行为分离,应避免使用这种方式
2、设置JavaScript对象属性为事件处理程序
eg. var element = document.getElementById('clickElement');
element.onsubmit = function(){ alert('Hello World'); }
3、addEventListener()-----除IE8及以前版本的所有浏览器都支持
接受三个参数:
(1)要注册的事件类型,不包含前缀“on”
(2)当指定类型事件发生时调用的函数
(3)布尔值,默认为false,若传递了true将注册为捕获事件处理程序(一般可忽略)
注:使用removeEventListener()来删除事件,同样有三个参数
eg. var element = document.getElementById('clickElement');
element.addEventListener('click', function(){ alert('add click event'); }, false);
element.removeEventListener('click', function(){ alert('remove click event'); }, false);
4、attachEvent()-----IE8及以前版本使用
因为IE模型不支持事件捕获,所以只接受两个参数
(1)要注册的时间类型,需要含前缀“on”
(2)当指定类型事件发生时调用的函数
注:使用detachEvent()来删除事件
eg. var element = document.getElementById('clickElement');
element.attachEvent('click', function(){ alert('attach click event') });
element.detachEvent('click', function(){ alert('detach click event'); });
下面介绍注册事件和取消事件的2个通用方法:
注册事件
function addEvent(target, type, handler){
if(target.addEventListener)
target.addEventListener(type, handler, false);
else
target.attachEvent("on"+type, function(event){
return handler.call(target, event);
});
}
取消事件
function cancelEvent(event){
var event = event || window.event; // 用于IE
if(event.preventDefault) event.preventDefault(); // 标准技术
if(event.returnValue) event.returnValue = false; // IE
return false; // 处理使用对象属性注册的事件
}