JavaScript事件鼠标移上时和离开时发生的事件

JavaScript鼠标事件。什么是JS事件，就是当你的鼠标进行操作时会发生怎样的事情，比如鼠标点击时会发生什么、鼠标移上去时又会发生什么、离开时等将会发生都称之为“事件”。一旦我们要它发生怎样怎样的事件，就可以为其写函数“function”。

下面建一个DIV来测试，并为DIV规定样式。代码如下：

﹤div id="juli" οnmοuseοver="onOver()" οnmοuseοut="onOut()"﹥JavaScript 事件﹤/div﹥

JavaScript 事件

上述代码解释：div的ID名“juli”；鼠标移上去时命名为“onOver”发生；鼠标移开时命名为“onOut”发生。

为id名为“juli”的div设定样式，CSS代码如下：
#juli {width:200px; height:150px; background:#f30; color:#fff}

下面为其写“function”函数执行要发生的事件：

﹤script﹥
function onOver(){
var x=document.getElementByIdx_x_x_x_x_x_x_x("juli");
x.innerHTML="鼠标移上DIV时所要展示的文字";
}
﹤/script﹥

 

首先写第一个“function”
找到第一个要发生的事件，找到它的名称为“onOver”，如何找到？就是“function onOver()”
然后为该HTML元素赋值为“x”，如何赋值？代码为：var x=document.getElementByIdx_x_x_x("juli");
再写代码x.innerHTML=""里面的文字用于要发生的内容
这时打开文档刷新预览，当鼠标移上名称为“juli”的div元素上时，div中的文本内容会变成：鼠标移上DIV时所要展示的文字。

然后写第二个“function”
找到第二个要发生的事件，找到它的名称为“onOut”，如何找到？就是“function onOut()”
同样为该HTML元素赋值为“x”，如何赋值？代码为：var x=document.getElementByIdx_x_x_x("juli");
再写代码x.innerHTML=""里面的文字用于要发生的内容
这时打开文档刷新预览，当鼠标移上名称为“juli”的div元素上时，div中的文本内容会变成：鼠标移开时显示了这个内容。

打开文档预览效果如下：

下面列出一些常见JS发生事件
onclick 》单击事件。鼠标点击一个对象时
ondblclick 》双击事件。鼠标双击一个对象时
onmousedown 》鼠标点击事件。鼠标被按下时
onmousemove 》鼠标被移动时
onmouseout 》鼠标移出事件。鼠标离开元素时
onmouseover 》鼠标经过事件。鼠标经过元素时
onmouseup 》释放鼠标按键时
onchange 》文本内容改变事件。
onselect 》文本框选中事件。
onfocus 》光标聚集事件。当元素获取焦点时
onblur 》移开光标事件。元素失去焦点时
onload 》网页加载事件。页面或图片加载完成时
onunload 》关闭网页事件。用户离开页面时