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。

综合应用

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 &&

eval(function(){show()}) : 'javascript：show()');

二：

如果不想像上面那样改，也可以将ie8声明为ie7.

在head标签上加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> !document.documentMode ?

篇二：js模拟点击事件

公司项目想要实现一种功能：

单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击，以显示一个初始页面。（公司页面使用了frameset）

很显然，之后的超链接单击事件需要通过JavaScript来触发。

一开始，我想到了用jQuery的click()事件来触发超链接的单击事件（与trigger("click")一样的效果）。结果发现不如人意。

实例如下：

效果图

IE:

FireFox:

Html代码

<h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3>

<button id="btn">Click Me</button>

<form action="#">

<input type="text" name="userName" value="徐新华-polaris" readonly/><input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件！');"/>

</form>

<a id="aLink" href="http://" onclick = "alert('触发了超链接的单击事件！');">代码触发超链接</a>

Javascript代码

$(function()

{

$("#btn").click(function()

{

$("#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();

if($.browser.msie)

{

$("#aLink").get(0).click();

}

else

{

var evt = document.createEvent("MouseEvents");

evt.initEvent("click", false, false);

$("#aLink").get(0).dispatchEvent(evt);

}

});

});

这时，在IE中是完全正常的。然而，在fireFox中的情况与直接使用jQuery的click()事件一样，能触发单击事件，超链接却没有转到目标地址（注意：提交按钮用此方法也是能够提交的，我想jQuery的click()的实现大概是这样实现的吧）。哎，觉得还是IE好。呵呵。 如此一来，这种方法仍然不能解决FireFox中的问题。得继续寻找其他方法。

既然在fireFox中能够触发单击事件，却不能转到超链接的目标地址，那么，可以用js来实现跳转，即：使用location对象。代码如下：

Javascript代码

$(function()

{

$("#btn").click(function()

{

$("#submit").click();

if($.browser.msie)

{

$("#aLink").get(0).click();

}

else

{

// 绑定单击事件

$("#aLink").click(function()

{

document.location = $(this).attr("href");// window.location = $(this).attr("href");也可以，但是执行的时间不同

});

// 触发单击事件

$("#aLink").click();

}

});

});

这样就大功告成。有一个地方要说明一下：document.location与window.location。这两个都可以，然而他们的执行时间不同，window的执行时间较早。读者可以自己试试。 虽然实现了这个例子，然而，运用到项目中却出问题了，因为项目中使用了frameset（虽然现在很多人不建议使用frameset，但项目用了也没办法，得这样做）。因此需要指定链接的目标url在哪个frame中显示，然而，通过<a>中的target是无法实现的，因为<a>根本不会执行默认行为，需要通过js来实现。

我们知道，document代表当前的页面（当前执行元素所在页面）。如果我们能够找到当前超链接的url希望放入的frame，我们就可以找到它对象的document。当然找到超链接url希望放入的frame很容易，这是由你自己决定将其放到哪的。示例代码如下：

Javascript代码

window.parent.frames['view'].document.location = $("#aLink").attr("href");

其中，'view'是超链接url希望放入的frame的name或id（最好是id和name命名一样）。建议IE中别用上面的方法，而用前面介绍的click()方法。

现在已经解决了所有的问题。可能还有人会有这种需求：就是在<a>中写上target，如<a target="_blank"></a>之类的。希望按target的要求触发超链接。当然，这是非IE浏览器有的问题。

实际上，下面我要介绍的方法是通用行的。可以替代

window.parent.frames['view'].document.location。代码如下：

Javascript代码

window.open($(this).attr("href"),$(this).attr("target"));

如果没有定义target属性，默认会当成'_blank'处理，这与用户单击超链接的效果不一样。这种方式是跨浏览器的，所以，只需要要用这种方式即可。这时，回到用jQuery+原始JavaScirpt来实现，这时最终、个人认为最好的方法。完整最终代码如下：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>JavaScript模拟用户单击事件——徐新华 polaris</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 引入jQuery -->

<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script> <script type="text/javascript">

/**

* 模拟用户单击事件 处理超链接的问题

* @author xuxinhua

*/

$(function()

{

$("#btn").click(function()

{

$("#submit").click();

// 绑定单击事件

$("#aLink").click(function()

{

window.open($(this).attr("href"),$(this).attr("target"));

});

/js模拟点击事件

篇三：javascript事件相应大全

onclick IE3、N2 鼠标点击时触发此事件

ondblclick IE4、N4 鼠标双击时触发此事件

onmousedown IE4、N4 按下鼠标时触发此事件

onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件

onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件

onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件

onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件. onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件

onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件

页面相关事件 onabort IE4、N3 图片在下载时被用户中断

onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件

onerror IE4、N3 出现错误时触发此事件

onload IE3、N2 页面内容完成时触发此事件

onmove IE、N4 浏览器的窗口被移动时触发此事件

oesize IE4、N4 当浏览器的窗口大小被改变时触发此事件

onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件

onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断

onunload IE3、N2 当前页面将被改变时触发此事件

表单相关事件 onblur IE3、N2 当前元素失去焦点时触发此事件

onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件 onfocus IE3 、N2 当某个元素获得焦点时触发此事件

oeset IE4 、N3 当表单中RESET的属性被激发时触发此事件

onsubmit IE3 、N2 一个表单被递交时触发此事件

滚动字幕事件 onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件

onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件 onstart IE4、 N 当Marquee元素开始显示内容时触发此事件

编辑事件 onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件

onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统

剪贴板时触发此事件

onbeforeeditfocus IE5、N 当前元素将要进入编辑状态

onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件

onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象 oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事

件

oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件

oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件

ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]

ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧

ondragend IE5、N 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了

ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件 ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件 ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragstart IE4、N 当某对象将被拖动时触发此事件

ondrop IE5、N 在一个拖动过程中，释放鼠标键时触发此事件

onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件 onpaste IE5、N 当内容被粘贴时触发此事件

onselect IE4、N 当文本内容被选择时的事件

onselectstart IE4、N 当文本内容选择将开始发生时触发的事件

数据绑定 onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件

oncellchange IE5、N 当数据来源发生变化时

ondataavailable IE4、N 当数据接收完成时触发事件

ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件

ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件

onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件

oowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件

oowexit IE5、N 当前数据源的数据将要发生变化时触发的事件

oowsdelete IE5、N 当前数据记录将被删除时触发此事件

oowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件 外部事件 onafterprint IE5、N 当文档被打印后触发此事件

onbeforeprint IE5、N 当文档即将打印时触发此事件

onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件 onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件 onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件

oeadystatechange IE4、N 当对象的初始化属性值发生变化时触发此事件

本文来源：https://www.bwwdw.com/article/cqsb.html