事件与事件流

[事件方法]

    click:当单击元素时,发生click事件。

    @dbclick:当双击元素时,发生dbclick事件。

    @focus:当元素获得焦点时,发生focus事件。

    @blur:当元素失去焦点时发生blur事件。

    @submit:当提交表单时,发生submit事件。

    @keydown:当键盘被按下时,发生keydown事件。

    @keyup:当键盘被松开,发生keyups事件。

    mouse enter:当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。

    @mousedown:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。

    mouse leave:当鼠标离开被选元素时,会发生mouseleave事件。

    @mouse move:当鼠标指针在指定的元素中移动时，会发生mousemove事件。

    @mouse out:在鼠标指针离开被选元素或任意子元素时都会被触发。

    mouse over:当鼠标指针位于元素上方时，会发生mouseover事件。

    mouse up:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生mouseup事件。

 【事件】

         JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性。

         常见的有加载事件、鼠标事件。

 【事件流】

         由于DON是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。

         页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

         

   【js的事件流三阶段】

        事件捕捉阶段( capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

        处于目标阶段(target phrase):处于绑定事件的元素上;

        事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;

        (事件捕获是从上到下,而事件冒泡,是从下到上。)

事件冒泡

 事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

        事件冒泡:

        微软提出了名为事件冒泡(event bubbling)的事件流。

        事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

        也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

        因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button-div-body-html-document。

        事件捕获:

        网景提出另一种事件流名为事件捕获(event capturing)。

        与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

        因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document=html-body-div=button。

        后来w3C采用折中的方式,平息了网景和微软之间的战争,制定了统一的标准-先捕获在冒泡。

事件对象

        用户界面事件:涉及到与BOM交互的通用浏览器事件。

        load事件:在整个页面(包括所有外部资源如图片JavaScript文件和CSS文件)加载完成后触发．

        window.onload = function() {

            alert("页面加载完成")

        };

        焦点事件:在元素获得或失去焦点时触发的事件。

        鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。

        滚轮事件:使用鼠标滚轮时触发的事件。

        输入事件:向文档中输入文本时触发的事件。

        键盘事件:使用键盘在页面上执行某些操作时触发的事件，

        输入法事件:使用某些输入法时触发的事件

事件修饰符

event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡。

以上方法需要处理DOM事件细节,代码繁琐。

为了解决这个问题,Vue.js提供了事件修饰符。

修饰符是以点开头的指令后缀来表示的。

.stop 阻止冒泡事件继续传播

<a v-on:click.stop="doThis"></a>

 .self 当事件目标是当前元素自身时,触发事件

<ul @click.self="ulclick"></ul>

.capture 将原本默认的冒泡方式改为捕捉方式

.prevent 阻止事件默认行为

@submit.prevent 提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

 .stop.prevent 修饰符可以串联,既阻止冒泡又阻止默认行为。

<a v-on:click.stop.prevent="doThat"></a>

只有修饰符

<form v-on:submit.prevent></form>