window.onload事件--attachEvent和addEventListener以及document.all用法
&document.all是页面内所有元素的一个集合。例如： &
&document.all(0)表示页面内第一个元素
document.all可以判断浏览器是否是IE&&
& if(document.all){
& & alert("is &
if (document.all){
window.attachEvent('onload',函数);&&&&&&&&&
window.addEventListener('load',
函数,false);&&&&&&&&&&
// firefox
以前写 JavaScript 脚本时，事件都是采用&
object.event =&
的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera
来说很通用。但是有一个问题就是，这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。&
但 是 Internet Explorer 从 5.0 开始提供了一个 attachEvent
方法，使用这个方法，就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是
Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法，这个方法跟
attachEvent 差不多，也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别，在 attachEvent
方法中，事件是以 “on” 开头的，而在 addEventListener 中，事件没有开头的 “on”，另外
addEventListener 还有第三个参数，一般这个参数指定为 false
就可以了。&
因此要想在你的程序中给一个事件指派多个处理过程的话，只要首先判断一下浏览器，然后根据不同的浏览器，选择使用
attachEvent 还是 addEventListener 就可以了。实例如下：
&&&&&&&&&&&
if (window.attachEvent) {&&
&&&&&&&&&&&&&&&
window.attachEvent("onload",
remove);&&
&&&&&&&&&&&
} else if (window.addEventListener)
&&&&&&&&&&&&&&&
window.addEventListener("load", remove,
false);&&&&
&&&&&&&&&&&
}&&&&&&&&&&&&&&
&&&&&&&&&&&
function remove()
&&&&&&&&&&&&&&&
document.getElementByIdx_x_x_x("divprogressbar");&&
&&&&&&&&&&&&&&&
document.body.removeChild(div);&&
&&&&&&&&&&&
注意：attachEvent 所指派的多个过程的执行顺序是随机的，所以这几个过程之间不要有顺序依赖。另外 attachEvent 和
addEventListener 不仅仅适用于&window&对象，其他的一些对象也支持该方法。
可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body
中，也可以全放到window.onload中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window.attachEvent和
window.addEventListener来解决一下。
下面是一个解决方法。至于attachEvent和addEventListener的用法，可以自己Google或百度一下。
if&(document.all){
window.attachEvent('onload',函数名)//IE中
window.addEventListener('load',函数名,false);//firefox
在近来的工作中，用到了attachEvent方法，该方法可以为某一事件附加其它的处理事件，有时候可能比较有用，这里将其基本用法总结一下。
其语法可以查看《DHTML手册》，里面有详细的说明，这里贴一个例子，该例子来自互联网：
document.getElementByIdx_x_x_x("btn").onclick = method1;
document.getElementByIdx_x_x_x("btn").onclick = method2;
document.getElementByIdx_x_x_x("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行 &&
写成这样： &&
var&btn1Obj =
document.getElementByIdx_x_x_x("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.getElementByIdx_x_x_x("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1-&method2-&method3&&
attachEvent和addEventListener详解
话说多了，还是看这个两个同效果，不同根同源的属性吧！程序员真命苦！！还好今天让你看了这篇文章，让你明白其实写这篇文章的我也很命苦，这样你就知道同甘共苦也蛮好了！！
attachEvent和addEventListener详解，开始了！
先介绍 attachEvent：
attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且attachEvent支持为某个元素绑定多个事件．执行顺序是，后绑定的先执行．
那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分离式开发技术．也就是说你在网页内看不到一句JavaScript语句，却在该页中使用了大量JavaScript技术．这就是高手们所谓的分离式开发技术．让前端的显示和程序逻辑分离开来．
如果想删除事件请使用detachEvent
attachEvent方法只支持IE浏览器．与其功能相同的指令是addEventListener,该指令支持FF等浏览器，并且是W3C标准
具体请参看下面实例．
语法：Element.attachEvent(Etype,EventName)
返回值：[tag:return_value /]
参数Element:要为该元素动态添加一个事件．
Etype:指定事件类型．比如：onclick,onkeyup,onmousemove等．．
EventName:指定事件名称．也就是你写好的函数．
attachEvent实例
注意该按扭没有任何事件
点击该按扭为上面的按扭添加一个事件．
重点提示:你可以尝试多次点击绑定事件，最上面的那个按扭就会绑定多个事件．比如你点击三次绑定．你再点击最上面的按扭，他就会执行三次弹出框．这就是我说的attachEvent方法支持为某个元素绑定多个事件．当然在实际开发中，你可以根据实际情况，来为他绑定多个不同的事件！
接下来：addEventListener
addEventListener方法与attachEvent方法功能相同．但是addEventListener是W3C标准，而attachEvent非W3C标准，且只支持IE浏览器．
虽然addEventListener属于标准方法，但依然无法在IE下运行．IE不支持该方法．
addEventListener带有三个参数．必须设置．缺一不可．
addEventListener可以为网页内某个元素动态绑定一个事件．事件类型可随意指定．如:click,mousemove,keyup等．
通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用addEventListener则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且addEventListener支持为某个元素绑定多个事件．执行顺序是，先绑定的先执行．
那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分离式开发技术．也就是说你在网页内看不到一句JavaScript语句，却在该页中使用了大量JavaScript技术．这就是高手们所谓的分离式开发技术．让前端的显示和程序逻辑分离开来．
如果想删除事件请使用removeEventListener
经过我测试该方法支持FireFox(火狐浏览器)．不支持IE,具体请参看下面实例．
语法：Element.addEventListener(Etype,EventName,boole)返回值：[tag:return_value
参数Element:要为该元素绑定一个事件．可以是任意的html元素．
Etype:事件类型.比如：click,keyup,mousemove.注意使用addEventListener绑定事件时，设置参数事件类型时不必写on．否则会出错．
EventName:要绑定事件的名称．也就是你写好的函数．
boole:该参数是一个布尔值：false或true必须填写．false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能．
addEventListener实例
注意执行网页时该按扭并没有事件
点击该按扭为上面的按扭绑定事件
注意该实例必须在FireFox(火狐浏览器下运行).你可以根据实际情况，来为他绑定多个不同的事件！addEventListener与/jiang_yy_jiang"&attachevent&不一样的是，该方法不可以把同一事件绑定多次，但支持把不同的事件绑定到一个元素．请使用非IE浏览器测试该例。
请注意说明哈！那个很重要，开发人员要注意细节！
看了上面的你在想，这两个方法浏览器不兼容，咋办，当然！老办法咯！！先判断是IE还是火狐嘛，这个简单看下面代码：
看看效果吧：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。js的事件监听机制
一、监听机制的来源
为什么要采用事件监听而不是直接对元素的事件属性（如：onclick、onmouseover）赋值？
原来用事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了
而添加事件监听就可以并行。特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。使用事件属性则很容易造成事件覆盖掉。
二、监听机制的使用方法
添加事件监听的两种方法：attachEvent和addEventListener
三、attachEvent和addEventListener的区别
1.适应的浏览器版本不同
attachEvent方法，
（ie系列）
addEventListener方法
& & Mozilla系列
2.同时在使用的过程中要注意事件不一样的地方
attachEvent方法 &按钮onclick
addEventListener方法 按钮click
3.两者使用的原理：执行事件的优先级不一样
下面实例讲解如下：
btn1Obj = document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_xx_x(“btn1&P);
//object.attachEvent(event,function);
btn1Obj.attachEvent(“onclick”,method1);
btn1Obj.attachEvent(“onclick”,method2);
btn1Obj.attachEvent(“onclick”,method3);执行顺序为method3-&method2-&method1
addEventListener var btn1Obj =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_xx_x(“btn1&P);
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);执行顺序为method1-&method2-&method3
4.删除事件的方法不一样
detachEvent(‘onclick’,func);//ie下使用删除事件func&
removeEventListener(‘click’,func);//Mozilla下，删除事件func&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。addEventListener添加事件与普通添加事件有区别吗？拜托了各位 谢谢_百度知道
addEventListener添加事件与普通添加事件有区别吗？拜托了各位 谢谢
dEventListener添加事件与普通添加事件有区别吗？test还有一种方法就是直接在a标签里面实用onclick来触发函数的方法，这三种绑定事件的方法有什么区别吗？区别都在哪里？求高手解答，本人新手
提问者采纳
在标签中直接用onclick绑定事件，相当于对象的引用，也就如果有多个标签绑定此事件函数，其实公用同一个函数对象，在此函数中用this关键字，总是指向的是此函数定义时所属的对象，而不是此标签对象，而在js中写代码绑定事件，相当于复制一份此事件函数当做此标签对象的属性，所以在函数中用this关键字，指向的是此标签对象本身。
提问者评价
其他类似问题
为您推荐：
其他3条回答
addEventListener不适用于ie，要用attachEvent代替addEventListener和attachEvent 又有事件源的兼容问题仔细研究吧........
查看原帖&&
在标签中直接用onclick绑定事件，相当于对象的引用，也就如果有多个标签绑定此事件函数，其实公用同一个函数对象，在此函数中用this关键字，总是指向的是此函数定义时所属的对象，而不是此标签对象，而在js中写代码绑定事件，相当于复制一份此事件函数当做此标签对象的属性，所以在函数中用this关键字，指向的是此标签对象本身。
查看原帖&&
【龙华】小田() 10:43:47addEventListener方式添加事件可以添加多个
查看原帖&&
addeventlistener的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁本站不兼容 8 以前的版本的 Interner Explorer 浏览器（或基于这些版本的 IE 的其他浏览器），并且页面样式不完全兼容 IE 8，我们建议你升级至 IE 9 或改用其他非 IE 浏览器
GM脚本学习经验小结之如何让addEventListener调用含参函数
本帖最后由 congxz6688 于
08:08 编辑
这些天，在学习写GM脚本，感触良多，总结了一些心得，其中印象最深刻的，莫过于为新建元素添加事件监听了。
由于GM的运行是在一个单独的空间内，此空间在页面载入后才实现。所以，GM所定义的函数，与页面头部&head&&/head&内所定义的函数并不相同，不能被页面元素所调用。
而使用createElement()＋appendChild()创建的元素，在创建动作完成后，也属于页面元素，不能直接调用GM自定义函数。如果直接使用元素的onclick属性或setAttribute(&onclick&,XXX)尝试调用，会在事件触发时得到一个undefined。
这时，需要使用addEventListener，才能调用自定义函数。
然而，addEventListener所调用函数，不能带参数，否则在元素创建时，它所调用函数就要被执行，而不是等待事件触发才执行。这个比较崩溃。
但有时候，某些参数一定要传递，怎么办呢？
我目前找到两种方法解决这个问题：
一、用setAttribute()为元素增添属性，把要传递的参数赋给属性值；然后在所调用函数中加事件参数，如下：deleteTaskk = document.createElement(&a&);
ii=&3&;
color=&red&
deleteTaskk.setAttribute(&moto&, ii);
deleteTaskk.setAttribute(&color&, color);
deleteTaskk.addEventListener(&click&, deleteTaskCookie, false);
document.appendChild(deleteTaskk);
function deleteTaskCookie(e){//e是事件对象，使用e.target既定义对象，又可以得到触发本事件的元素。
mycase=e.target
ii=mycase.getAttribute(&moto&);
color=mycase.getAttribute(&color&);
.....................
}复制代码这样，参数得到传递。
二、直接让addEventListener调用带参数的函数，然后在所调用函数中返回匿名函数。如下：deleteTaskk = document.createElement(&a&);
ii=&3&;
color=&red&
deleteTaskk.addEventListener(&click&, deleteTaskCookie(ii,color), false);
document.appendChild(deleteTaskk);
function deleteTaskCookie(i,colo){
&&return function(){
XXXXX(i)
XXXXXX(colo)
.....................
&&}
}复制代码这样参数也可以使用。
比较崩溃的是，这两种方法在我这里都有使用，都有成功，但有时就不成功。比如这里：
使用第一种方法就不行，结果又搜到第二种方法，才最终解决。
希望我的这点经验能对大家有所帮助。
请大家帮忙，把本站加入ABP白名单
本帖最后由 CrendKing 于
11:21 编辑
congxz6688
第一种我也不能用。第二种最直接，但要改函数的声明，可能不太利于接口化。
]1# congxz6688
第一种我也不能用。第二种最直接，但要改函数的声明，可能不太利于接口化。
CrendKing 发表于
08:19 嗯，我现在把这样的函数都设为子函数，不供全局调用。
请大家帮忙，把本站加入ABP白名单
收藏了,以后写的时候用得着
觉得gm脚本总是在页面载入后才载入,这样效率不是很高
很多功能只能等页面载完了才能用
本帖最后由 tomchen1989 于
18:55 编辑
这里我在Function的prototype中添加了一个方法，而用不着修改原函数，欢迎大家使用此方法，具体见下：
在脚本前加上：Function.prototype.returnMe = function() {
& && &&&var me =
& && &&&var args = arguments.length==1 ? [arguments[0]] : Array.apply([], arguments);
& && &&&return function(e) {
& && && && && & var evt = e || window.//W3C与IE兼容
& && && && && & args.push(evt);
& && && && && & me.apply(this, args);
& && &&&}
};复制代码描述：在Function的prototype中添加一个新函数方法returnMe。运行func.returnMe方法时，会返回一个[以func.returnMe的参数和事件对象为参数][执行原函数func]的匿名函数。
用于：绑定事件函数，并传递自定义参数及事件对象参数。
注意：使用形如ele.addEventListener(&click&, func.returnMe(a,b), false);等等，与使用形如ele.addEventListener(&click&, func, false);等等相比：
1、func中的this不变（.onclick和.addEventListener指向被绑定事件的元素ele，.attachEvent指向全局对象(window)）；
2、不但能传递事件对象参数，还可以传递自定义参数：func的参数之中，前面的是自定义传递的参数，最后一个参数是事件对象evt（可选参数）。
浏览器：Firefox等W3C DOM与IE均兼容。
用法举例：
HTML：&input type=&button& id=&mybutton& value=&demo& /&复制代码Javascript：var ele = document.getElementById(&mybutton&);
function func(a,b,evt) {
& & alert(a+b);//提示两参数之和（本例中为5）
& & alert(this.value);//提示this指向目标的value（本例中除了.attachEvent指向全局对象会提示&undefined&外，其他均提示&demo&）
& & var tar = evt.target || evt.srcE//找到事件触发目标，W3C与IE兼容（本例中找到的目标元素是ele）
& & alert(tar.type);//提示目标元素的type（本例中为&button&）
& & alert(evt.clientX)//提示事件触发时鼠标指针的水平坐标
& & //对a、b、evt、this进行任意操作。。。。。。
}
if (document.addEventListener) {//Firefox等W3C DOM
& & ele.addEventListener(&click&, func.returnMe(1,2), false);
} else if (document.attachEvent) {//IE
& & ele.attachEvent(&onclick&, func.returnMe(1,2));
}复制代码另：传统绑定方式（GM脚本可能不行）：ele.onclick = func.returnMe(1,2);复制代码
好方法呀，学习了！
请问，是不是可以这样理解呢：
Function.prototype.returnMe为所有函数增加了一个新方法，使用此方法不仅可以直接调用含参函数，还可以使用.target得到触发事件的元素（可选）。
请大家帮忙，把本站加入ABP白名单
求助：我在&&深入浅出 Greasemonkey&&教程中看到过如下例子：
window.helloworld = function() {
& & alert('Hello world!');
window.setTimeout(&helloworld()&, 60);
这里通过把函数定义为全局的，来达到目的。但现在我在GM0.8版本上不能成功，请问还有什么办法来达到上述代码的功能？
应该是window.helloworld = function() {
& & & & alert('Hello world!');
}
window.setTimeout(helloworld, 60);复制代码或者window.setTimeout(function(){
& & & & alert('Hello world!');
}, 60);复制代码
本帖最后由 tomchen1989 于
15:43 编辑 Function.prototype.returnMe为所有函数增加了一个新方法congxz6688 发表于
05:45 这个关于prototype的，我觉得大概可以这样理解，但如果抠字眼的话不完全这样。应该说是在Function的原型prototype上增加了一个新方法，使用func.returnMe()时候，他会从Function的原型prototype中继承这个方法。而不是为所有函数一个一个增加的新方法
=====使用此方法不仅可以直接调用含参函数，还可以使用.target得到触发事件的元素（可选）。
congxz6688 发表于
05:45 这个可以这样说，但是，还可以使用的不限于event.target以得到事件对象的目标，而是整个event事件对象都可以使用。比如现在我又加了一例，event.clientX，返回事件触发时鼠标指针的水平坐标
另外，原来我写错了一个地方，现在改了。var tar = evt.target || evt.srcE，这个像你说的那样，是找到事件发生目标，而不是被绑定目标。
还有一个办法element.addEventListener('click', function(){func(1,2)}, false);
document.body.appendChild(element);
function func(a,b){
& & & & alert(a+b);
}复制代码简单讲就是给需要调用的函数外面再套一个匿名函数就可以了。
本帖最后由 tomchen1989 于
19:00 编辑
区别在于：
第一种，在定义被绑函数时，定义的就是内含需执行函数的匿名函数
这样能在绑定时把参数附上去
比如：var ele = document.getElementById(&mybutton&);
function func(q) {
& & alert(q);
}
var a = 1;
ele.addEventListener(&click&, function(){
& & func(a);
}, false);
a = 2;复制代码这样点击id为&mybutton&的按钮会显示1
我前面写的那个returnMe方法也属于第一种
第二种，在绑定时，绑定的是内含需执行函数的匿名函数。
这样绑定时没有把参数附上去，click时才把参数附上去
比如：var ele = document.getElementById(&mybutton&);
function func(q) {
& & alert(q);
}
var a = 1;
ele.addEventListener(&click&, function(){
& & func(a);
}, false);
a = 2;复制代码这样点击id为&mybutton&的按钮会显示2
所以视情况而定了，但一般似乎还是第一种需要的多。
比如想用for循环来绑定一组元素的click事件，并传递序号为其参数，只能这样：var eles = document.getElementByTagsName(&input&);
for (var i=0; i&eles. i++) {
& & eles.addEventListener(&click&, func(i), false);
}复制代码并在定义func时return匿名函数。这里，如果用ele.addEventListener(&click&, function(){func(i)}, false);的话，那传的参数统统是eles.length，也就是i最终被指定的值。
换句话就是说，第二种方法绑定的func，是异步地在click时、脱离了所在的上下文(context)在全局对象下运行的（func内的this关键字不指向被绑元素，而是指向全局对象window。想使用被绑元素，必须在绑定时传递一个this参数，或修复上下文），所以有时候可能会达不到我们的要求
不过第二种方法也可以通过闭包来实现和第一种方法相同的效果，同步地传递参数，并修复上下文，但可能麻烦点，例如上面的那个例子修改一下：var a = 1;
(function(j){
& && &&&ele.addEventListener(&click&, function(){
& && && && && & func.call(this,j);
& && &&&}, false);
})(a);
a = 2;复制代码最后，要说规范的话，最规范的应该还是不带参数（不过它自己会传递一个event对象参数）、不带括号仅函数名的ele.addEventListener(&click&, func, false);
上述的第二种方法也算规范，但需要同步传参并修复上下文的话显然比较麻烦；
第一种方法可以认为不大规范，因为在绑定时func()就被执行了，但这种方法方便于阅读维护
<td class="t_msgfont" id="postmessage_楼的returnMe方法稍微修改了一下。
另外这个仅针对W3C(Firefox等)的：Function.prototype.returnMe = function() {
& && &&&var me =
& && &&&var args = arguments.length==1 ? [arguments[0]] : Array.apply([], arguments);
& && &&&return function(evt) {
& && && && && & args.push(evt);
& && && && && & me.apply(this, args);
& && &&&}
};复制代码仅针对W3C(Firefox等)，且不加入事件对象参数的。Function.prototype.returnMe = function() {
& && &&&var me =
& && &&&var args =
& && &&&return function() {
& && && && && & me.apply(this, args);
& && &&&}
};复制代码另外11楼所说第二种方法当然也可以变得达到要求，详见11楼我修改后的内容}