事件处理器高级注册方式

事件处理器高级注册方式

W3C方法:

W3C提供了addEventListener和removeEventListener方法,可以根据需要添加、删除任意数量的事件处理器:

element.addEventListener('click',myfunction,flase);

element.removeEventListener('click',myfunction,flase);

第一个参数指明要捕获的事件,第二个参数指明事件要执行的函数,第三个参数是布尔值,表示当多个嵌套元素捕获同一个事件处理的顺序。一般情况下,第三个参数设置为false。

微软方式:

微软提供两种类似的方法:attachEvent和detachEvent。

element.attachEvent('onclick',myfunction);

element.detachEvent('onclick',myfunction);

这些函数没有第三个参数。而且可以发现微软在事件名称前面使用前缀on,所以onclick时间对弈W3C规范里的click,对应微软浏览器里面的onclick。

捕获:外部的元素首先运行事件处理器,然后是嵌套的元素,逐渐向内层深入。

冒泡:最内部的事件处理器先执行,由内向外逐渐执行。

跨浏览器的实现:

function addEventHandler(element,eventType,handlerFunction){

if (element.addEventListener){

element.addEventListener(eventType,handlerFunction,false);

}else if (element.attachEvent){

element.attachEvent("on"+eventType,handlerFunction);

}

}

var eventType ="click";

var myButton = document.getElementById("");

addEventHandler(myButton,eventType,myFunction);

去除时间处理器的跨平台方式:

function removeEventHandler(element,eventType,handlerFunction){

if(element.removeEventListener){

element.removeEventListener(eventType,handlerFunction,false);

} else if(element.detachEvent){

element.detacheEvent("on"+eventType,handlerFunction);

}

}

removeEventHandler(myButton,eventType,myFunction);

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫