javaScript,页面自动加载事件详解

javaScript,页面自动加载事件详解 篇一：javascript 动态添加事件 往往我们需要在 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。 1 / 11

综合应用 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; 2 / 11

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 && eval(function(){show()}) : 'javascript：show()'); 二： 如果不想像上面那样改，也可以将 ie8 声明为 ie7. 在 head 标签上加上!document.documentMode ? 篇二：js 模拟点击事件 公司项目想要实现一种功能： 单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击， 以显示一个初始页面。（公司页面使用了 frameset） 很显然，之后的超链接单击事件需要通过 JavaScript 来触发。 一开始，我想到了用 jQuery 的 click()事件来触发超链接的单击事件（与 trigger("click")一 样的效果）。结果发现不如人意。 实例如下： 效果图 IE: FireFox: Html 代码 Click Me
代码触发超链接 Javascript 代码 $(function() { $("#btn").click(function() { 3 / 11

$("#submit").click(); $("#aLink").click(); }); }); 当单击：Click Me 按钮时，先后弹出提交按钮被单击、超链接被单击的对话框，这表明两 者的单击事件都被触发了。然而，从地址栏中可以看到，提交按钮的单击事件触发后，执行了 它的默认行为：提交表单；可是超链接的单击事件触发后，并没有链接到目标地址。（不要怀 疑说是提交按钮的提交地址对超链接有影响，因为我去掉提交按钮，只留下超链接也不会链接 到目标地址。） 也许 jQuery 中的 click()方法对超链接的单击事件并没有使其执行浏览器的默认行为（即 使你手动加入 return true 也没有用） 。 注意： tigger("click")与 click()一样的。 jQuery 文档中说“这 个函数也会导致浏览器同名的默认行为的执行”。同名的？不太明白，但是超链接的确不能执 行它的默认行为。这是，只能想另外的方法——抛弃 jQuery 提供的事件。回到 JavaScript 自己 的事件——click。代码如下： Javascript 代码 $(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").get(0).click(); }); }); 在 IE 中一测试， 通过了??有点兴奋。 可是， 在 fireFox 中却提示： click()不是一个 function。 说真的， IE 浏览器提供的东西对开发人员来说很好，而 fireFox 却没有，比如之前说到的 onpropertychange 等。不过，我们必须的考虑 IE 之外的浏览器。在网上查资料，有不少人提到 在 fireFox 中要用代码触发一个事件，需要如下处理： Javascript 代码 var evt = document.createEvent("MouseEvents"); evt.initEvent("click", false, false);// 或 用 initMouseEvent() ， 不 过 需 要 更 多 参 数 $("#aLink").get(0).dispatchEvent(evt); 按以上方法来实现我想要的功能，代码如下： Javascript 代码 $(function() { $("#btn").click(function() { $("#submit").click(); 4 / 11