js给button绑定οnclick点击事件_（立下flag）每日10道前端面试题11 关于事件十问...-CSDN博客

本文链接：https://blog.csdn.net/weixin_28795975/article/details/113630230

这篇博客主要探讨了前端面试中关于事件的常见问题，包括三种事件模型（DOM0级、IE和DOM2级）的区别，事件流的概念，如何阻止事件冒泡和捕获，以及事件委托的原理和优缺点。此外，还讨论了JavaScript脚本加载完成的判断方法和cookie与session的区别。

摘要由CSDN通过智能技术生成

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

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

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

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

// 方式一
// 将事件直接通过属性绑定在元素上


// 方式二
// 获取到页面元素后，通过 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){

    if(e&&e.stopPropagation){
        e.stopPropagation();
    }else{

        window.event.cancelBubble = true;
    }
}

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

function stopDefault(e){

    if(e&&e.preventDefault()){
        e.preventDefault();
    }else{

        windown.event.returnValue = false
    }
}

第六问：事件的委托(代理 Delegated Events)的原理以及优缺点委托(代理)事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，

优点是：

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

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

缺点是：

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

例子：

<ul id="parent">
  <li class="child">oneli>
  <li class="child">twoli>
  <li class="child">threeli>
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.onload=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();　　 //你要做的操作。
   　　　　　 }
　　　　}

第十一问 cookie和session的区别：

①存在的位置：

cookie 存在于客户端，临时文件夹中；session存在于服务器的内存中，一个session域对象为一个用户浏览器服务

②安全性 cookie是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放；session存放于服务器的内存中，所以安全性好

③网络传输量 cookie会传递消息给服务器；session本身存放于服务器，不会有传送流量

④生命周期(以20分钟为例) cookie的生命周期是累计的，从创建时，就开始计时，20分钟后，cookie生命周期结束；session的生命周期是间隔的，从创建时，开始计时如在20分钟，没有访问session，那么session生命周期被销毁。但是，如果在20分钟内(如在第19分钟时)访问过session，那么，将重新计算session的生命周期。关机会造成session生命周期的结束，但是对cookie没有影响

⑤访问范围 cookie为多个用户浏览器共享；session为一个用户浏览器独享