《小白H5成长之路10》做web页面经常用到的鼠标事件

bigegpt 2024-10-24 09:01 10 浏览

近日，外面天气越来越冷，由于小白办公室是阳面，因此窗户口总能聚集各式各样前来晒太阳的低头族。看着他们，小白也想懒洋洋的靠在窗口，看着手机放松放松自己。放松的想法在小白脑海中仅仅存在了十几秒中后，就彻底消失在虚空之中了。小白发现自从认真学html5开始到现在，居然把没事就想拿出手机的习惯都给改掉了。处理完手头的事情后，小白又去找老朱，看看今天会学什么方面的知识。

“小白，这几天连续学习累不累？”

“不累，朱哥，今天我需要了解哪方面的知识呢？”

“今天，我们看看常用的鼠标事件吧！你平时上网最常用到的鼠标事件是哪几个？”

小白想了想：“我打开链接需要点击链接，所以点击事件算是一个，平时浏览网页的时候，如果是图片轮换鼠标移到上面图片轮换就会停住，是不是鼠标移上去也算一个事件？”

“恩，没错，我们最常用到的事件是鼠标的点击事件（click），另外鼠标移到某个容器上面（mouseover）、鼠标离开某个容器时（mouseout）的事件也会经常遇到，比如鼠标移动到某个容器上面，让这个容器css样式发生改变，或者让他的html内容发生改变，离开后恢复原来的状态。通过jQuery改变容器的css样式过两天我再跟你说，今天我们还是通过处理容器的html内容进行鼠标事件的练习吧！还是用你之前那个原始页面吧！”

“有时候为了方便，我们会在某个容器上直接写鼠标事件，比如onclick='js代码'，比如在id为main的div上面可以这样写。”

“小白，你看，main上面我写了一个onclick="clickme()"，这个意思就是说，当点击main容器的时候去执行clickme函数，clickme函数我在下方的js代码中进行了定义，在这里我用了一个小技巧，用mainHtml存储main原始的文本内容，每调用一次clickme函数num都会加1。在clickme函数内部让main的html内容发生改变，所以你可以看到这样一个效果。”

“现在我们再来看一下鼠标移入和移出事件。”

“我在main上面写了鼠标移动到main上面的事件：onmouseover="overme()"，和鼠标移出事件：onmouseout="outme()"，他们分别执行overme和outme函数。看一下效果：”

“哇，好神奇！我现在去练习！”

“小白，不要着急，我们只说了在标签上面加事件，你忘了我们的jQuery了？事件写到标签上有时会导致代码维护上的麻烦，所以我们还有一种更好的办法，就是写到js区域里面，这样无论是你自己修改代码，还是别人看代码都会一目了然。在jQuery中使用事件你需要调用click方法，比如我们把之前的click事件改成jquery方式：”

“怎么样？通过$("#main").click(clickme)就可以实现之前在容器上写事件的方法，这样做还有一个好处，假如页面上有很多的容器，有时你可能希望换一个其他容器触发clickme，这时只需换一下jQuery选择器的选择方式就可以了！jQuery里的鼠标移入事件方法是mouseover，移出是mouseout，你试着把之前的鼠标移入移出改成jQuery方式实现吧！”

“没问题，我现在就去～～”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！

jquery鼠标移入移出