常用的DOM事件(鼠标事件)

鼠标事件

1. onclick事件
   定义：元素被点击时触发
   语法：HTML中：< element οnclick=“SomeJavaScriptCode”>
   JavaScript中：object.onclick = function(){SomeJavaScriptCode}

<button οnclick="fun1()">点我</button>
function fun1(){
	alert("触发点击事件");
};

2. ondblclick事件
   定义：双击时触发
   语法：HTML中：< element οnclick=“SomeJavaScriptCode”>
   JavaScript中：object.ondblclick = function(){SomeJavaScriptCode}

<button ondblick="fun2()"></button>
function fun2(){
	alert("触发双击事件");
};

3. onmousedown事件
   定义：鼠标按下时触发
   语法：HTML中:< element οnmοusedοwn=“SomeJavaScriptCode”>
   JavaScript中:object.οnmοusedοwn=function(){SomeJavaScriptCode};

<input οnmοusedοwn="fun3()"/>
function fun3(){
	alert("鼠标按下");
};

4. onmouseup事件
   定义：鼠标按键松开时触发
   语法：HTML中：< element οnmοuseup=“myScript”>
   JavaScript中:object。οnmοuseup=function(){myScript};

<input οnmοuseup="fun4()"/>
function fun4(){
	alert("鼠标松开")
}

5. onmouseenter事件
   定义：鼠标移到元素上时触发
   语法：HTML中：< element οnmοuseenter=“myScript”>
   JavaScript中:object.οnmοuseenter=function(){myScript};
   JavaScript中，使用addEventListener(“mouseenter”,myScript);
   注意：该事件通常与onmouseleave事件一同使用，在鼠标指针移出元素时触发
   onmouseenter事件类似于onmouseover事件，但是，onmouseenter事件不支持冒泡
   不支持冒泡，不可以取消

<p οnmοuseenter="fun5()">移入p元素中查看效果</p>
function fun5(){
	alert("鼠标移入元素中");
}

6. onmouseleave事件
   定义：鼠标移出元素上时触发
   语法：HTML中：< element οnmοuseleave=“myScript”>
   JavaScript中:object。οnmοuseleave=function(){myScript};
   JavaScript中，使用addEventListener(“mouseleave”,myScript);
   注意：onmouseleave事件类似于onmouseout事件，但是，onmouseleave事件不支持冒泡
   不支持冒泡，不可取消

<p οnmοuseleave="fun6()">移入p元素中查看效果</p>
function fun6(){
	alert("鼠标移出元素");

7. onmouseover事件
   定义：鼠标移动到元素上时触发
   语法：HTML中：< element οnmοuseοver=“myScript”>
   JavaScript中:object。οnmοuseοver=function(){myScript};

<p οnmοuseοver="fun7()">移入p元素中查看效果</p>
function fun7(){
	alert("鼠标移入元素");

8. onmouseout事件
   定义：鼠标移出元素时触发
   语法：HTML中：< element οnmοuseοut=“myScript”>
   JavaScript中:object。οnmοuseοut=function(){myScript};

<p οnmοuseοut="fun8()">移入p元素中查看效果</p>
function fun8(){
	alert("鼠标移出元素");

9. onmousemove事件
   定义：鼠标移动到指定元素上时触发
   语法： HTML中：< element οnmοusemοve=“myScript”>
   JavaScript中:object。οnmοusemοve=function(){myScript};

<p οnmοusemοve="fun9()">移入p元素中查看效果</p>
function fun9(){
	alert("鼠标正在元素上移动");

10. oncontextmenu事件
    定义：元素中用户右击鼠标时出发并打开上下菜单
    语法：HTML中：< element οncοntextmenu=“myScript”>
    JavaScript中:object。οncοntextmenu=function(){myScript};
    JavaScript中，使用addEventListener(“contextmenu”,myScript);
    注意：所有浏览器都支持oncontextmenu事件，contextmenu元素只有firefox浏览器支持
    IE8及更早IE浏览器版本不支持addEventListener()
    支持冒泡，可以取消

<div οncοntextmenu="fun()" contextmenu="mymenu">
        <p>在文本框内右击鼠标查看上下文菜单</p>
     <menu type="context" id="mymenu">
        <menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"></menuitem>
     </menu>
    </div>
<script>
	function fun(){
 		alert("你在div元素总点击鼠标了右键");
   };
</script>