JS动态添加事件

标签: js 事件 | 发表时间:2013-11-01 09:02 | 作者:SDDCCCC
出处:http://blog.csdn.net
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
但是IE不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、 事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。

方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent,object.attachEvent(event,function),例如:
obj.attachEvent("onclick", Foo);
function Foo()
{
    alert("测试");
}
或者写成 obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener,element.addEventListener(type,listener,useCapture,
obj.addEventListener("click", Foo, false);
function Foo()
{
    alert("测试");
}
同样也可写在一起obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
考虑兼容性:
if (window.attachEvent)//兼容IE
{
    //IE 的事件代码
}
else
{
    //其它浏览器的事件代码
}

上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数:

版本一:

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}

HTML5工作组的版本:
var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){
if(el.length){
for(var i=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}else{
el.addEventListener(type,fn,false);
}
};
}else{
return function(el,type,fn){
if(el.length){
for(var i=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}else{
el.attachEvent(‘on‘+type,function(){
return fn.call(el,window.event);
});
}
};
}
})();

方法三、事件 = 函数

例:obj.onclick = Foo;
这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
1 obj.onclick=method1;
2 obj.onclick=method2;
3 obj.onclick=method3;

如果这样写,那么只有 最后绑定的事件,这里是method3会被执行,此时应该用方法二的方法进行事件的绑定



区别IE6、IE7、IE8之间的方法:

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if (isIE){
  if (isIE6){
    alert(”ie6″);
  }else if (isIE8){
    alert(”ie8″);
  }else if (isIE7){
    alert(”ie7″);
  }
}



作者:SDDCCCC 发表于2013-11-1 1:02:20 原文链接
阅读:0 评论:0 查看评论

相关 [js 事件] 推荐:

js中的事件委托

- - JavaScript - Web前端 - ITeye博客
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色.

JS动态添加事件

- - CSDN博客推荐文章
方法一、setAttribute. obj.setAttribute("onclick", "javascript:alert('测试');");. 但是IE不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、 事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的.

键盘事件处理的JS库 Kibo

- Le - 开源中国社区最新软件
Kibo是一个简单的用于处理键盘事件的Javascript工具库. 这个Javascript类库的特点是,它不但能监听普通的按键事件,它还能监听组合键和功能键,例如Ctrl+C,Shift+w. 还有一个特点是,它把各种键都给符合化了,例如,如果你想监听[ctrl alt x]按键事件,你可以直接写成 k.down(‘ctrl alt x’, handler).

Js冒泡事件详解及阻止

- - JavaScript - Web前端 - ITeye博客
Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数.     evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡.

js onkeypress与onkeydown 事件区别详细说明

- - JavaScript - Web前端 - ITeye博客
本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生,需要的朋友可以参考下:. onkeypress 和 onkeydown 是有区别,下面将讲解 onkeypress 与 onkeydown 事件的区别. onkeypress 事件在用户按下并放开任何字母数字键时发生.

从事件驱动到observable的异步编程——PubSub+Promise+Rx的JS事件库

- Kejun - YY in Limbo 混沌海狂想
你上当叻,虽然从外面看标题很有气势,传达出一种宏大叙事的赶脚,其实我只是刚刚把一个阿尔法城的JS模块提交到github,想顺便介绍一下,但我连API文档都懒得写,就别指望能深入浅出的讲一遍来龙去脉了⋯⋯. 所以就直接帖几个前置阅读的链接罢. 这些潮流的外部起源:(技术也有外源论/exogenesis⋯⋯).

10个用来处理键盘事件的JQuery插件和JS类库

- - JavaScript - Web前端 - ITeye博客
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟 练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这篇文章中,我们收集了10个jQuery的插件,帮助你创建各种基于键盘事件的web应 用,相信大家会喜欢的.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.