JavaScript事件

   JavaScript事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间

   JavaScript 与 HTML 之间的交互是通过事件实现的。

   对于 Web 应用来说,有下面这些代表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹起事件等等

   事件就是用户与浏览器的交互行为

JavaScript事件的部分事件:


      onclick 鼠标点击某个对象 

      ondblclick 鼠标双击某个对象 

      onfocus 元素获得焦点 

      onblur 元素失去焦点

      onkeydown 某个键盘的键被按下 

      onkeypress 某个键盘的键被按下或按住 

      onkeyup 某个键盘的键被松开

      onload 某个页面或图像被完成加载 

      onmousedown 某个鼠标按键被按下 

      onmousemove 鼠标被移动 ···


   事件对象:

      鼠标 / 键盘属性

      属性 描述


      altKey 返回当事件被触发时,"ALT" 是否被按下

      button 返回当事件被触发时,哪个鼠标按钮被点击

      clientX 返回当事件被触发时,鼠标指针的水平坐标

      clientY 返回当事件被触发时,鼠标指针的垂直坐标

      ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下

      metaKey 返回当事件被触发时,"meta" 键是否被按下

      relatedTarget 返回与事件的目标节点相关的节点

      screenX 返回当某个事件被触发时,鼠标指针的水平坐标。

      screenY 返回当某个事件被触发时,鼠标指针的垂直坐

      shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下


事件对象

      当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘那个按键被按下,鼠标滚轮滚动的方向

在IE8中,响应函数被触发时,浏览器不会传递事件对象,

      在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的

javaScript点击span javascript 点击_鼠标指针

JavaScript事件冒泡(Bubble)

   所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发

   在开发中大部分情况冒泡都是有用的,如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true

javaScript点击span javascript 点击_鼠标指针_02

事件的委派

   指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件

   事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

事件对象的属性target:返回触发此事件的元素(事件的目标节点)

javaScript点击span javascript 点击_事件对象_03

 

事件的绑定

   使用 对象.事件=函数形式绑定事件

      它只能同时为同一个元素绑定同一事件一次,不能绑定多次,如果绑定多次,后面的会覆盖掉前面的

   addEventListener()

      通过这个方法也可以为元素绑定响应函数

      参数:

        1.事件的字符串,不加on

        2.回调函数,当事件触发时该函数会被调用

        3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false

      使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数

      这样当事件被触发时,响应函数将会按照函数的绑定顺序执行

      这个方法不支持IE8及以下的浏览器

   attachEvent()

      在IE8中可以使用attachEvent()来绑定事件

      参数:

        1.事件的字符串,要on

        2.回调函数

     这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反

   下面为例子:

   参数:

        obj 要绑定事件的对象

        eventStr 事件的字符串(不要on)

        callback 回调函数

javaScript点击span javascript 点击_事件对象_04

事件的传播

   关于事件的传播网景公司和微软公司有不同的理解

      微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发内容。当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应  该在冒泡阶段执行。

      网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素

W3C综合了两个公司的方案,将事件传播分成了三个阶段

   1.捕获阶段

      在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件

   2.目标阶段

      事件捕获到目标元素,捕获结束开始在目标元素上触发事件

   3.冒泡阶段

      事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true

      一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false

      IE8及以下的浏览器中没有捕获阶段

W3C:万维网联盟的简称,是Web技术领域最具权威和影响力的国际中立性技术标准机构