javascript中attachEvent用法实例分析

本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下:

一般我们在JS中添加事件,是这样子的

obj.onclick=method

这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

obj.onclick=method1
obj.onclick=method2
obj.onclick=method3

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-05-12

javascript Event对象详解及使用示例

Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. [event属性]: altKey, button, cancelBubble, clientX, clien

Node.js事件循环(Event Loop)和线程池详解

Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件

node.js中的events.emitter.once方法使用说明

方法说明: 为指定事件注册一个 单次 监听器,所以监听器至多只会触发一次,触发后立即解除该监听器. 语法: 复制代码 代码如下: emitter.once(event, listener) 接收参数: event            (string)             事件类型 listener         (function)         触发事件时的回调函数 例子: 复制代码 代码如下: server.once('connection', function (stream)

js中的preventDefault与stopPropagation详解

首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情.看一段代码大家就

JS和JQ的event对象区别分析

代码测试: 复制代码 代码如下: <div id="test"><p>test text<p></div> <script src="vendor/jquery-2.1.1.js"></script> <script> test.addEventListener('click', function(e){console.log(e);}, false), $('#test').on(

js event事件的传递与冒泡处理

复制代码 代码如下: <div> <table nclick="gotClick(event,'table',this)" id="table"> <tr nclick="gotClick(event,'tr',this)" id="tr"> <td nclick="gotClick(event,'td',this)" id="td"> &

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

我们先看一个简单的例子: 复制代码 代码如下: <input type="text" onblur="alert(this.value)"/>完全没有问题. 那么什么情况下不可以用? fuction method() { alert(this.value); } <input type="text" onblur="method()"/> 这个就不可以,因为method()是被响应函数调用的函数. 那么

Javascript Event(事件)的传播与冒泡

特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome.safari.opera.firefox都支持cancelBubble属性. Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能

Nodejs实战心得之eventproxy模块控制并发

目标 建立一个 lesson4 项目,在其中编写代码. 代码的入口是 app.js,当调用 node app.js 时,它会输出 CNode(https://cnodejs.org/ ) 社区首页的所有主题的标题,链接和第一条评论,以 json 的格式. 输出示例: [ { "title": "[公告]发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24

JavaScript运行机制之事件循环(Event Loop)详解

一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

JavaScript使用addEventListener添加事件监听用法实例

本文实例讲述了JavaScript使用addEventListener添加事件监听用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <title>This text is the title of the document</title> <script> function showalert(){ alert('you clicked

Node.js net模块功能及事件监听用法分析

本文实例讲述了Node.js net模块功能及事件监听用法.分享给大家供大家参考,具体如下: net模块 对比C语言的网络编程,Node.js有更加简便的开发模式与模块提供.它就是net模块 在需要使用的时候只需要require("net")就可以引入模块了. var net = require("net"); 服务端编程 引入模块的前提下: 1. 创建一个新的TCP或IPC服务 var server = net.createServer(function(clie

Android开发之button事件监听简单实例

本文实例讲述了Android开发之button事件监听用法.分享给大家供大家参考.具体如下: 事件监听的listener,有以下几种方式: 1.声明一个普通的class,实现OnClickListener接口,然后在button的setOnClickListener中new该类的一个对象. 2.使用匿名内部类,直接 btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { S

微信小程序实现拖拽 image 触摸事件监听的实例

微信小程序实现拖拽 image 触摸事件监听的实例 需要做个浮在scroll-view之上的button.尝试了一下. 实现效果图: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml <image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style=&qu

SpringMVC事件监听ApplicationListener实例解析

这篇文章主要介绍了SpringMVC事件监听ApplicationListener实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 实现 ApplicationListener<T> 接口(T为监听类型,稍后会列出具体可监听事件) 2. 将该自定义监听类,注册为Spring容器组件.(即将该类注入Spring容器) 实例: 该类监听ServletRequestHandledEvent事件,该事件为请求结束回调事件,即一个请求完成结

Java添加事件监听的四种方法代码实例

Java添加事件的几种方式(转载了codebrother的文章,做了稍微的改动): /** * Java事件监听处理--自身类实现ActionListener接口,作为事件监听器 * * @author codebrother */ class EventListener1 extends JFrame implements ActionListener { private JButton btBlue, btDialog; public EventListener1() { setTitle(

Javascript添加监听与删除监听用法详解

本文实例讲述了Javascript添加监听与删除监听的用法.分享给大家供大家参考.具体分析如下: js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习. 在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦,删不掉,后来看了一下才发现,参数需要完全对应,什么叫完全对应呢,换句话说: 复制代码 代码如下: $('.video')[0].

JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

JavaScript事件监听完整实例(含注释) var oEventUtil = new Object(); oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler) { //IE和FF的兼容性处理 //如果是FF if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } //如果是IE else if(o

详谈Java中的事件监听机制

鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动作发生在哪个组件上,那么该组件就是事件源对象 2.事件监听方法: addMouseListener(MouseListener ml) ;该方法主要用来捕获鼠标的释放,按下,点击,进入和离开的动作:捕获到相应的动作后,交由事件处理类(实现MouseListener接口)进行处理. addAction

javascript事件监听与事件委托实例详解

本文实例讲述了javascript事件监听与事件委托.分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id=&qu