`

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动态添加事件.txt

    综上所述,JavaScript动态添加事件是前端开发中非常重要的一部分。通过合理利用`addEventListener`和`attachEvent`,我们可以实现更加灵活和高效的事件处理机制。同时,还需关注浏览器兼容性和性能优化等方面的问题...

    javascript动态添加事件.pdf

    以下是关于JavaScript动态添加事件的一些关键知识点: 1. **setAttribute方法**: - `setAttribute` 是一个通用的方法,用于设置HTML元素的属性值。在大部分现代浏览器中,你可以使用它来设置事件处理程序,如`...

    javascript动态添加事件TXT阅读文档

    javascrip,脚本,t动态添加事件,TXT阅读文档 javascrip,脚本,t动态添加事件,TXT阅读文档 javascrip,脚本,t动态添加事件,TXT阅读文档 javascrip,脚本,t动态添加事件,TXT阅读文档 javascrip,脚本,t动态添加...

    javascript 动态添加事件代码

    总之,JavaScript动态添加事件时,需要考虑浏览器兼容性问题。可以选择使用`addEventListener`和`attachEvent`结合条件语句,或使用事件代理来实现跨浏览器的事件处理。同时,要避免使用可能引入安全问题的`eval`...

    JavaScript动态添加事件之事件委托

    JavaScript动态添加事件,特别是事件委托,是前端开发中一种高效且灵活的事件处理方式。事件委托的基本思想是将事件监听器绑定到一个父级元素,而不是直接绑定到每个子元素,尤其是那些动态创建的子元素。这是因为...

    JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert&#40;”&#41;; } 第二种...

    jQuery为动态生成的select元素添加事件的方法

    6. 动态添加元素到页面中:在需要的时候,使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中,从而使得select元素变得可用。 7. 绑定事件到...

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它...

    JS动态添加控件

    压缩包中的`jquery-1.4.1.js`是一个jQuery库的版本,jQuery简化了DOM操作,使动态添加控件更简单。例如,上述所有步骤在jQuery中可以简化为: ```javascript $('body').append('&lt;input id="myInput" type="text"&gt;...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式,我们可以根据实时数据创建表格,并允许用户与表格中的数据进行交互。这不仅使页面变得更加...

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    js动态添加行

    在JavaScript中,动态添加行是一...通过上述步骤,你可以实现JavaScript动态添加行的功能。然而,实际应用中,你可能需要处理更多细节,如数据绑定、状态管理、动画效果等。不断学习和实践,你将能够熟练掌握这一技能。

    vue动态渲染svg、添加点击事件的实现

    这可以通过在Vue模板中直接嵌入SVG代码,或者通过JavaScript动态操作DOM来实现。在本文档中,推荐的实现方式是使用`Vue.extend()`来创建Vue实例,从而动态地挂载SVG内容。 1. **使用`Vue.extend()`方法**:这是Vue...

    老生常谈js动态添加事件— 事件委托

    其所谓的动态添加事件实质就是指js中的事件委托。 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是...

    js动态添加和删除行

    "js动态添加和删除行"这个主题就是关于如何利用JavaScript在HTML表格(`&lt;table&gt;`)中实现动态添加和移除行的功能。这种功能在数据展示、用户输入等场景下非常常见,比如在线表格编辑器、数据库数据查看等。 动态...

    多种方法实现JS动态添加事件

    在JavaScript中,动态添加事件是网页交互中的常见需求,允许我们在用户与页面交互时执行特定的代码。本文将详细介绍几种不同的方法来实现在JavaScript中动态添加事件。 首先,我们可以使用`setAttribute`方法。这是...

    spreadjs_动态添加表头及数据绑定-demo.zip

    标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的,是使用SpreadJS库创建的一个示例,该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件,...

    table 使用js 高效 动态添加行

    总结,使用JavaScript动态添加表格行是一项基本的前端技能,它允许开发者灵活地根据用户行为或服务器返回的数据更新页面。理解并熟练掌握这些技术,能够提高网页的交互性和用户体验。在实际应用中,还需要注意性能...

    动态添加css或js链接

    ### 动态添加CSS或JS链接 在Web开发过程中,我们经常会遇到需要动态加载样式表(CSS)或脚本(JavaScript)的情况。这种方式不仅能够提高页面的加载速度,还可以实现更加灵活的功能。本文将详细介绍如何在ASP.NET ...

Global site tag (gtag.js) - Google Analytics