`
gwj41
  • 浏览: 99328 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

绑定事件监听函数

阅读更多

最近一直在看《精通javascript》,很赞的书,顺便做一些小笔记。

今天看到了事件绑定方面的内容,分为传统绑定和W3C的DOM绑定

 

1. 传统绑定如下:

document.getElementById("button").onclick = function(e) {
  // your code
  alert(this.value);
 }

优点:不同浏览器都可以正常使用;可以使用this关键字,引用当前元素。

缺点:只会在事件冒泡时候运行;一个函数一次只能绑定一个事件处理函数,相同的事件处理函数互相覆盖;事件对象仅对非IE浏览器可用。

 

2. DOM绑定:W3C

void addEventListener(String type,
                      Function listener,
                      boolean useCapture);

 支持冒泡(false)捕获(true),this引用当前元素,同一个元素可以绑定多个事件,并且不会覆盖先前绑定的事件。

 不支持IE。

 

3. DOM绑定:IE

void attachEvent(String type, Function listener);

 同一个元素可以绑定多个事件,并且不会覆盖先前绑定的事件。

 仅支持冒泡阶段,this对象指向window对象,而不是当前元素

 根据API,可以在IE下获得当前元素,如下:

 

function init() {
		var btn = document.getElementById("button1");
		if (document.all)
		{
			// IE
			 btn.attachEvent('onclick',function(e) {
                                // Event.srcElement : A reference to the Window, Document, 
                                // or Element object that generated the event.
				alert(e.srcElement.value);
			});
		} else {
			// 非IE
			btn.addEventListener('click',function(e) {
				//alert(this.value);
				alert(e.target.value);
			},false);
		}
	}

<BODY onload="init();">
  <input name="test1" type="button" id="button1" value="click me" />
 </BODY>
 

 

分享到:
评论

相关推荐

    JavaScript绑定大事监听函数的通用方法_.docx

    W3C 绑定方法是使用 addEventListener() 函数来绑定事件监听函数,这是一种更加标准化的绑定方法。 在选择绑定方法时,开发者需要考虑多个因素,例如浏览器兼容性、代码质量和开发效率。不同的绑定方法都有其优缺,...

    JavaScript绑定事件监听函数的通用方法

    事件监听涉及到把一个函数(监听函数)绑定到一个DOM元素上,以便在特定的事件发生时调用该函数。本文将深入探讨JavaScript中事件监听函数的绑定方法,并提供一些在不同浏览器中通用的绑定技术。 首先,事件监听...

    JavaScript实现为事件句柄绑定监听函数的方法分析

    本文实例讲述了JavaScript实现为事件句柄绑定监听函数的方法。分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug。各种浏览器对于事件绑定都...

    JavaScript为事件句柄绑定监听函数实例详解

    本文实例讲述了JavaScript为事件句柄绑定监听函数的方法。分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug。各种浏览器对于事件绑定都提供了...

    PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton

    # PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton 1. 继承 QWidget 定义自定义窗口类; 1. 在窗口中创建三个 QPushButton 并设置水平布局 QHBoxLayout; 2. 将三个按钮分别绑定自定义函数。

    前端大厂最新面试题-event_Model.docx

    事件捕获阶段是指事件从 document 一直向下传播到目标元素,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。 事件处理阶段是指事件到达目标元素,触发目标元素的监听函数。 事件冒泡阶段是指事件从目标...

    JS 事件绑定、事件监听、事件委托详细介绍

    3. 使用addEventListener()绑定事件监听函数:这种方式允许我们在JavaScript代码中添加事件监听器,以增加代码的可读性和可维护性,如下: ```html document.getElementById("btn1").addEventListener("click...

    layui动态绑定事件的方法

    先通过jQuery选取需要添加事件监听的元素,然后使用.on()方法绑定事件。对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件监听设置在静态的父级元素上,从而实现对动态添加元素的事件监听。 在...

    js事件监听机制(事件捕获)总结

    首先,事件监听器可以通过多种方法添加,包括直接在HTML元素上使用内联属性如onclick,或通过JavaScript函数绑定。内联属性方式简单易用,但不推荐用于复杂的项目,因为它将行为与结构混合,不易于维护和管理。而...

    事件绑定、事件监听、事件委托.pdf

    事件绑定是指在网页中添加事件监听器的过程,当特定的用户操作发生时,比如点击、鼠标移动、按键操作等,就会触发事先设置好的函数进行响应。在早期的JavaScript中,我们通常通过在HTML标签上直接使用事件属性来实现...

    jquery 监听 键盘 事件

    在JavaScript的世界里,...总结,jQuery监听键盘事件是提升网页交互体验的重要手段,通过灵活运用`.on()`方法和事件处理函数,可以实现各种复杂的用户交互逻辑。了解并掌握这些技巧,将有助于提升你的前端开发能力。

    如何在Canvas上的图形/图像绑定事件监听的实现

    ### 如何在Canvas上的图形/图像绑定事件监听的实现 #### 概述 在HTML中,我们通常可以轻松地为各种元素(如按钮、输入框等)添加事件监听器来响应用户的交互行为。然而,当涉及到`&lt;canvas&gt;`元素时,情况变得复杂...

    javascrpt绑定事件之匿名函数无法解除绑定问题.docx

    在JavaScript中,事件绑定是一项非常重要的功能,它允许我们通过监听特定的用户交互或其他触发条件来执行相应的代码逻辑。然而,在实践中,有时候我们会遇到一些挑战,比如如何有效地绑定和解除匿名函数作为事件...

    jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    ### jQuery绑定事件监听bind()与移除事件监听unbind()用法详解 #### 1. jQuery事件监听概念 在网页设计中,事件监听是一种常见的需求,主要作用是当用户与网页上的元素发生交互时,能够触发特定的代码执行,响应...

    事件处理函数的this

    在事件处理函数中,this的值通常取决于事件监听器的绑定方式。有以下两种常见的情况: - **内联事件处理**:例如`()"&gt;Click me&lt;/button&gt;`,在这种情况下,this会指向触发事件的DOM元素,即当前按钮。 - **添加事件...

    android 标签绑定事件

    "android 标签绑定事件"这个话题主要涉及如何在界面布局文件中直接为控件(标签)绑定事件监听器,以实现用户交互。这种方式使得代码更加简洁,提高了开发效率,同时也使得布局文件更具有表现力。 在传统的Android...

Global site tag (gtag.js) - Google Analytics