javascript中的绑定与解绑函数应用示例

 更新时间:2013年06月24日 11:07:05   作者:  
本文为大家详细介绍下javascript中绑定与解绑函数在Ie及Mozilla中的应用,感兴趣的各位可以参考下哈,希望对大家有所帮助

Mozilla中:

addEventListener的使用方式:

target.addEventListener(type, listener, useCapture);

target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中:

target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick IE中使用
addEventListener方法 按钮click fox中使用
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
实例:(要注意的是div必须放到js前面才行)

相关文章

  • JavaScript的9种继承实现方式归纳

    JavaScript的9种继承实现方式归纳

    这篇文章主要介绍了JavaScript的9种继承实现方式归纳,本文讲解了原型链继承、原型继承(非原型链)、临时构造器继承、属性拷贝、对象间继承等继承方式,需要的朋友可以参考下
    2015-05-05
  • JavaScript中的prototype使用说明

    JavaScript中的prototype使用说明

    在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
    2010-04-04
  • BootStrap表单验证实例代码

    BootStrap表单验证实例代码

    这篇文章主要介绍了bootstrap表单验证的实例代码,代码中包括引入的js文件,具体实现方法,大家参考本文
    2017-01-01
  • 微信小程序实现tab左右切换效果

    微信小程序实现tab左右切换效果

    这篇文章主要为大家详细介绍了微信小程序实现tab左右切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • echarts展示区域地图添加纹理图片操作指南

    echarts展示区域地图添加纹理图片操作指南

    这篇文章主要给大家介绍了关于echarts展示区域地图添加纹理图片操作的相关资料,ECharts地图组件支持使用图片作为地图区域的填充纹理,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • hammer.js实现图片手势放大效果

    hammer.js实现图片手势放大效果

    这篇文章主要为大家详细介绍了hammer.js实现图片手势放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容),需要的朋友可以参考一下
    2013-05-05
  • JavaScript 对Cookie 操作的封装小结

    JavaScript 对Cookie 操作的封装小结

    通过本篇,您能了解到: 匿名函数 闭包的产生 JavaScript实现private 以及 public 访问权限 document.cookie 的操作
    2009-12-12
  • 动态调整textarea中字体的大小代码

    动态调整textarea中字体的大小代码

    用js批量输出select事件控制textarea中字体的大小的代码。
    2009-12-12
  • js浏览器html5表单验证

    js浏览器html5表单验证

    这篇文章主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论