目录
一、浏览器事件
事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号(但事件不仅限于 DOM)。
以下列举出了一些DOM事件
鼠标事件:
click
—— 当鼠标点击一个元素时(触摸屏设备会在点击时生成)。contextmenu
—— 当鼠标右键点击一个元素时。mouseover
/mouseout
—— 当鼠标指针移入/离开一个元素时。mousedown
/mouseup
—— 当在元素上按下/释放鼠标按钮时。mousemove
—— 当鼠标移动时。
键盘事件:
keydown
和keyup
—— 当按下和松开一个按键时。
表单(form)元素事件:
submit
—— 当访问者提交了一个<form>
时。focus
—— 当访问者聚焦于一个元素时,例如聚焦于一个<input>
。
Document 事件:
DOMContentLoaded
—— 当 HTML 的加载和处理均完成,DOM 被完全构建完成时。
CSS 事件:
transitionend
—— 当一个 CSS 动画完成时。
1.事件处理程序
为了对事件作出响应,我们可以分配一个 处理程序(handler)—— 一个在事件发生时运行的函数。处理程序是在发生用户行为(action)时运行 JavaScript 代码的一种方式。
(1).HTML特性
处理程序可以设置在 HTML 中名为 on<event>
的特性(attribute)中。HTML 特性名是大小写不敏感的。
举个例子:
<input value="Click me" onclick="alert('Click!')" type="button">
(2).DOM属性
可以使用 DOM 属性(property)on<event>
来分配处理程序。DOM 属性是大小写敏感的。
举个例子:
<input id="elem" type="button" value="Click me">
<script>
elem.onclick = function() {
alert('Thank you');
};
</script>
因为这里只有一个 onclick
属性,所以我们无法分配更多事件处理程序。
处理程序中的
this
的值是对应的元素。就是处理程序所在的那个元素。
2.addEventListener
上述分配处理程序的方式的根本问题是 —— 我们不能为一个事件分配多个处理程序。
addEventListener 和 removeEventListener