木子屋
 

标题: JS事件处理程序的几种写法

作者: dnawo

日期: 2008-01-04 10:07 AM

分类: 脚本语言

内容: 1.作为HTML属性值的事件处理程序
HTML代码

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2.作为JavaScript属性的事件处理程序
HTML代码
document.getElementById("btn").onclick = function(){alert("mzwu.com");}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
说明：可能受第一种方法的误导，你会觉得应该写成：document.getElementById("btn").onclick() = "alert('mzwu.com');"，这样写是错误的！其实第一种方法隐式的创建了一个函数，使用下边代码可以说明这一点，因为它检测出HTML属性值其实是一个函数：
HTML代码

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上边是用直接量来创建函数，改成用function()语句的写法：
HTML代码
function e()
{
alert("mzwu.com");
}
document.getElementById("btn").onclick = e;

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
由此我们可引申出第三种方法。
3.第三种方法
HTML代码
function document.all.btn.onclick()
{
alert("mzwu.com");
}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
说明：诸如此类的方法还有function document.onclick(){}，但这种方法在IE、FF中测试只有IE下可行，再改成function document.getElementById("btn").onclick(){}在IE、FF下都不行了，提示缺少标识符，其实这也不难解释，因为JavaScript标识符中本来就不允许出现点号，用document.getElementById("btn").onclick做标识符显然是错误的，但document.all.btn.onclick却又可以实在有点让人费解。

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: JS事件处理程序的几种写法

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms