javaScript HTML DOM 二事件-长相思

2014-10-30

javaScript HTML DOM 二事件

1、HTML允许java script对事件进行相应。

1）HTML 事件类型

鼠标事件

元素加载

提交表单

2）响应方法(鼠标单击事件)

可以直接在onclick后对属性进行修改，也可以选择触发函数。

当我们在写触发函数时，如果需要用当前节点的内容时，可选择传送参数this，我们在函数中可以通过this来调用该节点的属性值等等。

changeV(id)

{

id.innerHTML="hello world!"；

}

</javascript>

//以上方法都是直接向HTML元素分配事件。

另外，HTML允许用户用javaScript来为HTML分配事件

document.getElementById("pName").onclick()=change(this);

</javascript>

//特别的，这里的this指向的也是<p>的内容。

3） onload和onunload事件

onload和onunload事件是用户加载页面和离开页面时所执行的事件。

onload可以用来检测用户的浏览器的版本并且选择加载相应的正确的版本，也可以用来处理cookies。

4）onchange事件

onclick事件是控件值发生改变，并且鼠标的焦点离开当前控件才会去触发的事件。

<html>

<head>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

</body>

</html>

此例子中，当我们向输入框中输入字母，当我们的鼠标焦点离开输入框后，输入框中的字母就会全部变为大写字母。

4） onmouseover，onmouseout, onmouseup，onmousedown；

鼠标事件

onmouseover鼠标放在焦点上

onmouseout鼠标离开焦点上

特别地，鼠标释放事件和按下事件要相匹配的哦~~当事件比较简单的时候，我们可以不用写函数，可以直接在事件后写出要触发的语句，如修改CSS。

5） onfocus()焦点函数，当鼠标的焦点在当前控件时触发的函数。

<! DOCUTYPE HTML>

<html>

<head>

</head>

function myF1(v)

{

v.style.background="red";

}

function myF2(v)

{

v.style.background="black";

}

</script>

<body>

</body>

</html>