关于【事件】十问（读《红宝书》）

Question

关于【事件】十问（读《红宝书》）

Opened this issue 2 years ago · 0 comments

第一问：请介绍下事件模型

目前共有三种事件模型，它们分别是：

DOM0 级事件模型、IE 事件模型、DOM2 级事件模型

DOM0 级事件模型 又称原始事件模型，有两种方式，最直观的提下如下代码：

// 方式一
// 将事件直接通过属性绑定在元素上
<button οnclick="clickBtn()"></button>

// 方式二
// 获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件
// 取消该事件可直接设置为 null
var btn = document.getElementById(‘btn’)
btn.onclick = function () {…}
btn.onclick = null

DOM0 级的事件模型，方法较为简单，但是将逻辑和界面耦合在了一起，对之后的维护不是很友好

但也不是没有优点，这种方式兼容所有浏览器

IE 事件模型 IE 事件模型一共有两个阶段：

事件处理阶段：事件在达到目标元素时，触发监听事件

事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行绑定和移除事件的 api 分别如下：

// 绑定事件
el.attachEvent(eventType, handler)

// 移除事件
el.detachEvent(eventType, handler)

参数说明：

eventType 是如onclick一样的带有”on“的事件，绑定事件时，handler可以是具名函数，也可以是匿名函数，但是匿名函数无法移除

我们会发现，IE 事件模型与我们平时用的事件绑定方法addEventListener，也就是下面要说的 DOM2 级事件模型有点相似，但是 IE 事件模型仅在 IE 浏览器中有效，不兼容其他浏览器

DOM2 级事件模型 W3C标准模型，也是我们频繁使用的事件模型，除 IE6-8 以外的所有现代浏览器都支持该事件模型

DOM2 级事件模型共有三个阶段：

事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行

事件处理阶段：事件在达到目标元素时，触发监听事件

事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

function a() {   ...   }

function b() {   …   }

input.addEventListener( “click” ,a)

input.removeEventListener( “click” ,a)

第二问：介绍下这三种事件模型的区别

Dom0 模型：

this指向：指向函数中的this指向的是被绑定的元素
绑定多个同事件类型的事件时，如对同个元素绑定多个 click，则后面的会覆盖前面的，最后只有一个会执行

IE 模型：

this指向：指向函数中的this指向的是** window**
绑定多个同事件类型的事件时，如对同个元素绑定多个 click，则后面的不会覆盖前面的，执行顺序是先执行下面的，从下往上执行
只有两个参数：第一个参数为事件类型，第二个为事件执行函数
目标阶段，事件冒泡阶段
获取目标元素： window.event.srcElement
Dom2 模型：
this指向：指向函数中的this指向的是被绑定的元素
绑定多个同事件类型的事件时，如对同个元素绑定多个 click，则后面的不会覆盖前面的，执行顺序是先执行上面的，从上往下执行
有三个参数：第一个参数为事件类型，第二个为事件执行函数，第三个为布尔值，表示是否用事件捕获
有事件捕获阶段，处于目标阶段，事件冒泡阶段
获取目标元素： event.target 欢迎补充。。。

第三问：请介绍下事件流？

事件流所描述的就是从页面中接受事件的顺序，事件流分为两种：事件冒泡（主流）和事件捕获. 版本IE（IE8及以下版本）不支持捕获阶段

1、事件冒泡

事件开始时由具体元素接收，然后逐级向上传播到父元素

2、事件捕获

父元素的节点更早接收事件，而具体元素最后接收事件，与事件冒泡相反

第四问怎么阻止事件冒泡和事件捕获以及默认事件？

阻止事件冒泡：使用 e.stopPropagation(); IE使用 window.event.cancelBubble = true;

function stopBubble(e){
     <!--如果提供了事件对象，则这是个非IE浏览器-->
    if(e&&e.stopPropagation){
        e.stopPropagation();
    }else{
        <!--我们需要使用IE的方式来取消事件冒泡-->
        window.event.cancelBubble = true;
    }
}

阻止事件捕获：与冒泡一样使用e.stopPropagation()，IE没有捕获阶段，所以不用阻止默认事件：

function stopDefault(e){
    <!--阻止默认行为W3C-->
    if(e&&e.preventDefault()){
        e.preventDefault();
    }else{
        <!--IE中阻止默认行为-->
        windown.event.returnValue = false
    }
}

第六问：事件的委托（代理 Delegated Events）的原理以及优缺点

委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，

优点是：

（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

缺点是：

事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

例子：

<ul id="parent">
  <li class="child">one</li>
  <li class="child">two</li>
  <li class="child">three</li>
</ul>
 
<script type="text/javascript">
  //父元素
  var dom= document.getElementById('parent');
 
  //父元素绑定事件，代理子元素的点击事件
  dom.οnclick= function(event) {
    var event= event || window.event;
    var curTarget= event.target || event.srcElement;
 
    if (curTarget.tagName.toLowerCase() == 'li') {
      //事件处理
    }
  }
</script>

要求：兼容浏览器考点：事件对象e，IE下事件对应的属性名。重点是要说到target,currentTarget以及IE下的srcElement和this。

第七问：编写一个自定义事件类，包含on/off/emit/once方法

可能谈到Evnet，customerEvent，document.createEvent

第八问：怎样判断js脚本是否加载完，并在加载完后进行操作

在工作过程中，经常会遇到按需加载的需求，即在脚本加载完成后，返回一个回调函数，在回调函数中进行相关操作，那如何去判断脚本是否加载完成了呢？

可以对加载的js对象使用onload来判断，jsDom.onload

ie6、7不支持js.onload方法，使用js.onreadystatechange来解决 js.onreadystatechange来跟踪每个状态的变化（loading、loaded、interactive、complete），当返回状态为loaded或者complete时，表示加载完成，返回回调函数.

function loadJsAsync(url){
    var body = document.getElementsByTagName('body')[0];
    var jsNode = document.createElement('script');

    jsNode.setAttribute('type', 'text/javascript');
    jsNode.setAttribute('src', url);
    body.appendChild(jsNode);

    if (jsNode.onload) {
        jsNode.onload = function() {
            // do something
        }
    } else {
        // ie6, ie7不支持onload的情况
        jsNode.onreadystatechange = function() {
            if(jsNode.readyState == 'loaded' || jsNode.readyState == 'complete') {
                // 异步js加载完毕
                // do something执行操作
            }
        }
    }
}

第九问：上面的代码中，script脚本是什么时候开始加载的？

在 body.appendChild(jsNode);这一步，即添加到文档上后开始加载，这跟image不同，image是 image.src = url后开始加载

第十问如何判断页面是否加载完成？

方式一：window.onload：

当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

  window.οnlοad=function(){

dosth//你要做的事情

}

方式二：$(document).ready()：

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。

$(document).ready(function(){

dosth//你要做的事情

})

注意：页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)

方式三：用document.onreadystatechange的方法来监听状态改变，然后用document.readyState == “complete”判断是否加载完成,需要的朋友可以参考下，用document.onreadystatechange的方法来监听状态改变，然后用document.readyState == “complete”判断是否加载完成 document.onreadystatechange = function() //当页面加载状态改变的时候执行function

{ 

if(document.readyState == “complete”)

{   //当页面加载状态为完全结束时进入
     init();   //你要做的操作。
  }
}