当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript事件处理代码的三种写法

Javascript
表格 隔行换色升级版
JavaScript 变量基础知识
fileupload控件 文件类型客户端验证实现代码
extjs DataReader、JsonReader、XmlReader的构造方法
让Firefox支持event对象实现代码
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
JQuery 图片延迟加载并等比缩放插件
Jquery作者John Resig自己封装的javascript 常用函数
js 鼠标拖动对象 可让任何div实现拖动效果
页面中js执行顺序
Javascript select下拉框操作常用方法
jQuery 常见学习网站与参考书
javascript currying返回函数的函数
prototype 中文参数乱码解决方案
为javascript添加String.Format方法
asp.net HttpHandler实现图片防盗链
Riot.js 快速的JavaScript单元测试框架
Javascript实现的CSS代码高亮显示
Js 实现表格隔行换色一例

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 181 ::
收藏到网摘: n/a

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>
 


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

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却又可以实在有点让人费解。