js技术

Posted 张学亮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js技术相关的知识,希望对你有一定的参考价值。

一、onmouseover、onmouseenter、onmouseout、onmouseleave的区别

 

onmouseover、nmouseout:鼠标移动到自身时候会触发事件,同时移动到其子元素身上也会触发事件

 

onmouseenter、onmouseleave:鼠标移动到自身是会触发事件,但是移动到其子元素身上不会触发事件

 

?

?

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="Generator" content="EditPlus?">

        <meta name="Author" content="">

        <meta name="Keywords" content="">

        <meta name="Description" content="">

        <title></title>

        <style type=‘text/css‘>

            *{ margin:0; padding:0;}

            #box3{

                height:100px;

                background:red;

            }

            #box2{

                padding:50px;

                background:blue;

            }

            #box1{

                padding:50px;

                background:green;

            }

        </style>

    </head>

 

    <body>

        <div id="box1">1

            <div id="box2">2

                <div id="box3">3</div>

            </div>

        </div>

 

        <script type="text/javascript">

            /*

                onmouseover

                onmouseout

 

                onmouseenter

                onmouseleave

            */

 

            var oBox1 = document.getElementById(‘box1‘);

            ///*

            /*

            oBox1.onmouseover = function(){ //可以直接通过ID这样调用,但不提倡

                console.log( ‘over‘ );

            };

            */

            oBox1.onmouseout = function(){ //可以直接通过ID这样调用,但不提倡

                console.log( ‘out‘ );

            };

            //*/

 

            /*

            oBox1.onmouseenter = function(){ //可以直接通过ID这样调用,但不提倡

                console.log( ‘enter‘ );

            };

            oBox1.onmouseleave = function(){

                console.log( ‘leave‘ );

            };

            */

        </script>

    </body>

</html>

?

?

二、文档碎片

 

?

?

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素

提高页面效率

 

 

    var d1 = new Date();

    //创建十个段落,常规的方式

    for(var i = 0 ; i < 1000; i ++) {

        var p = document.createElement("p");

        var oTxt = document.createTextNode("段落" + i);

        p.appendChild (oTxt);

        document.body.appendChild(p);

    }

    var d2 = new Date();

    document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

 

 

    //使用了createDocumentFragment()的程序

    var d3 = new Date();

    var pFragment = document.createDocumentFragment();

    for(var i = 0 ; i < 1000; i ++) {

        var p = document.createElement("p");

        var oTxt = document.createTextNode("段落" + i);

        p.appendChild(oTxt);

        pFragment.appendChild(p);

    }

    document.body.appendChild(pFragment);

    var d4 = new Date();

    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

?

?

三、事件冒泡

 

1、什么是事件冒泡

 

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

 

打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。

 

2.怎么阻止事件冒泡

 

通常情况下我们都是一步到位,明确自己的事件触发源,并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序,即我们明确最精准目标,这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解,我们知道程序将做多较多额外的事情,这必然增大程序开销。还有一个重要的问题是:事件冒泡处理可能会激活我们本来不想激活的事件,导致程序错乱,甚至无从下手调试,这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时,我们要阻止事件冒泡。

 

?

?

<div onclick="openWin(‘http://www.baidu.com‘)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

  <div onclick="openWin(‘http://www.google.com‘)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>

</div>

 

<script type="text/javascript">

//本例你实际希望点击灰色盒子打开google首页,而点击黑色盒子打开baidu首页,但结果你点击灰色盒子的时候,却是同时打开了两个网页。其实在实际设计中较少遇到此问题,你可能会想如

果我在页面不同DOM深处安置了不同的按钮或链接,深层处的事件触发会不会波及顶层的按钮呢?不会,因为按钮不能形成嵌套关系。

function openWin(url)

{

    window.open(url);

}

</script>

?

?

【阻止事件冒泡例子】

 

?

?

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>

</div>

<script type="text/javascript">

//阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比)

function showMsg(obj,e)

{

    alert(obj.id);

    stopBubble(e)

}

 

//阻止事件冒泡函数

function stopBubble(e)

{

    if (e && e.stopPropagation)

        e.stopPropagation()

    else

        window.event.cancelBubble=true

}

</script>

?

 

以上是关于js技术的主要内容,如果未能解决你的问题,请参考以下文章

2021-07-11【技术】js获取各种高度的方法

前端 js技术

基于 vue.js 的 SSR 技术 — Nuxt.js

AJAX技术是啥,和JS的区别

小白入门之前端网页技术JavaScript

学会Node.js技术,真正让你做充满魅力技术型人才