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" />
以上应用用在什么地方呢?
在IE7下ajax回调html片段之后,自动给html片段里面添加一些事件。
比如这样:jQuery('.ui-popup-backdrop').attr("onclick","CustService.inputfocus();");//遮罩层注册事件
但是IE7并不识别这样的注册事件,所以就必须使用以上的操作进行注册事件了,例如:
jQuery('.ui-popup-backdrop')[0].attachEvent("onclick",CustService.inputfocus);这样IE系列的浏览器就识别了。
IE8、IE9、IE10、IE11都支持:
jQuery('.ui-popup-backdrop').attr("onclick","CustService.inputfocus();");
IE7、IE8、IE9、IE10都支持:
jQuery('.ui-popup-backdrop')[0].attachEvent("onclick",CustService.inputfocus);
值得注意的是,IE11由于大多数都是W3C标准所以不支持attachEvent的方法。
js自动触发a标签href跳转
location.href=jQuery('.sub_bar').find("a").last().attr("href");
人为去点击a标签是跳转,但是href并不是单击事件。通过以上代码可以去实现自动跳转。
扩展:attachEvent注册事件,如果事件要传递参数该怎么办呢?
1.事件没有参数的情况,这种情况最简单:
//获取焦点事件
CustService.inputfocus=function(){
jQuery('.ui-dialog-body').find("input").focus();//获取焦点以便扫描枪扫描
}
jQuery('.ui-popup-backdrop')[0].attachEvent("onclick",CustService.inputfocus);这样IE系列的浏览器就识别了。
2.事件有参数的情况:
function setOrganize2(orgCode,orgName){
alert("222新方法");
alert(orgCode+orgName);
jQuery('#officeno').val(orgCode);
jQuery('#officeName').val(orgName);
dialog.get("selectdept").close().remove();//关闭弹出框
}
jQuery('input[type="radio"]').each(function(){
var orgMemCode=jQuery(this).attr("orgMemCode");//取得参数1
var orgMemName=jQuery(this).attr("orgMemName");//取得参数2
jQuery(this)[0].attachEvent("onclick",function(){setOrganize2 (orgMemCode,orgMemName)});
});
相关推荐
datagridview 按钮列 绑定事件触发
在 Web页面中,浏览器可以调用JavaScript 响应用户的操作。例如,当用户单击了某个链接,或者编辑了表单域中的内容,浏览器就...本章介绍基本的事件绑定与事件触发,主要包括事件绑定的常见方式与事件编写两部分内容。
微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数...
android 事件直接绑定到标签,直接在界面布局文件中为指定标签绑定事件处理方法
这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句 2....
js绑定事件,并动态传参,比如绑定click事件。js绑定事件,并动态传参,比如绑定click事件。 js绑定事件,并动态传参,比如绑定click事件
今天小编就为大家分享一篇layui动态绑定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!
# PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton 1. 继承 QWidget 定义自定义窗口类; 1. 在窗口中创建三个 QPushButton 并设置水平布局 QHBoxLayout; 2. 将三个按钮分别绑定自定义函数。
Delphi 动态绑定事件 指定事件处理函数过程 绑事事件自定义函数过程 测试完全可用,含源码文本.
js回车事件绑定
javascript为DOM绑定事件 兼容 学习笔记
js 判断是否绑定一个事件
点击子元素,触发子元素事件的同时不触发父元素的时间
两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种...
本文实例讲述了js实现为a标签添加事件的方法。分享给大家供大家参考,具体如下: 以示例说明: 实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1。 Html结构如下所示: ...
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a></a>,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: ...
WPF 纯MVVM模式 任意事件绑定 获取EventArgs 完美取代原生事件+=模式 只需要引用System.Windows.Interactivity
同时给元素绑定,单击事件和双击事件,解决原本两个事件不能并存的问题。 希望能帮助大家解决问题。
用于在IE浏览器下做js调试使用的好工具