`
piperzero
  • 浏览: 3554811 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

javascript中的绑定与解绑函数

阅读更多


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前面才行)

详细出处参考:http://www.jb51.net/article/18220.htm

分享到:
评论

相关推荐

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

    ### JavaScript中的绑定与解绑函数应用详解 #### 一、引言 JavaScript 是一种广泛应用于网页前端开发的脚本语言,它提供了丰富的功能来处理用户交互事件。在 Web 开发中,经常需要对 DOM 元素绑定事件处理器,或者...

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

    Mozilla中: addEventListener的使用方式: target.... listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById(“te

    ES6中javascript实现函数绑定及类的事件绑定功能详解

    ES6(ECMAScript 2015)引入了许多现代JavaScript语言的新特性,其中包括了对于函数绑定的简化以及在类中的事件绑定方法的改进。函数绑定是一种把函数中的this值固定为特定对象的技术,它减少了在JavaScript中由于...

    javascript 所有函数 代码+目录

    还有事件处理函数,如`addEventListener`和`removeEventListener`,用于绑定和解绑事件监听器。 在异步编程中,JavaScript提供了`setTimeout`和`setInterval`函数进行定时任务,以及`Promise`、`async/await`等用于...

    jQuery事件多次绑定与解绑问题实例分析

    本文将深入探讨jQuery中的事件多次绑定与解绑问题,通过实例分析来展示它们的工作原理和使用技巧。 一、jQuery事件多次绑定 在jQuery中,事件绑定通常使用`.on()`, `.click()`, `.bind()`等方法。当一个元素的同一...

    JavaScript中文帮助文档

    事件处理是JavaScript与用户交互的基础,通过`addEventListener`和`removeEventListener`可以绑定和解绑事件处理器。 AJAX(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下,与服务器交换数据...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    学会绑定和解绑事件、事件冒泡和事件捕获的概念,以及如何使用事件对象,能增强用户体验。 4. **AJAX原理**:Ajax的核心是XMLHttpRequest对象,它允许在后台与服务器进行通信。了解如何创建XMLHttpRequest对象,...

    jquery事件绑定解绑机制源码解析

    在解绑过程中,如果未指定具体的事件处理函数,那么所有与事件类型相关的处理函数都会被解绑。总结JQuery的事件绑定和解绑机制是其强大功能的核心部分。通过深入理解这一机制,我们可以更好地利用JQuery来构建交互...

    javascript事件绑定学习要点

    IE事件处理函数在IE浏览器的事件绑定中使用,与W3C有所不同。它通过attachEvent和detachEvent来绑定和解绑事件。IE事件处理函数支持事件处理函数的自动this绑定,即在事件处理函数中,this默认指向事件源对象,而...

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    本文将详细讲解如何通过JavaScript实现跨浏览器的事件绑定和解绑函数,以便在各种浏览器中保持兼容性。 首先,让我们关注添加事件绑定的过程。在Internet Explorer(IE)中,事件绑定是通过`attachEvent`方法实现的...

    JavaScript中的跨扫瞄器大事操作的基本方法整理_.docx

    本文主要讨论了如何在JavaScript中实现跨浏览器的事件处理,包括事件绑定、解绑、阻止默认行为、获取事件目标对象以及获取滚动条位置和可视窗口大小。 1. **事件绑定**: 在标准的W3C事件模型中,可以使用`...

    javascript函数集锦

    JavaScript的事件处理也很关键,如`addEventListener()`和`removeEventListener()`用于绑定和解绑事件监听器,`event`对象则提供了有关触发事件的信息。 在面向对象编程方面,JavaScript支持原型继承和类式继承。`...

    狂神说系列 JavaScript笔记

    - 事件处理:JavaScript可以监听和响应用户交互,通过addEventListener和removeEventListener来绑定和解绑事件。 - DOM操作:通过DOM API可以查找、添加、删除和修改HTML元素,实现页面动态更新。 6. **异步编程*...

    javascript十个最常用的自定义函数.pdf

    ### JavaScript 十个最常用的自定义函数详解 #### 一、引言 JavaScript 是一种广泛应用于网页开发中的脚本语言,它提供了强大的功能来增强网页的交互性和动态性。随着前端技术的发展,开发者们常常会遇到需要频繁...

    JAVASCRIPT教案及案例

    通过`addEventListener`和`removeEventListener`绑定和解绑事件处理函数。 三、AJAX与异步编程 1. AJAX(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...

    JavaScript5

    5. **事件处理**:JScript5支持DOM(文档对象模型)事件处理,可以通过addEventListener和removeEventListener方法来绑定和解绑事件处理函数。 6. **正则表达式**:JavaScript5提供强大的正则表达式支持,用于字符...

    JavaScript (JS) API 手册

    4. **函数与闭包**: 函数是JavaScript中的第一类对象,可以作为参数传递、作为返回值。闭包是一种特殊的作用域机制,它可以访问并操作外部函数的变量,即使外部函数已经执行完毕。 5. **对象与原型链**: JavaScript...

    Javascript中文帮助手册

    7. **事件处理**:JavaScript可以监听和处理用户或浏览器的事件,如点击、滚动、加载等,通过addEventListener和removeEventListener进行绑定和解绑。 8. **AJAX**:Asynchronous JavaScript and XML,用于异步向...

    javascript权威指南第6版 中英文 附源码(0分资源)

    事件处理是JavaScript与用户交互的重要手段,通过addEventListener和removeEventListener可以绑定和解绑事件处理函数。现代JavaScript还支持事件委托,提高性能和代码可维护性。 最后,源码的提供对于学习和理解...

Global site tag (gtag.js) - Google Analytics