xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > Javascript中DOM事件的优化总结

Javascript中DOM事件的优化总结

发布时间:2019-11-21 06:25编辑:计算机尝试浏览(82)

    本小说来给诸位同学百使用Javascript中DOM事件的有个别优化体会,固然以后众多个人接受了jquery插件,可是dom事件仍然很着重的三个东西,上面小编来享受优化心得。

    事件

    就是事件管理程序,也正是事件发生后的拍卖动作,对应到浏览器的并行模型中,客户点击了二个按键,那就是叁个事变,也正是发生了客户点击开关这么件事,对应的做法正是大家提前写好的事件管理程序推行

    1.dom对象的innerText和innerHTML有何样分别?

    • innerHTML富含了对象从开场到终止的全体内容,<>&此类符号会被替换到相应字符
      <pre>
      <div className="one">
      <span>hello<>&world</span>nihaoshijie
      </div>
      //document.getElementById('one').innerHTML就是<span>hello<>&world</span>nihaohsijie
      </pre>

    • innerText包涵了该对象从最早地方到终止的具备除标签的内容
      <pre>
      <div className="one">
      <span>hello<>&world</span>nihaoshijie
      </div>
      //这里的document.getElementById('one').innerText包含了hello<>&worldnihaohsijie
      </pre>

    事件(Event)

    在 JavaScript 程序的支出中,经常会用到部分屡次接触的 DOM 事件,如 mousemove、resize,还会有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll)。

    事件流

    事件流描述的是从页面中接纳事件的依次,举个例子有三个嵌套的div,点击了内层的div,此时是内层的div先触发click事件只怕外层先触发?近来首要有三种模型

    IE的风浪冒泡:事件始于时由最具体的因素选拔,然后逐级向上传播到较为不具体的要素

    Netscape的风浪捕获:不太现实的节点更早采取事件,而最切实的因素最后接纳事件,和事件冒泡相反

    DOM事件流:DOM2级事件规定事件流包罗多少个等第,事件捕获阶段,处于目的阶段,事件冒泡阶段,首首发出的是事件捕获,为截取事件提供时机,然后是实在指标接受事件,最后是冒泡阶段。

    2.elem.children和elem.childNodes的区别?

    • elem.childern是非标准属性,然则得到了大多浏览器的支撑。它回到内定成分的子成分合集。只回去HTML节点不回去文本。
      <pre>
      <div className="one">
      <span>hello<>&world</span>nihaoshijie
      </div>
      //这里children返回[<span>hello<>&world</span>]
      </pre>
    • elem.childNodes是正经属性,再次来到节点的子节点会集,包涵HTML节点,属性和文件。
      <pre>
      <div className="one">
      <span>hello<>&world</span>nihaoshijie
      </div>
      //这里childNodes再次回到三个类数组对象。
      </pre>

    在Javascript中处管事人件的函数被叫作事件侦听器,就好像C#中的事件订阅者的平地风波微机。要接触一个风浪必得首先登场记(订阅卡塔尔事,当事件被触发时,事件侦听器就能够做出响应(invoke事件侦听卡塔尔国。

    浏览器为了有限支撑这么些事件能够马上响应,触发的作用会比较高,具体的触发频率各浏览器纵然有出入,但出入非常的小。超多时候在需求侧重质量的场景下选用这个事件会想各样措施对事件的触发频率举办优化,上面说说作者的后生可畏都部队分优化措施。

    事件管理程序

    大家也叫做事件侦听器(listener卡塔尔,事件正是客商或浏览器本人推行的某种动作。比如click、load、mouseover等,都是事件类型(俗称事件名称卡塔 尔(阿拉伯语:قطر‎,而响应有个别事件的主意就称为事件管理程序照有趣的事件监听器

    3.查询成分有二种不认为奇的艺术?

    • getElementById() 重回具有钦定ID的首先个目的的援用
    • getElementsByClassName()重回具备钦赐类名的类数组对象
    • getElementBytagName()重临带有钦赐标签字的类数组对象
    • querySelector() 重返具备钦点css选择器的率先个要素
    • querySelectorAll()重回具有内定css接收器的类数组对象

    自定义事件

    mousemove 在拖拽中的优化 拖拽( Drag )是很广阔的二个效率,在浏览器还未有达成原生的拖拽早先,通过 mousedown、mousemove、mouseup 3种事件类型就能够效仿出拖拽效果来,当然这里不谈怎样去贯彻一个拖拽功效。

    事件管理程序

    Javascript中DOM事件的优化总结。作者们也称得上事件侦听器(listener卡塔尔国,事件就是客户或浏览器自己施行的某种动作。比如click、load、mouseover等,都是事件类型(俗称事件名称卡塔尔,而响应某些事件的秘技就叫做事件处理程序依有趣的事件监听器

    也正是我们须求超前定义好一些事件时有产生了该怎么管理,这些过程叫做绑定事件管理程序,掌握了那么些,大家看看如何给成分增添事件管理程序

    生机勃勃种是HTML内嵌形式

    风度翩翩种是JAVASC凯雷德IPT内定的管理程序

    由此JavaScript钦赐事件管理程序正是把多少个主意赋值给三个元素的事件管理程序属性。

    <input id="btnClick" type="button" value="Click Here" />
    
    <script type="text/javascript">
        var btnClick = document.getElementById('btnClick');
        btnClick.onclick = function showMessage() {
            alert(this.id);
        };
    
        btnClick.onclick = function showMessage() {
            alert("Hello,world");
        };
    </script>
    

    那样管理,事件管理程序被以为是因素的章程,事件管理程序在要素的成效域下运维,this正是当前成分,所以点击button结果是:btnClick

    那样还会有一个利润,大家得以去除事件管理程序,只需把成分的onclick属性赋为null就可以

    DOM2级事件定义了七个办法用于拍卖钦命和删除事件管理程序的操作:

    addEventListener
    removeEventListener
    有着的DOM节点都带有那四个艺术,並且它们都领受多少个参数:

    1.平地风波类型
    2.事件管理方法
    3.布尔参数,固然是true表示在捕获阶段调用事件管理程序,如若是false,则是在事变冒泡阶段处理
    刚刚的例子大家能够这么写

    <input id="btnClick" type="button" value="Click Here" />
    
    <script type="text/javascript">
        var btnClick = document.getElementById('btnClick');
        btnClick.addEventListener('click', function() {
            alert(this.id);
        }, false);
    
    btnClick.addEventListener('click', function() {
            alert('Hello!');
        }, false);
    </script>
    

    可是有一个好处,大家得认为click事件增加四个管理程序.

    那么 DOM0 事件和DOM2级在事变监听使用格局上有啥差距?
    Dom0 定义的事件:后边的会覆盖后边的onclick,也会覆盖行内的onclick。

    而DOM2 则不会现出前边的风云覆盖前面包车型客车轩然大波。

    4.怎么样创立三个元素?如何给成分设置属性?

    • createElement()创设一个节点成分
    • createTextNode()创设三个文本节点
    • setAttribute()来设置属性

    登记事件

    mousemove 事件在拖拽的使用中既要确保拖拽的流畅度,又要保险拖拽时的习性,怎么着保险两岸的平衡呢?

    IE兼容性

    IE浏览器未有上述的多个点子,有周边的友好的定义的议程:
    attachEvent和detachEvent
    都选拔八个参数 : 事件管理程序名称和事件管理程序方法

    <input id="btnClick" type="button" value="Click Here" />
    
    <script type="text/javascript">
        var btnClick = document.getElementById('btnClick');
    
        var handler=function() {
            alert(this.id);
        }
    
        btnClick.attachEvent('onclick', handler);
        btnClick.detachEvent('onclick', handler);
    </script>
    

    结果是undefined,很奇怪,为什么?
    大家后日来计算一下addEventListener和attach伊芙nt差别:

    区别 addEventListener attachEvent
    参数个数不相同 3 2
    第一个参数意义不同 事件类型(比如click,load) 事件处理函数名称(onclick,onload)
    事件处理程序的作用域不相同 作用域是元素本身,this是指的触发元素 会在全局变量内运行,this是window,所以刚才例子才会返回undefined
    为一个事件添加多个事件处理程序时,执行顺序不同 r添加会按照添加顺序执行 添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了

    5.成分的增进、删除?

    • removeChild()删除成分
    • appendChild在尾巴部分添美金素
    • insertBefore在有个别节点前添英镑素
    object.addEventListener(type,func,bool)
    

    能够经过设置四个流速計来去掉八分之四的 mousemove 事件的接触,代码如下

    事件指标

    在触发DOM上的某部事件的时候会生出三个风云指标event,这么些目的包括着独具与事件有关的音讯,满含发生事件的因素、事件类型等有关新闻。全数浏览器都扶持event对象,但接济艺术差别。

    6.DOM0 事件和DOM2级在事件监听使用方法上有啥分别?

    • DOM 0便是透过onclick写在HTML里面包车型大巴平地风波,此格局只可以绑定贰个函数,就算想绑定三个函数,则后二个将前多少个函数覆盖。
    • DOM 2是经过add伊芙ntListener恐怕attachEvent绑定事件,该办法可以绑定四个函数而且不会被覆盖。

    type是事件触发的办法,func是处监护人件的函数(事件侦听器卡塔 尔(英语:State of Qatar),bool布尔值,为true表示事件会围捕,为false表示事件会冒泡。

     代码如下

    跨浏览器的平地风波目的

    即便DOM和IE的event对象分歧,但依附它们的相仿性,大家还能写出跨浏览器的风云目的方案

    function getEvent(e) {
        return e || window.event;
    }
    
    function getTarget(e) {
        return e.target || e.scrElement;
    }
    
    function preventDefault(e) {
        if (e.preventDefault)
            e.preventDefault();
        else
            e.returnValue = false;
    }
    
    function stopPropagation(e) {
        if (e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble = true;
    }
    

    7.attachEvent与addEventListener的区别?

    • attachEvent(type,handler)是IE79的平地风波绑定函数,不帮忙事件捕获阶段,只扶植冒泡,this指代的是window。
    • add伊夫ntListener(type,handler,boolean),DOM2的平地风波绑定函数,支持捕获和冒泡阶段,this指代的是接触事件的要素,,boolean为true表示捕获阶段,false表示冒泡阶段。

    撤消事件

    复制代码

    解释IE事件冒泡和DOM2事件传播机制?

    参照他事他说加以考察文献
    饥人谷

    8.解释IE事件冒泡和DOM2事件传播机制?

    • IE事件冒泡:事件始于时由最切实的成分选取,然后逐级升高传播到较为不现实的要素。
    • DOM2事件:DOM2事件流包含三个品级,捕获阶段,目的阶段,冒泡阶段。首先事件从根节点开头逐级向下传播到具体节点,达到目的节点后,向上传播,回至根节点。
    object.removeEventListener(type,func)
    

    var count = 0;

    9.什么堵住事件冒泡? 怎么样阻止暗中同意事件?

    • 标准:
      截留冒泡.stopPropagation()
      阻挡暗中认可.preventDefault()
    • IE:
      掣肘冒泡.cancelBubble(boolean)ture为收回,暗中同意false
      截留暗中同意.returnValue默以为true,false为阻碍

    object是绑定了平地风波的靶子,type是该指标的轩然大波触发方式,func是事件侦听器。

    elem.onmousemove = function(){
        count ;
       
        // 当流速计为偶数的时候不执行mousemove
        if( count % 2 === 0 ){
            return;
        }
       
        // 实现拖拽效用的代码...
    };

    代码3

    其三题,当鼠标滑过li时,上面突显图片,碰到了难题。
    第后生可畏种方案是得到具备li,然后for遍历每一个li,捆绑一个时日监听,这种方案一向用mouseenter没不寻常。
    只是第三种父容器的方案,假使照旧用mouseenter的话,就能报错。

    图片 1

    Paste_Image.png

    图片 2

    Paste_Image.png

    抽薪止沸方案有二种,第生龙活虎种是换到mouseover,mouseover是指甭管鼠标穿不通过指标,都会接触,而mouseenter独有穿过时才会触发,可是上海体育场地,尽管通过了成分,也不会来得图片也会报错,不掌握哪些来头。

    图片 3

    Paste_Image.png

    图片 4

    Paste_Image.png

    另风华正茂种是将addeventlistener调成捕获阶段,可是会报一些不当,即使不推延使用,不是很通晓这几个错误的来源。

    图片 5

    Paste_Image.png

    图片 6

    Paste_Image.png

    //注册和注销事件都是由绑定事件的对象来调用
    window.onload = function () {
        var div = document.getElementById("divBox");
        div.addEventListener("mouseover", show);
        div.removeEventListener("mouseover", show);   
    }
    

    地点只是扩展了比很少的几行代码,通过剖断流速计是不是为偶数,就足以去掉百分之五十的 mousemove 事件试行的次数,同期拖拽作用的通畅度基本不受影响。

    代码4

    不是很通晓那句话,它的效果应该是判定el的尺寸是或不是超过零且大于后生可畏,但是不知晓那句话的逻辑
    <pre>
    if (el.length && ele.length > 0)
    </pre>

    但平日注销二个对象的风浪都以交由另三个目的的轩然大波来形成,比方点击八个div,触发事件,点击另一个div就撤除前贰个div的风云:

    mousemove 模拟 mouseenter 效果 近年来遇上这么二个要求,供给在图片上绑定三个风浪,当鼠标移动到图片上时对图纸张开放大,绝大好些个人的率先影响正是直接动用 mouseenter 事件来处理。不过接收 mouseenter 事件会拉动误触发,尽管能够选取机械漏刻来合作也依旧会有误触发,因为图片对于 mouseenter 的接触区域是相当的大的,当鼠标划过一张 200*200 尺寸的图样时,当时给 mouseenter 设置三个 500 飞秒的延时,效果或许达不到预期。对交互作用方式做越来越的优化,当鼠标快速划过图片时不接触事件,独有鼠标短暂的滞留在图纸上时才触发事件。通过对 mousemove 加多叁个电磁打点计时器就足以兑现该意义。代码如下:

    代码5

    首先观看教授的代码,那一个用btn呼出模态框的平地风波监听,是或不是足以用无需制止冒泡,认为那几个不禁绝的话,也不会因为点错而变成呼出

    图片 7

    Paste_Image.png

    其次是不知底为何老师写的认可按钮,点击能够不响应,而小编的点击后和其他close按键同样,回到了页面,可是jscode中尚无看到教师对确认按键进行了设置。

    <div id="divBox" style="width:100px;height:100px;background:black;color:white;">双击触发事件</div>
    <div id="deDivBox" style="width:100px;height:100px;background:red;color:white;">双击注销事件</div>
    
    window.onload = function () {
        var div = document.getElementById("divBox");//获取第一个div对象
        div.addEventListener("click", show);//为第一个div注册click事件
        var deDiv = document.getElementById("deDivBox");//获取第二个div对象
        deDiv.addEventListener("click", removeEvent);//为第二个div注册click事件
        //第一个div双击时的处理函数
        function show() {
            alert("双击事件发生");
        }
        //第二个div双击时的处理函数,它将第一个div的事件移除
        function removeEvent() {
            div.removeEventListener("click", show);
            alert("双击事件被移除");
        }
    }
    

     代码如下

    重复登记

    复制代码

    重新登记相仿档期的顺序的事件,后叁个并不会覆盖前三个,事件爆发时它们都会被科学实践。但它们的推行种种恐怕不是你预期的那样。想要事件施行种种如您预期,最棒将具有事件放在一个事件注册器上。

    var timer,
        move = function(){
            clearTimeout( timer );
            // 设置贰个不够长的电火花计时器
            timer = setTimeout(function(){
                // 这里是完结图片放大的代码...
            }, 200 );
        };
       
    img.onmousemove = move;
    img.onmouseout = function(){
        clearTimeout( timer );
    };

    window.onload = function () {
        var div = document.getElementById("divBox");
        div.addEventListener("click", show);
        div.addEventListener("click", show2);
        function show() {
            alert("hello");
        }
        function show2() {
            alert("world");
        }
    }
    
    //改写
    window.onload = function () {
        var div = document.getElementById("divBox");
        div.addEventListener("click", show);
        function show() {
            alert("hello world");
        }
    }
    

    鼠标频仍的移动触发的 mousemove 事件会免去掉上一次加多的停车计时器,唯有当鼠标停留时间超过设置的 200 飞秒才会接触事件,当然在鼠标移开的时候一定要记得消弭掉定时器。360图形检索就使用了这种接触方式,那样就不会再有误触发了。

    事件冒泡

    resize 事件的优化 resize 是在浏览器窗口大小更动的时候接触的事件,平时改造三次会触发 2、3 次 resize 事件,对于 IE6/7 resize 更易于被触发。resize 事件家常便饭用于当窗口改动大小时,网页的布局也会依靠窗口大小进行自适应布局。自适应布局如若对质量的开支超级大,那么将在进一层注意 resize 触发的频率。相符利用计时器来完结。

    当子成分的风云被触发后,该事件就如上涨的泡泡会侵染到含有了它的上层元素,假诺上层成分也注册过别的项指标风云,它们都会从子向上被每一种触发。注:冒泡恒久不会传送给body对象。

     代码如下

    <div id="grandfatherBox" style="width:400px;height:400px;background:black;color:white;text-align:center;vertical-align:central; line-height:25px">爷
            <div id="fatherBox" style="width:250px;height:250px;background:#509fdd;margin:0 auto;">父        
                <div id="childBox" style="width:150px;height:150px;background:red;margin:0 auto;">子</div>
            </div>
    </div>
    
    
    window.onload = function () {
        var span = document.getElementById("showMsg");
        var childBox = document.getElementById("childBox");
        var fatherBox = document.getElementById("fatherBox");
        var grandfatherBox = document.getElementById("grandfatherBox");
        childBox.addEventListener("mousedown", show, false);//鼠标按下时触发事件
        fatherBox.addEventListener("mouseup", show, false);//鼠标抬起时触发事件
        grandfatherBox.addEventListener("mouseup", show, false);//鼠标抬起时触发事件
        function show(W3CEvent_obj) {
            span.innerText  = this.id   "的"   W3CEvent_obj.type   "事件被触发n";//W3CEvent_obj.type可获取事件触发方式
        }
    }
    

    复制代码

    图片 8

    var throttle = function( fn, timeout ){       
        var timer;
       
        return function(){
            var self = this,
                args = arguments;

    事件围捕

            clearTimeout( timer );

    以此概念叫做事件捕获,作者称其为事件围捕,它与冒泡恰好相反,当子成分的风浪被触发后,假如含有它的上层们注册过任何事件,那么久先从包涵它的最顶层的因素的风浪开始实践,逐层往下,最终才实践该子成分的平地风波。也即,冒泡是从下往上,围捕是从上往下。供给深深记住的就是只假如冒泡,真正触发事件的成分会首先推行,既是它的子成分有注册过事件也不会触发,因为冒泡是逐层向上,而办案适逢其会相反。最终,那是W3C的正统,JQuery也不协理那些奇怪的定义,JQuery只协理冒泡。

            timer = setTimeout(function(){
                fn.apply( self, args );
            }, timeout );
        };
    };

    事件音讯

    window.onresize = throttle(function(){
        // 自适应布局的代码...
    }, 100 );

    事件被触发后三回九转有四个名为W3C伊夫nt_obj的参数被隐式的传递到了轩然大波侦听器中,那些参数是一个非同小可的event对象,它存款和储蓄了风云产生时的新闻。

    通过一再的调节和测验,发觉给 resize 加多八个 100 纳秒的延期的成效会相比较卓绝,不仅能保险事件的及时性,又能达到规定的标准优化的目标。

    特别event对象的性质

    mousewheel 事件的优化 mousewheel 是鼠标滚轮滚动时接触的平地风波,在 Firefox 中该事件名称为DOMMouseScroll,在部分场馆下,比方通过鼠标滚轮来调控 lightbox 组件图片的左右切换,又也许通过鼠标滚轮来放大和缩短地图。鼠标滚轮通常都会相比灵活,恐怕三回会滚动好两次,可是在切实可行的运用中这种太灵活的滚动在后边提到过的情景中不容争辩会有误触发。直接将地点封装好的 throttle 函数拿过来微微改下时间间距相通能落得优化职能。

    keyCode

     代码如下

    keypress事件发生时得到该键位的unicode码。

    复制代码

    type

     window.onmousewheel = throttle(function(){ 
        // 滚轮滚动时的操作代码... 
    }, 200 );

    意味着事件触发的点子。

    鼠标滚轮设置 200 皮秒的延期会有较理想的功效。

    bubbles

    以上的有的优化措施好多是因而放大计时器来促成的,关键依然看怎么灵活运用了。这个优化并不抑遏质量上的优化,还应该有相互作用功能上的优化,谈到底正是先前端的角度出发,从细节入手来升高客商体验。

    取得当前事变是不是为冒泡阶段的轩然大波。

    javascript品质优化注意些节。记录一下。

    cancelable

    1. 批量充实 Dom

    稍加事件的暗许动作是回天乏术被撤消的,此属性能够得到事件的暗中认可动作是或不是能够被注销。

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:Javascript中DOM事件的优化总结

    关键词: 日记本 JavaScript bwin娱乐 CSS积累 FE