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对象绑定
- HTML
<button id="btn">点击</button>
- 需要将HTML元素转换为JS对象
//document.getElementById("ID名"):将ID对象的HTML元素转为JS对象
var oBtn = document.getElementById("btn");
- 通过js对象的操作HTML元素
如何操作JS对象: js对象.属性名
var fun = function(){
console.log("通过js对象的操作HTML元素");
}
oBtn.onclick = fun;
另一种写法
oBtn.onclick = function(){
console.log("通过js对象的操作HTML元素2");
}