事件

1.引入

? ?我们在网站中经常可以看见这样的操作，当我们点击某一个按钮或者是在浏览器上进行相关的操作的时候，页面会随着我们的操作做出相关的响应，那么这一些通过鼠标或按键在浏览器窗口或者网页上执行的操作就就是事件。如果将一段程序代码与某一个事件进行绑定，那么只要触发此事件，浏览器就会自动执行与之绑定的程序代码，这一个过程我们称之为事件驱动。其中对事件进行处理的程序代码或者是函数称为事件处理程序。

2.事件

? ?HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。简单的说就是给页面添加的一系列动作。

3.事件的绑定

? ?事件的绑定一般情况有两种，一种是使用JavaScript代码设置元素的对象的事件属性，即让事件的值等于处理该函数的名称或者是程序代码，另外一种是直接在html标签上添加一个处理的事件属性，让事件的值等于处理该函数的名称或者是程序代码。下面我们详细讲解这两种方法。

(1).方式1:页面标签添加事件，然后通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

语法:
<element event='事件名称'>

<input type="button" value="获取当前的时间" onclick="showCurrentDate()"/>

<script type="text/javascript">
   function showCurrentDate(){
	 document.write("当前的时间是:" + new Date())
   }
</script>

?(2).方式2:使用JavaScript代码设置元素对象的事件属性。

<input type="button" id="getDate" value="获取当前的时间" />
		
<script type="text/javascript">
  function showCurrentDate(){
	document.write("当前的时间是:" + new Date())
  }
		  
   //设置id为getDate的标签添加相应的事件,注意，这里加的是事件对象，而不是函数
   document.getElementById("getDate").onclick = showCurrentDate;
</script>

?4.常用事件

? ? JavaScript定义了一些常用的事件，下面我们一起来看一下这一些事件。

? ?(1).onchange事件:

? ? ? ? ①:概述: 当html元素改变的时候，该事件被触发。一般是表单的元素被修改的时候触发这一个事件。

? ? ? ? ②:onchange事件使用以及效果截图

<form action="#" method="post">
   <p>你的专业是:
   <select name="major" onchange="getSelect(this)">
	  <option value="计算机应用技术">计算机应用技术</option>
	  <option value="大数据">大数据</option>
	  <option value="人工智能">人工智能</option>
	  <option value="数据挖掘">数据挖掘</option>
	</select>
	</p>
</form>

<script type="text/javascript">
   function getSelect(obj){
		alert("你选择的是专业是:" + obj.value);
   }
</script>

? ?(2).onclick事件:

? ? ? ? ①:概述: onclick事件是鼠标单击页面元素的时候触发的事件。

? ? ? ? ②:onclick事件使用以及效果截图

<form action="#" method="post">
   <p>你的性别是:
	  男<input type="radio" name="sex" value="男" onclick="choeseSex(this)"/>
	  女<input type="radio" name="sex" value="女" onclick="choeseSex(this)"/>
	</p>
</form>
<script type="text/javascript">
  function choeseSex(obj){
	alert("你选择的是性别是:" + obj.value);
  }
</script>

?(3).onmouseover/onmouseout

? ? ? ? ①:概述:?onmouseover/onmouseout是鼠标移动事件，分别指鼠标移动到html页面元素和离开页面元素的时候触发该事件。

? ? ? ? ②:onmouseover/onmouseout事件使用以及效果截图

<style type="text/css">
   .box{
	  width: 450px;
	  height: 250px;
	  line-height: 250px;
	  border: 1px solid red;
	  text-align: center;
	  font-size: 18px;
	  font-family: "宋体";
	  color: #ff0000;
   }
</style>

<body>
  <div class="box" id="box" onmouseover="change(this)" onmouseout="leave(this)">
	 这是一个页面盒子。
  </div>
		
  <script type="text/javascript">
	 function change(obj){
	   obj.style.backgroundColor = '#00aa00';
	 }
			
	 function leave(obj){
		obj.style.backgroundColor = '#5500ff';
	 }
  </script>
</body>

(4).onload事件:

? ? ?①:概述: onload事件会在页面加载完成之后触发该事件。该事件一般可以用于进行页面数据初始化的时候使用的数据加载操作。

? ? ?②:onload事件使用以及效果截图

<body>
   <div class="box" id="box">
   </div>
		
   <script type="text/javascript">
	  window.onload = function(){
	    document.getElementById("box").innerHTML= "<p>你好，世界！</p>";
	  }
   </script>
</body>

(5).onblur事件:

?①:概述: onblur事件是指光标或者焦点离开元素之后触发的事件。一般可以作为表单的数据验证操作。

?②:onblur事件使用以及效果截图

<form action="#" method="post">
   <p>姓名:<input type="text"  onblur="checkIsEmpty(this)"/></p>
</form>
		
<script type="text/javascript">
  function checkIsEmpty(obj){
	 if(obj.value == ""){
		alert("请输入内!");
	  }else{
		alert("你输入的内容是:" + obj.value);
	  }
  }
</script>