ch08 -- JavaScript 事件响应

JavaScript 事件响应


JavaScript 利用事件响应创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

主要事件表:

事件说明
onclick鼠标单击事件
onmouseover鼠标经过事件
onmouseout鼠标移开事件
onchange文本框内容改变事件
onselect文本框内容被选中事件
onfocus光标聚集
onblur光标离开
onload网页导入
onunload关闭网页

鼠标单击事件(onclick)


onclick 是鼠标单击事件。

当在网页上单击鼠标时,就会发生该事件,同时 onclick 事件调用的程序块就会被执行。通常该事件与按钮一起使用。

注意: 在网页中,如使用事件,就在该元素中设置事件属性。

鼠标经过事件(onmouseover)


onmouseover 是鼠标经过事件。

当鼠标移到一个对象上时,该对象就触发 onmouseover 事件,并执行 onmouseover 事件调用的程序。

鼠标移开事件(onmouseout)


onmouseout 是鼠标移开事件。

当鼠标移开当前对象时,执行 onmouseout 调用的程序。

光标聚焦事件(onfocus)


onfocus 是光标聚焦事件。

当网页中的对象获得聚点时,执行 onfocus 调用的程序就会被执行。

光标失焦事件(onblur)


onblur 是光标失焦事件。

onblur 事件与 onfocus 是相对事件。

当光标离开当前获得聚焦对象的时候,触发 onblur 事件,同时执行被调用的程序。

内容选中事件(onselect)


onselect 是选中事件。

当文本框或者文本域中的文字被选中时,触发 onselect 事件,同时调用的程序就会被执行。

内容改变事件(onchange)


onchange 是内容改变事件。

通过改变文本框的内容来触发 onchange 事件,同时执行被调用的程序。

加载事件(onload)


onload 是加载事件。

onload 事件会在页面加载完成后,立即发生,同时执行被调用的程序。

注意:

  1. 加载页面时,触发 onload 事件,事件写在 <body> 标签内。
  2. 此节的加载页面,可理解为打开一个新页面时。

卸载事件(onunload)


onunload 是卸载事件。

当用户退出页面时(页面关闭、页面刷新等),触发 onUnload 事件,同时执行被调用的程序。

注意:不同浏览器对 onunload 事件支持不同。


JavaScript 中获取元素的值设置和获取方法为:

// 赋值
document.getElementById("id".value = value; 
// 取值
var value = document.getElementById("id".value;

使用 parseInt() 函数可解析一个字符串,并返回一个整数。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Content-Security-Policy: frame-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; img-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org data: mozilla.org www.googletagmanager.com www.google-analytics.com adservice.google.com adservice.google.de adservice.google.dk creativecommons.org cdn-3.convertexperiments.com logs.convertexperiments.com images.ctfassets.net; child-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; style-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org 'unsafe-inline' app.convert.com; script-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com www.google-analytics.com tagmanager.google.com www.youtube.com s.ytimg.com cdn-3.convertexperiments.com app.convert.com data.track.convertexperiments.com 1003350.track.convertexperiments.com 1003343.track.convertexperiments.com; connect-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com region1.google-analytics.com logs.convertexperiments.com 1003350.metrics.convertexperiments.com 1003343.metrics.convertexperiments.com sentry.prod.mozaws.net o1069899.sentry.io o1069899.ingest.sentry.io https://accounts.firefox.com/ stage.cjms.nonprod.cloudops.mozgcp.net cjms.services.mozilla.com; font-src 'self'; default-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org X-Clacks-Overhead: GNU Terry Pratchett Etag: "f2d65cb9e0a72b2e713c5f4e624ec2c1" X-Backend-Server: bedrock-75f4585775-g8pf7.gcp-us-west1 Strict-Transport-Security: max-age=31536000 X-Content-Type-Options: nosniff X-Xss-Protection: 1; mode=block Referrer-Policy: strict-origin-when-cross-origin Via: 1.1 google, 1.1 5d4ed4df24dee2cc4c8f561e8c090690.cloudfront.net (CloudFront) X-Cache: Miss from cloudfront X-Amz-Cf-Pop: SFO5-C1 X-Amz-Cf-Id: Yz8DuOFyPa9l63XgCBJwQlo9VYl2Ch9qG9ccVATJcR6ci3doX7QbHA==表示什么意思
最新发布
06-03

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值