2014年辛星解读Javascript之DOM之事件及其绑定

我们通过DOM的事件能够对HTML的事件作出反应。就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方。输入文字被改变。表单提交。用户点击按键等等,还是蛮多的。

以下我们用实例来演示一下,看以下的HTML代码:

<html>
<p id = "tag" onclick="this.innerHTML ='小倩' ">辛星</p>
</html>
它本来是辛星的。假设我们点击一下,它就会变成”小倩“,这里的onclick事实上就是一个点击事件,双引號里面的就是Javascript代码,那么既然是Javascript代码,我们最好还是把它们写到外面的script标签里面去,例如以下代码:
<html>
<p id = "tag" onclick="xin(this)">辛星</p>
<script type="text/javascript">
        function xin(my){my.innerHTML = "小倩";}
</script>
</html>

事实上功能和上面的代码是一样的,也是点击一下”辛星“。然后变成”小倩“。上面我们是直接写到了HTML代码里面,可能有人会问:能不能直接在Javascript中解决问题呢?答案是肯定的,例如以下代码:

<html>
<p id = "tag" >辛星</p>
<script type="text/javascript">
        document.getElementById("tag").onclick = function(){
                this.innerHTML  = "小倩";
        };
</script>
</html>
事实上也非常好理解。这也是DOM的一个绑定,仅仅是它直接在Javascript中完毕了事件的绑定。每次我们单击”辛星“这个事件触发的时候,它就会运行这个函数,这个函数的功能就是改变当中的文本显示信息。

除了onclick事件之外,还有哪些事件比較重要一些呢?首先就是onload事件,它会在用户进入页面的时候触发,而onunload会在用户离开页面的时候触发。这两个事件对于处理cookie都是不错的,关于cookie我们后面会接触到。另一个就是onchange事件。它通常结合对输入字段的验证来使用,比方我们能够在输入框或者password框中使用该事件来检測用户输入的信息,而onmouseover则是在鼠标移动到HTML元素上方的时候触发。而onmouseout则是在鼠标从HTML元素上方移出的时候触发。相对于onclick这个点击过程来说,onmousedown、onmouseup就更加仔细入微了,前者表示我们用鼠标点击button的时候触发,后者则是我们松开的时候触发。