Javascript事件处理代码的三种写法

小懒苏州混找人

小懒苏州混找人

2016-02-20 00:45

今天图老师小编要向大家分享个Javascript事件处理代码的三种写法教程,过程简单易学,相信聪明的你一定能轻松get!

1.作为HTML属性值的事件处理程序


 HTML代码
input name="btn" type="button" id="btn" value="按钮" onclick="alert('mzwu.com');" /
 


2.作为JavaScript属性的事件处理程序


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
document.getElementById("btn").onclick = function(){alert("mzwu.com");}
/script
 


说明:可能受第一种方法的误导,你会觉得应该写成:document.getElementById("btn").onclick() = "alert('mzwu.com');",这样写是错误的!其实第一种方法隐式的创建了一个函数,使用下边代码可以说明这一点,因为它检测出HTML属性值其实是一个函数:


 HTML代码
input name="btn" type="button" id="btn" value="按钮" onclick="alert(typeof(this.onclick));" /
 


上边是用直接量来创建函数,改成用function()语句的写法:


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
function e()
{
 alert("mzwu.com");
}
document.getElementById("btn").onclick = e;
/script
 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


由此我们可引申出第三种方法。

3.第三种方法


 HTML代码
input name="btn" type="button" id="btn" value="按钮"  /
script language="javascript"
function document.all.btn.onclick()
{
 alert("mzwu.com");
}
/script
 


说明:诸如此类的方法还有function document.onclick(){},但这种方法在IE、FF中测试只有IE下可行,再改成function document.getElementById("btn").onclick(){}在IE、FF下都不行了,提示缺少标识符,其实这也不难解释,因为JavaScript标识符中本来就不允许出现点号,用document.getElementById("btn").onclick做标识符显然是错误的,但document.all.btn.onclick却又可以实在有点让人费解。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

Javascript事件处理代码的三种写法

Web开发
Javascript事件处理代码的三种写法

javascript下with 的简化代码写法

Web开发
javascript下with 的简化代码写法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript事件模型代码

Web开发
javascript事件模型代码

JavaScript中的事件处理

Web开发
JavaScript中的事件处理

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript事件驱动及事件处理

Web开发
JavaScript事件驱动及事件处理

三种CSS图表代码

Web开发
三种CSS图表代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

我的XP能升级到Windows 7系统吗?

我的XP能升级到Windows 7系统吗?

Javascript制作拖动网页布局的方法

Javascript制作拖动网页布局的方法
下拉加载更多内容 ↓