47.Event mouse

  但是不管你用内联方式还是后面要学的脚本编程方法,点击(onClick)事件只是众多事件中的一种,在这个章节,你将会学习到,当用户移动鼠标到页面上的时候,以及鼠标离开页面的时候,会发生什么。

  假设你的页面刚开始是一张之前 "before" 的图片,当用户移动鼠标到这张图片的时候,这张图片被之后 "after"的图片替换了,你可能在想用CSS来实现这种效果,但是这是JavaScript的书本,所以我们要用事件处理程序来处理这种情况。

  下面代码就是用之后(after)的图片替换之前(before)的图片的处理方式。

  刚开始,它就只是一张普通香草的图片。

  然后接下来就是事件处理程序要用到的关键字,关键字用驼峰写法表示,你可以选择其他方式(上一章节说过,事件处理的关键字对大小写不敏感),但是比较通用的写法是:onMouseover

  之后就如同onClick一样,在关键字onMouseover后面是一个等号,等号后面,也就是在引号内是事件响应程序。

  你可能会很惊讶,这次的事件响应竟然不是JavaScript代码,而是HTML标签代码。

  要注意的是,图片地址必须用单引号,因为整个响应事件语句都是在双引号内。

  在其他HTML标签中,同样也可以用onMouseover事件处理,下面代码是用内联的写法展示了当鼠标移动到标题(heading)的时候,会弹窗显示消息。

  当用户鼠标移动到标题的时候,会alert弹窗显示信息。

  在上面代码中,你也许更乐意用调用函数的方式来alert弹出消息,而不是用内联的方式,直接写alert代码。

  下面用JavaScript的方式来替换CSS常用的鼠标悬浮,从而改变颜色。

  当用户移动鼠标到这个链接上面,这个链接会变成绿色。

  在下面这个例子中,当用户移动鼠标到文字上面的时候,下面会展开所有的消息。

  现在也不用关心expand函数是如何展开段落信息的,后面章节我们也会提到的。

  在本章开始的时候,我们说过图片轮转(the model's before-and-after pictures),当用户鼠标移动到图片的时候,之后(after)的图片会替换之前(before)的图片。正常情况,当用户鼠标移开的时候,原来的图片应该复原回去,所以我们最好把onMouserout鼠标移出事件也结合进来。

本篇的代码习题,可以去下面这个地址练习: http://www.asmarterwaytolearn.com/js/47.html

读书笔记:

plain vanilla 普通香草

wild 野生的

alternative to …的替换物

revert to 恢复、回复,归还

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190119G04N6300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券