JavaScript-如何将事件和函数绑定起来?

事件

什么是事件？

用户对于页面操作时的某种动作,如鼠标的左键单击，左键双击，划入，划出等。

事件函数的特点

全小写且以on开头！！！
例如 ：onclick on事件开头 click是事件名 点击

函数与事件的关系

事件触发时，通过用户的动作（单击，双击，划入，划出等）调用函数。

如何将事件和函数绑定起来？

将事件和函数绑定起来有两种方式：一种是通过HTML直接绑定；另一种是将HTML元素转换为JS对象，通过JS对象绑定

通过HTML直接绑定

• onclick是事件 表示点击事件 执行的操作
• 将button元素单机的事件与fun函数进行绑定
• 事件类型="函数名(）

<button onclick="fun()">点击</button>

JS

<script>
	var fun = function(){
    
    
    	console.log("通过HTML直接绑定!");
	}
</script>

通过JS对象绑定

1. HTML

	<button id="btn">点击</button>

2. 需要将HTML元素转换为JS对象

//document.getElementById("ID名"):将ID对象的HTML元素转为JS对象
  var oBtn = document.getElementById("btn");

3. 通过js对象的操作HTML元素
   如何操作JS对象: js对象.属性名

	var fun = function(){
    
    
	     console.log("通过js对象的操作HTML元素");
	 }
	oBtn.onclick = fun;

另一种写法

	oBtn.onclick = function(){
    
    
		 console.log("通过js对象的操作HTML元素2");
	}