常用的事件

通过事件机制，达到与用户的交互，与java的swing交互类似。


主要是结合js的函数使用。


当你添加一个事件之后没有达到想要的效果时，就要检查一下是不是给HTML标签添加了合适的事件，以及是否有其他的方式可以更好的达到这种效果。（靠经验）


避免事件之间的冲突（双击、单击不能同时存在）


单 / 双击事件
鼠标事件
键盘事件
交点事件
页面加载事件
值改变事件
示例1

<html>
	<head>
  <title>js的事件机制学习1</title>
  <meta charset="UTF-8"/>
  <!--
  	js的事件机制：
    解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
    作用：主要是结合js的函数来使用。
    内容:
    	1、单双击事件
      单击：onclick    	当鼠标单击的时候会触发
      双击：ondblclick  当鼠标双击的时候会被触发
    	2、鼠标事件
      onmouseover  	当鼠标悬停在某个HTML元素上的时候触发
      onmousemove  	当鼠标在某个HTML元素上移动的时候触发
      onmouseout  	当鼠标在某个HTML元素上移出的时候触发
    	3、键盘事件
      onkeyup    当键盘在某个HTML元素上弹起的时候触发
      onkeydown  	当键盘在某个HTML元素上下压的时候触发
    	4、焦点事件
      onfocus    当某个HTML元素获取焦点的时候触发
      onblur    当某个HTML元素失去焦点的时候触发
    	5、页面加载事件  	
      onload    当页面加载成功后触发。
    注意:
    	js中添加事件的第一种方式：
      在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
    	js中的事件只有在当前HTML元素上有效。
    	一个HTML元素可以添加多个不同的事件。
    	一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
  -->
  <!--声明js代码域-->
  <script type="text/javascript">
  	/*声明js函数*/
    //单击事件
    	function testOnclick(){
      alert("我是单击");
    	}
    //测试双击
    	function testOndblclick(){
      alert("我是双击");
    	}
    //鼠标事件
    	function testOnmouseover(){
      alert("我是鼠标悬停事件");
    	}
    	
    	function testOnmousemove(){
      alert("我被移动了");
    	}
    	
    	function testOnmouseout(){
      alert("我被移出了");
    	}
    //键盘事件
    	function testOnkeyup(){
      alert("我是键盘弹起事件");
    	}
    	
    	function testOnkeydown(){
      alert("我是键盘按下事件");
    	}
    //焦点事件
    	function testOnfocus(){
      document.getElementById("showdiv").innerHTML="哈哈";
      alert("我是获取焦点事件");
    	}
    	
    	function testOnblur(){
      alert("我是失去焦点事件");
    	}
    //页面加载
    	function testOnload(){
      alert("我是页面加载事件");
    	}
    //测试
    	function test(){
      alert("测试一个事件的多个函数执行");
    	}
  </script>
  <style type="text/css">
  	#showdiv{
    width: 300px;
    height: 300px;
    border: solid 1px;
  	}
  </style>
	</head>
	<body onload="testOnload()">
  <h3>js的事件机制学习1</h3>
  <hr />
  <input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
  <input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
  <hr />
  <br /><br />
  <div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
  	
  </div>
  <hr />
  键盘事件学习：	<br />
  	键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
  	键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
  <hr />
  	焦点事件学习：<br />
    获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
    失去焦点： <input type="text" name="" id="" value=""  onblur="testOnblur();"/>
	</body>
</html>


示例2

事件的阻断

<html>
	<head>
  <title>js的事件机制二</title>
  <meta charset="UTF-8"/>
  <!--

  js的事件机制学习2：

1、给合适的HTML标签添加合适的事件
    	onchange----select下拉框
    	onload------body标签
    	单双击-------用户会进行点击动作的HTML元素
    	鼠标事件------用户会进行鼠标移动操作的。
    	键盘事件------用户会进行键盘操作的HTML元素。
    2、给HTML元素添加多个事件时，注意事件之间的冲突
    	举个栗子：单击和双击
    	当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
    3、事件的阻断
    	当事件所监听的函数的将返回值返回给事件时：
      false：则会阻断当前事件所在的HTML标签的功能
      true:则继续执行当前事件所在的HTML标签的功能
    4、超链接调用js函数
    	<a href="javascript:函数名()">调用js函数</a>  	
  -->
  <script type="text/javascript">
  	
  	//值改变事件
    function testOnchange(){
    	alert("我被改变了");
    }
  	//单击事件
    function testOnclick(){
    	alert("今天天气真好，不冷不热，贼适合学习");
    }
  	//双击事件
    function testOndblclick(){
    	alert("老师说的对");
    }
  	//事件的阻断
    function testA(){
    	alert("事件的阻断");
    	return true;
    }
  	//超链接调用js函数
    function testHref(){
    	alert("我是超链接调用");
    }
  	
  	
  </script>
	</head>
	<body>
  <h3>js的事件机制二</h3>
  <hr />
  值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
  <br /><br />
  <select name="" id="" onchange="testOnchange();">
  	<option value="">北京</option>
  	<option value="">上海</option>
  	<option value="">广州</option>
  </select>
  <hr />
  事件的冲突：<br />
  	<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
  <hr />
  事件的阻断：先走onclick事件触发的js事件，然后再走href的超链接。 如果js代码的返回值为false，则事件被阻断。<br />
  	<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
  <hr />
  超链接调用js函数:
  	<a href="javascript:testHref()">调用js函数</a>
	</body>
</html>