事件基础
一、事件
事件是什么?
举个例子,我们在点击一个按钮时,会弹出一个对话框。其中,“点击”就是一个事件,“弹出对话框”就是我们在点击这个事件后发生的动作。
在JS中,一个事件应该有三个部分:
• 事件主角
• 事件类型
• 事件过程
那么常见的事件共有以下五种:
• 鼠标事件
• 键盘事件
• 表单事件
• 编辑事件
• 页面事件
事件的调用方式
1. 在script标签中调用事件
oBtn.onclick = function() {alert("xff贼帅");};
如何理解上面这句在script标签中出现的语句?
其实就是给oBtn元素的onclick属性(某一HTML属性)赋值,只不过这个值是一个函数罢了。
2. 在元素中调用事件——这一方式其实就是上一句话更直观的体现
<input type="button" onclick="alert('xff贼帅')" value="弹出"/>
在本方法中,我们是不需要通过getElementById或getElementsByTagName等方法获取元素的,因为系统已经知道时间的主角是哪个元素了。
注:对比1.2.两种方法,在实际开发中,我们更加倾向于第一种方法,因为这样可以将HTML(结构)与JS(行为)分离,使代码更具有可读性和维护性。