注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> Javascript >> 网页设计正文

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

文章来源:网页教学网收集整理 作者:佚名 更新时间:2008-2-23 14:21:51 【 】 【加入收藏

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

  • 上一篇网页设计:

  • 下一篇网页设计: 没有了
  • 最 新 热 门
     网页中Flash激活限制的处理方法
     Fireworks教程:石头字的制作过程
     Javascript事件处理代码的三种写法
     使用createElement动态创建HTML对象
     解决JS脚本兼容的几个小技巧
     JavaScript教程:判断日期正确与否的函数
     JavaScript教程:关于时间格式转换
     网页设计教学或学习计划
     动易、新云和风讯后台模块的比较
     Dvbbs V8.2.0 RC1模板驱动机制
    最 新 推 荐
     Javascript事件处理代码的三种写法
     使用createElement动态创建HTML对象
     解决JS脚本兼容的几个小技巧
     JavaScript教程:判断日期正确与否的函数
     JavaScript教程:关于时间格式转换
     JavaScript Dom编程:介绍学习书籍
     FireFox支持innerText
     innerHTML,outerHTML,innerText,outerText
     IE和Firefox的兼容性问题
     JavaScript代码规范
    相 关 文 章

    JavaScript教程:判断日期正确与否的函数
    JavaScript教程:关于时间格式转换
    Dreamweaver定义模板批量制作web网页
    JavaScript Dom编程:介绍学习书籍
    Dreamweaver定义模板批量制作网页
    JavaScript代码规范
    Javascript的一些属性讲解
    Javascript文档对象模型(DOM)实例分析
    javaScript DOM方法与属性摘要
    Javascript在IE与firefox中表现的异同

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用