JS的事件绑定

事件绑定，让网页的内容对人类的指定行为作出反应。

1 事件三要素

事件三要素是指事件源、事件、事件驱动程序。事件源指事件发生的位置，例如按钮；事件是使发生的动作，例如点击；事件驱动程序，指事件要发生的动作，例如，点击按钮一次，按钮就移动一下，这个移动的动作就是事件驱动程序。

2 绑定事件的三种方法

1. 在标签内部给事件源的事件属性赋值

   <标签名 onclick="事件驱动程序"></标签名>
   

   小案例1：点击问好按钮，弹出提示框“你好吗？”

   <button type="button" onclick="fun1()" id="bt1">问好</button>
   

   function fun1(){
   		alert('你好吗？')
   }
   

   

   函数中的this是window对象

2. 在js中给标签对应的节点的事件属性赋值

   事件源节点.οnclick=事件驱动程序对应的函数
   小案例2：点击按钮，弹出提示框。

   <button type="button" id="bt2">提问</button>
   <button type="button" id="bt3">黑鸭</button>
   

   document.getElementById('bt2').onclick=function(){
   		alert('对面你还好么？')
   }
   document.getElementById('bt3').onclick=function(){
   		alert('好吃吗？')
   }
   

   效果如下：
   

   注意：事件驱动程序对应的函数必须是普遍函数的函数名或者是匿名函数
   函数中的this是事件源

3. 在js中通过节点对象的addEventListener绑定事件
   事件源节点.addEventListener(事件名称，事件驱动程序对应的函数)

   小案例3：点击确定按钮，弹出提示框。

   <button type="button" id="btn3">确定</button>
   

   document.getElementById('btn3').addEventListener('click',function(){
   		confirm('是否删除？')
   		console.log(this)
   	})
   

   效果图如下：

   注意：这儿的事件名需要把on去掉

3 常见的事件类型（三种）

1. 鼠标相关事件（任何可见标签都可以绑定鼠标事件）
   onclick-鼠标点击事件
   onmouseover-鼠标悬停在标签上的事件
   onmousemove-鼠标从标签上离开的事件

   小案例4：按钮显示点我呀，当鼠标放在按钮上时，按钮显示点不了。

   <button type="button" id="btn1" onmouseover="dian()" onmouseout="nodian()" >点我呀</button>
   

   bt1=document.getElementById('btn1')
   	
   	function dian(){		
   		bt1.innerText='点不了'
   		bt1.style.color='red'
   	}
   	function nodian(){
   		bt1.innerText='点我呀'
   		bt1.style.color='blueviolet'
   	}
   	
   

   效果图如下：
   
   

2. 按键相关事件
   onkeydown-某个按键按下对应的事件
   onkeypress-某个按键按下对应的事件
   onkeyup-某个按键按下弹起来对应的事件
   小案例5：英文状态下，输入值，打印按键的信息。

   <input onkeypress="keyPress()" id="inp1">
   

   input1=document.getElementById('inp1')
   	input1.onkeypress=function(event){
   	console.log('按键按下',event)
   	}
   

   效果如图：

   注意：按键相关事件绑定的时候必须通过js绑定（用方法2或者方法3绑定），才可以在函数中添加事件对应的参数，来获取按键信息

3. 值改变事件
   onchange-用于检测下拉列表的选项发生改变的时候
   小案例6：

   <select name="city" id="city">
   		<option value="成都">成都</option>
   		<option value="北京">北京</option>
   </select>
   

   document.getElementById('city').onchange=function(){
   		console.log('sfdsfwf',city.value)
   	}
   

   效果如图：点击下拉框的选项，选项框的值跟着改变。