DOM 事件（鼠标事件）

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行。

鼠标事件

onclick 事件

onclick 事件会在元素被点击时发生。

<p>单击按钮触发函数。p>
<button onclick="myFunction()">点我button>
<p id="demo">p>

function myFunction(){
     
	document.getElementById("demo").innerHTML="Hello World";
}

在没有点击的时候，页面是这样的

点击之后

ondblclick 事件

ondblclick 事件会在对象被双击时发生。

<p ondblclick="myFunction()">双击这段触发一个函数p>

<p id="demo">p>

function myFunction(){
     
	document.getElementById("demo").innerHTML="Hello World";
}

未触发

双击之后

onmouseup 事件

onmousedown 事件会在鼠标按键被松开时发生。

onmousedown 事件

onmousedown 事件会在鼠标按键被按下时发生。

提示： 与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：

onmousedown
onmouseup
onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

onmousedown
onmouseup
oncontextmenu

<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
单击文本改变颜色。触发一个带参数函数,当鼠标按钮被按下,,当释放鼠标按钮，再一次触发其他参数函数
p>
//鼠标放在文本上按下按钮会变成红色，松开按钮会变成绿色

function myFunction(elmnt,clr){
     
	elmnt.style.color=clr;
}

onmouseover 事件

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

onmouseover 事件

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>函数 bigImg() 在鼠标指针移动到笑脸图片是触发。p>
<p>函数 normalImg() 在鼠标指针移出笑脸图片是触发.p>

function bigImg(x){
     
	x.style.height="64px";
	x.style.width="64px";
}
function normalImg(x){
     
	x.style.height="32px";
	x.style.width="32px";
}

当鼠标移动到笑脸上时，元素大小发生改变