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)});
});
相关推荐
在HTML中,`<a>`标签通常用于创建超链接,它可以指向其他网页或者通过JavaScript触发某些行为。`href`和`onclick`都是`<a>`标签的重要属性,它们各自承担着不同的职责,但在某些场景下可能会同时使用,这就涉及到...
href属性用于指定链接的目标地址,而onclick属性则用于绑定一个事件处理器,当用户点击<a>标签时会触发相应的JavaScript代码执行。理解这两个属性的使用场景和区别,对于前端开发人员来说非常重要。 首先,href属性...
5. 对于IE8,可能需要使用`attachEvent`而非`addEventListener`来绑定事件处理函数,因为IE8不支持`addEventListener`。 在提供的压缩包文件中,`SlideTrans.html`很可能是包含图片浏览功能的HTML页面,`SlideTrans...
通常,`<a>`标签用于链接到其他网页或者在页面内部跳转,但在这里我们用它来触发JavaScript事件,实现图片切换。以下是几种常见的`<a>`标签事件写法: 1. `<a href="javascript://" onclick="dosomething()">a1</a>...
JavaScript(简称JS)是一种轻量级的解释型编程语言,常用于网页和网络应用开发。在移动设备或网页中,由于安全原因,通常不允许直接访问硬件键盘,因此开发者需要为输入框提供虚拟键盘,以便用户在触摸屏上进行输入...
在上述方法中,a标签的href属性设置为"#",并返回false以阻止页面的跳转行为。同时,a标签的onclick事件被正确触发,并将该事件的行为传递给其内部的option元素。 总之,解决IE浏览器对select-option onclick事件不...
给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常。 在IE6中使用Fiddler2和httpWatch监视请求,经常会出现”aborted”,折腾了许久,相当的诡异。后来将a标签换成...
本文将详细介绍如何使用JavaScript禁止超链接的默认跳转行为,并分析JavaScript事件机制及鼠标事件的响应操作技巧。 首先,要了解JavaScript是如何控制链接跳转的,我们需要知道事件处理函数(event handler)的...
- **IE6/IE7**:在IE6和IE7中,如果`<a>`标签的`href`属性设置为`javascript:void(0)`,并且通过`onclick`事件调用函数,可能会导致页面重新加载或阻止默认行为(如跳转)失效。特别是在涉及AJAX请求时,这可能导致...
在JavaScript中,每当一个事件发生时,都会创建一个`event`对象,这个对象包含了与事件相关的各种信息,包括事件类型、目标元素等。获取事件源的方法主要有两种: 1. 在标准浏览器(如Chrome、Firefox)中,可以...
#### 窗体图片与事件绑定 `document.images[索引]`可以访问文档中的图片元素,而`document.onmousedown=scrollwindow;`则是绑定鼠标按下事件到滚动窗口函数的一个例子。 #### 元素操作与对象事件绑定 `document....
2. 事件捕获与释放:`event.srcElement.setCapture()` 和 `event.srcElement.releaseCapture()` 用于控制事件的捕获阶段,当设置捕获后,事件将首先在最外层元素触发,然后逐级向下传递。 3. 事件按键处理:`event....
1. **事件源对象**: `event.srcElement` 是在事件处理函数中用来获取触发事件的元素,`event.srcElement.tagName` 和 `event.srcElement.type` 可以获取元素的标签名和类型,例如判断是按钮、输入框等。 2. **事件...
`document.captureEvents(Event.KEYDOWN)` 用于捕获键盘事件,而 `document.all["elementID"].detachEvent('onclick', a)` 是在IE中取消事件绑定的方法。 8. **访问窗体元素**: `document.all["txt"].focus()` ...
15. **元素与事件绑定**:`document.all.xxx.detachEvent('onclick',a);`用于解除事件绑定,IE浏览器特有,非IE浏览器通常使用`removeEventListener`。 16. **插件数目**:`navigator.plugins`可以获取用户浏览器...
JavaScript 模拟用户单击事件是一项常见的前端开发技术,它主要应用于自动化测试或者在某些特殊情况下需要触发元素的默认行为。在本例中,开发者尝试使用 jQuery 的 `click()` 方法来模拟点击事件,但发现这种方法...
1. **事件源对象**:`event.srcElement` 是JavaScript中获取事件触发元素的方式,可以获取到事件发生的元素的`tagName`和`type`属性,例如获取当前元素的标签名和类型。 2. **捕获与释放**:`event.srcElement....
为了防止浏览器立即跳转,`download`属性可以在`<a>`标签中设置,指定文件名并指示浏览器将内容下载而不是导航。 4. **图片旋转**: 项目中提到有图片旋转的功能,这可能涉及到CSS3的`rotate`属性或者JavaScript的...