javaScript页面自动加载事件详解.docx
- 文档编号:24630150
- 上传时间:2023-05-29
- 格式:DOCX
- 页数:12
- 大小:19.53KB
javaScript页面自动加载事件详解.docx
《javaScript页面自动加载事件详解.docx》由会员分享,可在线阅读,更多相关《javaScript页面自动加载事件详解.docx(12页珍藏版)》请在冰豆网上搜索。
javaScript页面自动加载事件详解
javaScript,页面自动加载事件详解
篇一:
javascript动态添加事件
往往我们需要在Js中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
varobj=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);
functionFoo()
{
alert("测试");
}
也可写在一起
obj.attachevent("onclick",function(){alert("测试");});
其它浏览器支持addeventListener
obj.addeventListener("click",Foo,false);
functionFoo()
{
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的规范),不过由于使用方便,用的场合也比较多。
下面是我的解决办法:
functionshow(){
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之间的方法:
varisIe=!
!
window.Activexobject;
varisIe6=isIe&&!
window.xmLhttpRequest;
varisIe8=isIe&&!
!
document.documentmode;
varisIe7=isIe&&!
isIe6&&!
isIe8;
if(isIe){
if(isIe6){
alert(”ie6″);}elseif(isIe8){alert(”ie8″);}elseif(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代码
请单击”clickme"。
测试提交按钮与超链接是否也被单击了。
clickme
代码触发超链接
Javascript代码
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
$("#aLink").click();
});
});
当单击:
clickme按钮时,先后弹出提交按钮被单击、超链接被单击的对话框,这表明两者的单击事件都被触发了。
然而,从地址栏中可以看到,提交按钮的单击事件触发后,执行了它的默认行为:
提交表单;可是超链接的单击事件触发后,并没有链接到目标地址。
(不要怀疑说是提交按钮的提交地址对超链接有影响,因为我去掉提交按钮,只留下超链接也不会链接到目标地址。
)
也许jQuery中的click()方法对超链接的单击事件并没有使其执行浏览器的默认行为(即使你手动加入returntrue也没有用)。
注意:
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代码
varevt=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
{
varevt=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中显示,然而,通过中的target是无法实现的,因为根本不会执行默认行为,需要通过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()方法。
现在已经解决了所有的问题。
可能还有人会有这种需求:
就是在中写上target,如之类的。
希望按target的要求触发超链接。
当然,这是非Ie浏览器有的问题。
实际上,下面我要介绍的方法是通用行的。
可以替代
window.parent.frames['view'].document.location。
代码如下:
Javascript代码
window.open($(this).attr("href"),$(this).attr("target"));
如果没有定义target属性,默认会当成'_blank'处理,这与用户单击超链接的效果不一样。
这种方式是跨浏览器的,所以,只需要要用这种方式即可。
这时,回到用jQuery+原始Javascirpt来实现,这时最终、个人认为最好的方法。
完整最终代码如下:
html代码
Javascript模拟用户单击事件——徐新华polaris
/**
*模拟用户单击事件处理超链接的问题
*@authorxuxinhua
*/
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
//绑定单击事件
$("#aLink").click(function()
{
window.open($(this).attr("href"),$(this).attr("target"));
});
/js模拟点击事件
篇三:
javascript事件相应大全
onclickIe3、n2鼠标点击时触发此事件
ondblclickIe4、n4鼠标双击时触发此事件
onmousedownIe4、n4按下鼠标时触发此事件
onmouseupIe4、n4鼠标按下后松开鼠标时触发此事件
onmouseoverIe3、n2当鼠标移动到某对象范围的上方时触发此事件onmousemoveIe4、n4鼠标移动时触发此事件
onmouseoutIe4、n3当鼠标离开某对象范围时触发此事件
onkeypressIe4、n4当键盘上的某个键被按下并且释放时触发此事件.onkeydownIe4、n4当键盘上某个按键被按下时触发此事件
onkeyupIe4、n4当键盘上某个按键被按放开时触发此事件
页面相关事件onabortIe4、n3图片在下载时被用户中断
onbeforeunloadIe4、n当前页面的内容将要被改变时触发此事件
onerrorIe4、n3出现错误时触发此事件
onloadIe3、n2页面内容完成时触发此事件
onmoveIe、n4浏览器的窗口被移动时触发此事件
oesizeIe4、n4当浏览器的窗口大小被改变时触发此事件
onscrollIe4、n浏览器的滚动条位置发生变化时触发此事件
onstopIe5、n浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunloadIe3、n2当前页面将被改变时触发此事件
表单相关事件onblurIe3、n2当前元素失去焦点时触发此事件
onchangeIe3、n2当前元素失去焦点并且元素的内容发生改变而触发此事件onfocusIe3、n2当某个元素获得焦点时触发此事件
oesetIe4、n3当表单中ReseT的属性被激发时触发此事件
onsubmitIe3、n2一个表单被递交时触发此事件
滚动字幕事件onbounceIe4、n在marquee内的内容移动至marquee显示范围之外时触发此事件
onfinishIe4、n当marquee元素完成需要显示的内容后触发此事件onstartIe4、n当marquee元素开始显示内容时触发此事件
编辑事件onbeforecopyIe5、n当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecutIe5、n当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统
剪贴板时触发此事件
onbeforeeditfocusIe5、n当前元素将要进入编辑状态
onbeforepasteIe5、n内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdateIe5、n当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenuIe5、n当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事
件
oncopyIe5、n当页面当前的被选择内容被复制后触发此事件
oncutIe5、n当页面当前的被选择内容被剪切时触发此事件
ondragIe5、n当某个对象被拖动时触发此事件[活动事件]
ondragdropIe、n4一个外部对象被鼠标拖进当前窗口或者帧
ondragendIe5、n当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了
ondragenterIe5、n当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleaveIe5、n当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragoverIe5、n当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstartIe4、n当某对象将被拖动时触发此事件
ondropIe5、n在一个拖动过程中,释放鼠标键时触发此事件
onlosecaptureIe5、n当元素失去鼠标移动所形成的选择焦点时触发此事件onpasteIe5、n当内容被粘贴时触发此事件
onselectIe4、n当文本内容被选择时的事件
onselectstartIe4、n当文本内容选择将开始发生时触发的事件
数据绑定onafterupdateIe4、n当数据完成由数据源到对象的传送时触发此事件
oncellchangeIe5、n当数据来源发生变化时
ondataavailableIe4、n当数据接收完成时触发事件
ondatasetchangedIe4、n数据在数据源发生变化时触发的事件
ondatasetcompleteIe4、n当来子数据源的全部有效数据读取完毕时触发此事件
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javaScript 页面 自动 加载 事件 详解