JavaScript DOM事件

一.事件简介
事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间- ,avaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说,有下面这些代表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。例如,onclick 鼠标点击某个对象。
例子:JavaScript DOM事件
二.文档的加载
浏览器在加载一个页面时,是按照自上而下的顺序加载的,读取到一行的时候就运行一行,如果将script标签写在上面,在执行代码时,页面还没有加载。从性能方面考虑,将js代码写在页面的下面,就是为了保证执行代码的时候页面已经加载完毕。如果将js代码放在元素的前面就有可能会报错,当代码报错时我们可以为window绑定一个onload事件,onload事件会在整个页面加载完成之后触发。
例子:JavaScript DOM事件
三.事件对象(Event)
在这里我使用了onmousemove事件对象,运用onmousemove事件和两个鼠标/键盘属性clientX 、clientY,clientX返回当事件被触发时,鼠标指针的水平坐标。clientY返回当事件被触发时,鼠标指针的垂直坐标。
例子:JavaScript DOM事件
四.事件冒泡
所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true。
例子:JavaScript DOM事件
五.事件的委派
事件的委派指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。 事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
例子:JavaScript DOM事件