10.19课堂记录

5、事件与事件流

01-事件与事件流

//【事件】
//Javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。
//常见的有加载事件、鼠标事件。

//【事件流】
//由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流。
//页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流。

//【js的事件流三阶段】
//事件捕捉阶段（capture phrase）：事件开始由顶层对象触发，然后逐级向下传播，直到目标元素；
//处于目标阶段（target phrase）：处于绑定事件的元素上；
//事件冒泡阶段（bubbling phrase）：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；
//（事件捕获是从上到下，而事件冒泡，是从下到上。）

02-事件冒泡与事件委托

//事件冒泡和事件捕获分别由微软和网景公司提出，是为了解决页面中事件流（事件发生顺序）的问题。
        
        //事件冒泡：
        //微软提出了名为事件冒泡（event bubbling）的事件流。
        //事件冒泡可以形象的比喻成把一颗石头投入水中，泡泡会一直从水底冒出水面。
        //也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
        
        //因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button>div>body>html→document。
        //事件捕获；
        //网景提出另一种事件流名为事件捕获（event capturing）。
        //与事件冒泡相反，事件会从最外层开始发生，直到具体的元素。
        //因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document>html→body>div>button。
        //后来W3C采用折中的方式，平息了网景和微软之间的战争，制定了统一的标准一先捕获再冒泡。

03-事件对象（练习未完成）

// 用户界面事件：涉及到与BOM交互的通用浏览器事件
        // load事件：在整个页面（包括外部资源如图片 JavaScript文件和css文件加载完成后触发
        window.onload = function(){
            alert("页面加载完成")
        };

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

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

        // 滚轮事件：使用鼠标滚轮触发的事件

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

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

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

        // 作业：7个事件，3-5个实例

事件冒泡

  <script>
        new Vue({
            el:'#app',
            methods:{
                divCL(){
                    console.log('div');
                },
                ulCl(evt){
                    console.log('ul');
                },
                liCl(evt){
                    console.log('li');
                    // 使用JS原生方法阻止事件冒泡
                    // evt.stopPropagation()
                }
            }
        })
    </script>

正方形面积

<div id="app">

        <!-- 方法一：以内联方式相应事件 -->
        <!-- <button @click="length ++">改变边长</button> -->

        <!-- 方法二：绑定方法处理事件 -->
        <button v-on:click="changeLength">改变边长</button>
        <p>正方形的边长是{{ length }},面积是{{ area }}</p>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                length:4
            },
          
            computed:{
                area(){
                    return this.length*this.length
                }
                },
                methods:{
                changLength(){
                    this.length++
                }
            }
        })

3、01-事件修饰符使用

【事件方法】
// @click：当单击元素时，发生click事件。
// @dbclick：当双击元素时，发生dbclick事件。
// @focus：当元素获得焦点时，发生focus事件。
// @blur：当元素失去焦点时发生blur事件。
// @submit：当提交表单时，发生submit事件。
// @keydown：当键盘被按下时，发生keydown事件。
// @keyup：当键盘被松开，发生keyups事件。
// @mouse enter：当鼠标指针穿过（进入）被选元素时，会发生mousedown事件。
// @mouse down：当鼠标指针移动到元素上方，并按下鼠标左键，会发生mousedown事件。
// @mouse leave：当鼠标离开被选元素时，会发生mouseleave事件。
// @mouse move：当鼠标指针在指定的元素中移动时，会发生mousemove事件。
// @mouse out：在鼠标指针离开被选元素或任意子元素时都会被触发。
// @mouse over：当鼠标指针位于元素上方时，会发生mouseover事件。
// @mouse up：当鼠标指针移动到元素上方，并松开鼠标左键时，会发生mouseup事件

3、02事件修饰符详解

<!-- 事件修饰符
        event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡。
        以上方法需要处理DOM事件细节，代码繁琐
    为了解决这个问题，Vue.js提供了事件修饰符
修饰符是以点开头的指令后缀来表示的 -->

<!-- .stop阻止冒泡事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- .self当事件目标是当前元素自身时，触发事件 -->
<ul @click.self="ilClick"></ul>

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

<!-- .prevent 阻止事件默认行为 -->
<!-- @submit.prevent 提交数据不再重载页面 -->
<from v-on:submit.prevent="onSubmit"></from>

<!-- .stop.prevent修饰符可以串联，既可以阻止冒泡又阻止默认行为 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有1修饰符 -->
<form @sunmit.stop.prevent></form>