js dynamically add events
Often we need to dynamically add events in JS, which involves browser compatibility issues. methods, we also often mix them.
Method 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
here use setAttribute to specify the onclick attribute, which is simple and easy to understand.
However: IE does not support, IE does not support the setAttribute function, but does not support setting certain attributes with setAttribute, including object attributes, collection attributes, event attributes, that is to say, use setAttribute to set style, onclick, onmouseover These attributes are in It doesn't work in IE.
LEO: Try successfully under IE6
Method 2, use attachEvent and addEventListener
IE supports attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("test");
}
can also be written together
obj.attachEvent("onclick", function(){alert("test");});
other browsers support addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("test" );
}
can also be written together
obj.addEventListener("click", function(){alert("test");}, false);
Note that the event of attachEvent has on, such as onclick, while addEventListener does not have on, such as click.
By the way, the third parameter of addEventListener (though rarely used) useCapture - if true, useCapture indicates that the user wishes to initiate a capture. When capture is started, all events of the specified type will be dispatched to the registered EventListeners before being dispatched to any EventTargets below them in the tree. Events that are being bubbling up the tree will not fire the EventListener specified using the capture.
Comprehensive application
if (window.
}
Method 3, event = function
Example: obj.onclick = Foo;
this is supported in multiple browsers, which is an old specification (method 2 belongs to the DOM2 specification), but because of its convenience, it is also used in more occasions many. Here is my solution: function show(){ alert("Hello, world!!!"); } obj.setAttribute('onclick',document.all ? eval( function(){show()} ) : ' javascript: show ()'); The above method will have an error under ie8: ie8 also supports document.all, but eval( function(){show()} ) will give an error
js is used to distinguish the method between IE and other browsers and IE6-8.
1. document.all
2. !!window.ActiveXObject; . The function of !! is to convert a variable of another type to a bool type
The method of use is as follows:
if (document.all){
alert("IE browser");
}else{
alert("Non-IE browser");
}
if (!!window.ActiveXObject){
alert("IE browser");
}else{
alert("Non-IE browser");
}
Here's how to differentiate between IE6, IE7, and 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″);
}
}
So obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()'); should be changed to:
One :
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)});
});