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个实例

事件冒泡

  

正方形面积

正方形的边长是{{ length }},面积是{{ area }}

你可能感兴趣的:(html5,前端,html)