首页 > 代码库 > 2014年辛星解读Javascript之DOM之事件及其绑定

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

2024-07-14 04:14:17   226人阅读

     我们通过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事件，它通常结合对输入字段的验证来使用，比如我们可以在输入框或者密码框中使用该事件来检测用户输入的信息，而onmouseover则是在鼠标移动到HTML元素上方的时候触发，而onmouseout则是在鼠标从HTML元素上方移出的时候触发。相对于onclick这个点击过程来说，onmousedown、onmouseup就更加细致入微了，前者表示我们用鼠标点击按钮的时候触发，后者则是我们松开的时候触发。


联系
我们