JavaScript入门学习之事件处理

一、事件与事件处理概述

事件处理过程：

a.发生事件；

b.启动事件处理程序；

c.事件处理程序作出反应。

=================================

在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序。有一下两者方式：

1.在JavaScript中：（在下面两段代码中，一定要将<input/>放在<script/>代码上方，否则会弹出‘b_save为空或不是对象’的错误提示），还有一点就是，在测试过程中，我发现用id属性的值和name属性的值都是可以的。。

<input id="save" name="bt_save" type="button" value="保存"/>
	<script type="text/javascript">
		var b_save = document.getElementById("save");
		b_save.onclick = function(){
			alert("单击了保存按钮");
		}
	</script>

或

<form id="f_form1" name="form1" method="post" action="">
	<input id="save" name="bt_save" type="button" value="保存"/>
</form>
	<script language="javascript">
		//var b_save = document.getElementById("save");
		f_form1.save.onclick = function(){
			alert("单击了保存按钮");
		}
	</script>

2.在HTML中：

<input name="bt_name" type="button" value="保存1" onclick="alert('单击了保存按钮')" />

或（PS：此时<script>代码放的位置没有要求）

<input name="bt_name" type="button" value="保存2" onclick="clickFunction();"/>
<script type="text/javascript">
	function clickFunction(){
		alert("单击了保存按钮");
	}
</script>

二、DOM事件模型

1.事件流：DOM（文档对象模型）结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程可称为DOM事件流。

2.主流浏览器的事件模型：

a.冒泡型事件;

b.捕获型事件;

c.DOM标准事件模型。（可以说是上述两个的结合体）

3.事件对象event

4.注册和移除事件监听器

JavaScript入门学习之事件处理

猜你喜欢