javascript中attachEvent事件 跟 addEventListener 事件

拷贝自 http://www.jb51.net/article/66111.htm

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

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

obj.onclick=method

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

?


1

2

3

obj.onclick=method1

obj.onclick=method2

obj.onclick=method3

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

?


1

2

3

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

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

method3->method2->method1

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

?


1

2

3

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

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

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

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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!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>

原文地址：https://www.cnblogs.com/a6948076/p/8301579.html

时间： 2024-11-09 03:41:37

javascript中attachEvent事件 跟 addEventListener 事件的相关文章

javascript中的常用表单事件用法

下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="testform" action="#" id="form"> What is your name?<br /> <input type="text" name="fname" /> <in

关于JavaScript中注册和移除事件

为元素注册事件的方式:3个 1. 对象.on+"事件类型名字"=事件处理函数(命名函数或者匿名函数) 例子: document.getElementById("btn").onclick=function(){}; document.getElementById("btn")["on"+"click"]=function(){}; 2. 对象.addEventListener("事件类型名字&qu

javascript中Document对象的常用事件

1.onabort事件:对象载入被中断时触发 2.onblur事件:元素或窗口本身失去焦点时触发. 3.onchange事件:改变<select>元素中的选项或者其他表单元素失去焦点,并且在其获取焦点后内容发生过改变时触发. 4.onclick事件:单机鼠标左键时候触发.当光变的焦点在按钮上,并且按下Enter键时,也会触发该事件. 5.onblclick事件:双击鼠标左键时候触发. 6.onerror事件:出现错误时候触发. 7.onfocus事件:任何元素或者窗口本身获得焦点时触发. 8.

javascript中通过匿名函数进行事件绑定

事件绑定,匿名函数中获取当前元素对象直接this.属性

JavaScript中的表单编程

表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form id="form1" name="form1"></form><script>//方法一:let fm = document.getElementbyId("fm");//方法二:let fm = document.fo

Javascript添加事件的addEventListener()及attachEvent()区别分析

Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含“on”,比如“click”.“mouseover”.“keydown”等. listener :实现了 EventListener 接口或者是 JavaScript 中的函数. useCapture

javascript中的事件委托

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he

javascript中的事件

在javascript中的事件有三个方面的知识,一是事件流,二是事件处理程序,三是事件对象.下面就我个人的一点理解,分别讲述一下这三个方面的内容. 第一.事件流 事件流指的是事件按照一定的顺序触发.它有两个顺序,分别是自上而下和自下而上. 自上而下的叫做事件捕获,事件捕获指的是事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递.在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useC