JavaScript常用鼠标事件的分类和介绍②

在JavaScript 中通过鼠标触发的事件我们常用的有：
①、鼠标点击事件；
②、鼠标移入事件；
③、鼠标移出事件；
④、事件冒泡；
下面就简单的介绍一些这几种事件，以及实例中的应用。
2、鼠标移入事件：onmouseover；鼠标指针移动到指定目标时发生的事件。
3、鼠标移出事件：onmouseout；鼠标指针移出制定目标是发生的事件。
一般这两个事件是一起使用的。

两个的语法：

onmouseover="SomeJavaScriptCode"

onmouseout="SomeJavaScriptCode"

支持该事件的标签：

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, 
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, 
<thead>, <tr>, <tt>, <ul>, <var>

支持该事件的对象：

link,layer

实例：鼠标移入让DIv背景色变为红色。移出变回原有的蓝色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{padding: 100px;}
            #box{width: 200px;height: 200px;background: blue;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBox=document.getElementById('box');

                 //设置移入事件后的属性
                oBox.onmouseover=function(){
                    oBox.style.background='red';
                }
                //设置移出事件后的属性
                oBox.onmouseout=function(){
                    oBox.style.background='blue';
                }
            }
        </script>
    </head>
    <body>
        <div id="box"></div>
        <p>试试</p>
    </body>
</html>

动手试试吧！

JavaScript常用鼠标事件的分类和介绍②

悦读