JavaScript HTML DOM 事件

本站原创2019-03-10 13:56:49 163

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

实例

把鼠标移到上面
点击这里

对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

例子 1

在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

亲自试一试

例子 2

本例从事件处理器调用一个函数:

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

亲自试一试

HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例

向 button 元素分配 onclick 事件:

<button onclick="displayDate()">点击这里</button>

亲自试一试

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

实例

向 button 元素分配 onclick 事件:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

亲自试一试

在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时,会执行该函数。

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

<body onload="checkCookies()">

亲自试一试

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

实例

<input type="text" id="fname" onchange="upperCase()">

亲自试一试

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例:

把鼠标移到上面

亲自试一试

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例:

请点击这里

亲自试一试

更多实例

onmousedown 和 onmouseup
当用户按下鼠标按钮时,更换一幅图像。
onload
当页面完成加载时,显示一个提示框。
onfocus
当输入字段获得焦点时,改变其背景色。
鼠标事件
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的完整列表,请参阅 W3School 提供的 HTML DOM Event 对象参考手册


分类检索
娱乐休闲
音乐 在线音乐 轻音乐 DJ/舞曲 原创/翻唱 音乐搜索 音乐周边 唱片公司 影视 影视资讯 在线影视 影视下载 视频播客 网络电视 游戏 游戏综合 网络游戏 网页游戏 单机游戏 小游戏 游戏论坛 游戏下载 单机电玩 游戏周边 游戏厂商 动漫 动漫综合 动漫下载 动漫原创 图片 图片图库 美女写真 相册贴图 电子贺卡 小说 小说阅读 小说搜索 电子书 文化文学 作家作品 笑话 幽默笑话 搞笑视频 星相 12星座 算命占卜 生肖/解梦 风水玄学 心理测试 交友 交友综合 情感爱情 婚嫁婚介 新闻 新闻综合 知名媒体 报刊杂志 时事论坛 各地媒体 体育 体育综合 NBA专区 足球专区 其他体育项目 体育相关 体育协会 军事 军事资讯 军事论坛 摄影 摄影综合 摄影论坛 明星 娱乐资讯 大陆明星 港台明星 欧美明星 日韩明星 追星一族 解读明星 社区 综合社区 SNS社区 特色论坛 校园BBS 地方论坛 直播
电脑网络
互联网 互联网资讯 门户名站 组织协会 IT IT资讯 IT博客 网络编辑 硬件 硬件资讯 硬件评测 硬件论坛 驱动程序 硬件相关 数码 数码资讯 数码论坛 数码相关 软件 软件资讯 软件下载 装机软件 软件论坛 软件评测 软件相关 电脑 电脑资讯 电脑报刊 网管技术 编程 程序编程 ASP/ASP.NET PHP JSP/JAVA CGI WAP VB C/C++/C# DELPHI Python LINUX/UNIX JS/AJAX WEB开发 数据库开发 嵌入式开发 源码下载 设计 设计综合 设计素材 设计竞标 平面设计 CG/FLASH 交互设计 室内设计 建筑设计 工业设计 服装设计 字体下载 建站 域名主机 网页制作 论坛/CMS 站长 站长资讯 站长工具 流量统计 网赚联盟 搜索 搜索引擎 特色搜索 网址 网址导航 分类目录 博客 博客 微博 网摘 RSS订阅 网摘/书签 资源 免费信息 电子邮箱 网络硬盘 网络相册 在线翻译 域名/DNS 主页/网店/论坛 桌面 桌面壁纸 主题屏保 分享 社会化分享 聊天 聊天工具 聊天室 QQ空间代码 QQ相关 黑客 黑客安全 黑客组织 黑客论坛 在线工具 杀毒 病毒防治 安全防毒论坛
生活服务
购物 综合购物 团购导航 导购打折 数码家电 图书音像 衣服首饰 鞋子箱包 美容化妆 母婴儿童 两性情趣 医药保健 食品饮料 礼品鲜花 珠宝眼镜 文体办公 日用家居 数字点卡 电子支付 彩票 在线购彩 福利彩票 体育彩票 天气 天气综合 交通 电子地图 道路交通 公交公司 航空公司 各地铁路 股票 财经资讯 股票综合 股票交流 财经报刊 证券公司 基金 投资理财 金融综合 基金资讯 证券债券 外汇资讯 期货资讯 黄金资讯 风险投资 基金公司 银行 银行网站 各地银行 港澳台银行 外资银行 银行机构 信用卡资讯 保险 保险资讯 保险公司 房产 房产综合 家居装修 地方房产 汽车 汽车资讯 报价交易 二手车 汽车配件 汽车论坛 用车学车 地方汽车 汽车厂商 电视 电视资讯 在线电视 在线电台 电视台 广播电台 手机 手机综合 手机报价 手机论坛 手机电影 手机游戏 手机软件 手机主题 短信图铃 通信 通信综合 通信运营商 各地电信 各地移动 各地联通 各地铁通 健康 医疗健康 寻医问药 健康养生 两性健康 心理健康 医院诊所 医学研究 药品器械 医院管理 疾病预防 美食 饮食营养 菜谱食谱 电子优惠券 宠物 宠物综合 猫猫狗狗 水族爬虫 宠物鸟 花草花卉 宠物用品 宠物医院 动物保护 儿童 儿童乐园 母婴亲子 亲子论坛 女性 女性综合 美容减肥 男人世界 时尚 时尚资讯 时尚杂志 奢侈品 旅游 旅游资讯 旅行社/酒店/机票 旅游景点 自助户外游 地方旅游网 生活 生活名站 网上记账 消费者协会 品牌 服装鞋帽 珠宝配饰 美容化妆 生活日用 餐饮食品 数码家电 文体办公 药品器械 查询 日常生活 交通旅游 金融理财 学习教育 电脑网络 综合其他 招聘 人才招聘 行业人才 地方人才 法律 法律综合 法律法规 知识产权 法律援助
文化教育
教育 教育综合 基础教育 高等教育 成人教育 职业教育 特殊教育 远程教育 教育科研 知识 百科问答 文档网站 外语 英语学习 其他语种 在线翻译 考试 考试招生 高考/自考/成考 公务员考试 考研 英语类考试(托福/雅思/GRE/PETS) 计算机考试 专业类考试 各地考试信息 论文 免费论文 课件资源 大学 国内高校 国外高校 校园 校园综合 同学录 图书馆 图书馆院 留学 出国留学 曲艺 相声/小品/评书 舞蹈 乐器 魔术杂技 地方戏 爱好 艺术鉴赏 收藏艺术 美术绘画 书法艺术 纹身 科技 科研机构 社会科学 自然科学 农业科学 工程科学 科普知识 发明专利 人文 社会文化 历史人文 历史名人 宗教 佛教 道教 基督教 伊斯兰教 公益 公益项目 公益基金 公益资讯
综合其他
政府 国家政府机构 地方政府机构 国际/区域组织 驻华使馆/领事馆 各国政府 行业 商业贸易 农林牧渔 物流快递 食品饮料 服装鞋帽 礼品玩具 建筑建材 家电音响 电子安防 能源电力 机械仪表 化学工业 纺织皮革 冶金矿产 五金模具 广告营销 印刷包装 出版发行 环保绿化 黄页 黄页大全 企业网站 酷站 美图分享 晒搭配 吃货据点 发现好音乐 新鲜科技 创意设计 爱旅行 爱手工 新潮社区 趣味测试 其他 菜鸟