`
jackeysion
  • 浏览: 129279 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

JS添加事件处理函数

阅读更多
作为一种事件驱动的编程语言,Js的程序很少主动执行,一般都是由一些事件触发,像click,dblclick,keypress,mousemove等事件,然后执行一段脚本。给一个事件指派一个处理函数,一般称做:注册事件处理函数。

    比如页面上有一个p元素:
       <p id=’lethe’>测试一下</p>
    我们用
        x = document.getElementById(’lethe’)
    得到了这个结点。现在尝试给它添加一个鼠标点击的事件,当鼠标点击的时候,弹出一句话:
       “测试成功!”
    事件处理函数很简单:function beLessForgetfull(){ alert(”测试成功”) }

    很遗憾的是,不同的浏览器添加事件处理函数的方法不太一样。主要有三种:
    传统方式,把事件处理函数做为DOM元素的一个属性,像onclick,onmouseover等。现代浏览器一般会兼容这种写法。
       x.onclick = beLessForgetfull;
    传统方式的缺点是,不能给一个元素的一种事件定义两个事件处理函数,因为后面添加的函数会覆盖前面的。

高级方法:
    IE系列的:attachEvent(eventType, handler)
       x.attachEvent(’onclick’, beLessForgetfull);
    W3CDOM定义的:addEventListener(eventType, handler, capture),多了一个capture参数,是boolean类型的。如果是false,表示事件冒泡。如果为true则表示事件捕捉。IE只支持冒泡,所以通常都是false。
       x.addEventListener(’click’, beLessForgetfull, false);
    优点就是,可以给一个元素一种事件注册多个处理函数。

添加了事件处理函数,如果在不用的时候,自然应该可以移除。
传统方式注册的处理函数,要移除就非常简单了。
    el.onclick = null;   // 移除click处理函数。

高级方法注册了的事件处理函数,要用detachEvent或removeEventListener来移除。参数和attachEvent或addEventListener一样。
    x.detachEvent(’onclick’, beLessForgetfull);

    x.removeEventListener(’click’, beLessForgetfull);
但是如果要移除所有的事件处理函数,因为没有一个方法可以找到所有注册在一个元素上的事件处理函数,所以需要写程序的人自己去记住这些函数,然后一个一个地去除。

IE的attachEvent还有一个问题是,事件处理函数是全局的。就是说,在事件处理函数里,this是等于window的。
要解决这一点并不太难。这是例子:
 function addEventSimple(evt, el, handler){
     if(el.addEventListener){
         el.addEventListener(evt, handler, false);
     }else if(el.attachEvent){
         el.attachEvent(’on’+evt, function(){
             return handler.call(el, window.event);
         });
     }else{
        //var oldHandler = el['on'+evt] || function(){};
      el['on'+evt] = handler;
    }
}

用到了函数对象的call方法,这个方法和apply方法,都是可以指定函数里的this对象的,它们的差别只在于参数传递方式的不一样。
上面的例子的最后的else部分,还没有写完。原先是想让只支持传统方式的浏览器也可以注册多个事件处理函数。

不过,对于这个addEventSimple,如果要再写一个移除事件处理函数的,就是removeEventComplex,如果只是复杂还好,似乎还是不可能的。在jQuery,似乎是用了一个$Event对象在管理所有的事件注册和移除

分享到:
评论

相关推荐

    事件处理函数的this

    在JavaScript编程中,"事件处理函数的this"是一个至关重要的概念,它涉及到对象、上下文以及函数调用方式的理解。事件处理函数通常是指那些在用户交互或者特定事件触发时执行的函数,例如点击按钮、页面加载等。在...

    JavaScript程序设计——事件处理实验报告.docx

    - **JavaScript事件注册**:通过`addEventListener`或`attachEvent`(IE浏览器)为元素添加事件监听器,也可以使用HTML属性直接绑定事件处理函数,如`onclick="functionName()"`。 - **事件处理函数**:定义函数来...

    LCalendar最新版 移动端时间控件添加回调函数

    最新版的LCalendar引入了一个重要的功能更新,即添加了回调函数的支持,这使得开发者能够更灵活地处理用户交互事件,特别是当用户点击确定按钮之后的行为。 在描述中提到,CSS文件保持原样,意味着界面样式没有发生...

    实例讲解javascript注册事件处理函数

    这种方式允许为同一元素添加多个事件处理函数,解决了前面两种方式的局限。然而,需要注意的是,IE浏览器使用`attachEvent`和`detachEvent`,语法有所不同,这可能导致跨浏览器的兼容性问题。 每种方式都有其适用...

    javascript动态添加事件.pdf

    这种方法简单直观,但不支持同时添加多个事件处理函数。 4. **兼容性处理**: - 当需要跨浏览器兼容时,可以使用条件判断语句来决定使用哪种方法。例如: ```javascript if (window.attachEvent) { // IE 的...

    js 事件处理函数间的Event物件是否全等

    在测试中,可以通过在一个事件处理函数中添加属性到Event对象,然后在另一个处理函数中检查这个属性的存在来验证Event对象是否全等。如果事件处理函数是按照绑定顺序先后执行的,并且Event对象是全等的,那么在后面...

    利用eval()函数给树节点统一添加单击事件实现新建选项卡功能

    这篇博客“利用eval()函数给树节点统一添加单击事件实现新建选项卡功能”探讨了一个具体的JavaScript编程技巧,如何通过eval()函数来处理用户交互,特别是针对树形结构数据的点击事件,进而实现新的选项卡功能。...

    javascript 添加和移除函数的通用方法

    文章最后通过一个例子展示了如何使用addEvent函数来为window对象的load事件添加处理函数。首先定义了要添加的函数fn,然后使用addLoadEvent函数将fn作为load事件的处理函数添加到window对象上。 以上就是关于如何在...

    js代码-this的指向(模拟7):DOM事件处理函数的形式

    在JavaScript编程中,`this`关键字是一个非常...通过`addEventListener`添加的事件处理函数,`this`通常会指向事件发生时的元素。了解`this`的其他用法和行为,将使我们更好地利用JavaScript进行事件处理和对象交互。

    js生成动态表格并为每个单元格添加单击事件的方法

    本文所探讨的方法主要涉及使用JavaScript动态创建表格,并为表格中的每一个单元格添加点击事件处理函数,实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...

    把多个JavaScript函数绑定到onload事件处理函数上的方法

    这个函数接受一个参数,即需要在页面加载完成后执行的函数名,并确保这个函数被正确地添加到`window.onload`事件处理函数中,即使已经有其他函数在那里注册过。 `addLoadEvent`的工作原理如下: 1. 获取当前`...

    js事件模型

    另一种解决方案是使用自定义事件处理函数,将旧的事件处理函数保存并调用,同时确保新添加的函数能够正确执行。这通常通过在对象的内部属性中存储事件处理函数来实现。然而,删除事件处理函数时需要注意,直接将事件...

    JavaScript的一些工具函数的封装包括url的参数处理数字字符串日期等相关操作函数

    甚至可能包括一些性能优化的技巧,如防抖(debounce)和节流(throttle)函数,用于优化事件处理函数的执行。 总之,"js_utils-master"提供的工具函数集是JavaScript开发者的宝贵资源,它通过封装常用功能,降低了...

    JS中的 函数、事件和对象

    1. **内联事件处理程序**:在HTML标签中直接指定事件处理函数。 ```html ('Clicked!')"&gt;Click me ``` 2. **DOM属性事件处理程序**: ```javascript document.getElementById('myButton').onclick = function()...

    JS中关于事件处理函数名后面是否带括号的问题

    在本文中,我们会深入探讨事件处理函数名后面是否带括号的问题,这实际上关系到了函数的调用时机和方式。 首先,要明白JavaScript中存在两种主要的事件处理模型:DOM Level 0 和 DOM Level 2。这两种模型在绑定事件...

    常用的JS 特效 函数

    这个主题“常用的JS特效函数”涵盖了多个方面,包括动画、事件处理、DOM操作等,下面将详细介绍这些知识点。 一、动画效果 JavaScript可以通过改变CSS属性实现动画效果。例如,`setTimeout`和`setInterval`函数可以...

    详解js的事件处理函数和动态创建html标记方法

    首先,事件处理函数是JavaScript的核心组成部分,它允许我们在用户与页面交互时执行特定的代码。而动态创建HTML标记则是一种在脚本运行时向文档中添加、修改或删除元素的技术。接下来,我们详细讨论这两种技术的核心...

    javascript绘图函数库

    在提供的文件“wz_jsgraphics.js”中,很可能就包含了一系列这样的函数,用于处理常见的绘图操作。这些函数可能包括但不限于以下几种: 1. **画线(lineTo)**:绘制直线,从当前绘图位置到指定的终点。 2. **填充...

    javaScript对象模型与事件处理借鉴.pdf

    JavaScript 事件处理可以通过添加事件监听函数来实现。事件监听函数是指在事件发生时执行的函数。JavaScript 提供了多种方式来添加事件监听函数,例如使用 addEventListener() 方法、使用 onclick 等属性等。 在 ...

Global site tag (gtag.js) - Google Analytics