js动态添加事件
转载的,但不明确出处
往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,
但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。
LEO:在IE6下尝试成功
方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}
也可写在一起
obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}
同样也可写在一起
obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。
综合应用
if (window.attachEvent)
{
//IE 的事件代码
}
else
{
//其它浏览器的事件代码
}
方法三、事件 = 函数
例:obj.onclick = Foo;
这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。
下面是我的解决办法:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
以上方法在ie8下会出现错误:
ie8也支持document.all, 但eval(function(){show()})却会出错
js用来区别IE与其他浏览器及IE6-8之间的方法。
1、document.all
2、!!window.ActiveXObject; 。!!的作用是把一个其他类型的变量转成的bool类型
使用方法如下:
if (document.all){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}
if (!!window.ActiveXObject){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}
下面是区别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″);
}
}
所以obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()'); 要改为:
一:
obj.setAttribute('onclick',document.all && !document.documentMode ? eval(function(){show()}) : 'javascript:show()');
二:
如果不想像上面那样改,也可以将ie8声明为ie7.
在head标签上加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
js动态添加事件的更多相关文章
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- JS——动态添加事件和移除事件(有待补充...)
动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- js实现动态添加事件
js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
随机推荐
- Nmap 源代码学习四 软件简单使用
软件安装环境是win7.使用Zenmap, nmap6.49BETA2 扫描主机port nmap -T4 -A -v 192.168.0.207 输出结果: 扫描整个子网 nmap 192.168. ...
- Android开发代码混淆经验(Eclipse)
为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 2.编辑项目下的proguard-project.txt,添加不需要混淆的规则(model.泛型.反射.第 ...
- AnimImageView
https://github.com/eltld/AnimImageView
- 推荐安卓开发神器(里面有各种UI特效和实例)
网上有很多开源的安卓类库很好用,对于刚学习安卓的童鞋亦或者老鸟都是很好的学习对象. 我平时有关注开源代码的习惯,这么多年也搜集了不少精彩的源码. 到后来发现自己手机里装的都是几百个demo app,删 ...
- 【JavaScript】你知道吗?Web的26项基本概念和技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- Redis for Windows(C#缓存)安装和使用
Redis for Windows(C#缓存)安装和使用 前言 前段时间写过两篇简单的有关Memcached缓存的相关文章,当然了只是入门的如何使用而已.最近这两天又发现了Redis这个神奇的东西,之 ...
- 【JSP】JSTL使用core标签总结(不断更新中)
使用core标签 在页面中使用taglib指令指定标签URI和prefix.如: <%@ taglib uri="http://java.sun.com/jsp/jstl/core&q ...
- iOS开发——UI篇Swift篇&UITextView
UITextView 一:UITextView使用及其属性的设置 titleLabel.text = titleString //创建UITextView对象 textView = UITextVie ...
- 线性表 及Java实现 顺序表、链表、栈、队列
数据结构与算法是程序设计的两大基础,大型的IT企业面试时也会出数据结构和算法的题目, 它可以说明你是否有良好的逻辑思维,如果你具备良好的逻辑思维,即使技术存在某些缺陷,面试公司也会认为你很有培养价值, ...
- 关于self.用法的一些总结
转自:http://www.cocoachina.com/bbs/read.php?tid=12850&page=1 最近有人问我关于什么时候用self.赋值的问题, 我总结了一下, 发出来给 ...