2是委托给前台MM代为签收,前台MM也会在吸收寄给新职员和工人的特快专递后核实并代为签收

 

子节点达成均等的功效:

伊芙nt对象提供了1天品质叫target,能够回到事件的对象节点,大家成为事件源,也正是说,target就足以象征为最近的风浪操作的dom,不过不是的确操作dom,当然,这几个是有包容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获得了脚下节点的职位,并不知道是什么节点名称,那里大家用nodeName来获取具体是怎么样标签名,那么些再次来到的是三个大写的,大家要求转成小写再做相比(习惯难点):

这怎么的事件能够用事件委托,什么样的风云不得以用呢?

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

 上边的代码的情致很简单,相信广大人都是那般完结的,我们看看有稍许次的dom操作,首先要找到ul,然后遍历li,然后点击li的时候,又要找3遍目的的li的岗位,才能执行最终的操作,每一回点击都要找壹次li;

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }

        }
window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            //事件委托,添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }

            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }

            };

            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

图片 1

完成效益是点击li,弹出1二三:

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            //鼠标移入变红,移出变白
            for(var i=0; i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

地点的例证是说li操作的是同等的效用,借使每一种li被点击的功力都不均等,那么用事件委托还有用吗?

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");

            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }

        }

 

图片 2

这怎样叫事件委托呢?它还有贰个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是选用事件冒泡,只钦点1个事件处理程序,就足以管理某一品类的具备事件。那那是哪些看头吧?网上的各位大腕们讲事件委托基本上都用了同叁个例证,正是取快递来解释这么些场景,小编仔细研讨了弹指间,那几个事例还真是安妥,作者就不去想其他例子来诠释了,顺水人情,小编摘过来,我们认真明白一下事变委托到底是3个哪些规律:

子节点达成均等的意义:

 

起因:

 

事件委托的法则:

 

图片 3

诸如此类改下就唯有点击li会触发事件了,且每一次只举行二遍dom操作,假诺li数量众多的话,将大大裁减dom的操作,优化的质量总而言之!

图片 4

window.onload = function(){
  var oUl = document.getElementById(“ul1”);
  oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == ‘li’){
         alert(123);
         alert(target.innerHTML);
    }
  }
}

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

目前是移入li,li变红,移出li,li变白,这么一个效果,然后点击按钮,能够向ul中添加贰个li子节点

其次,新职员和工人也是足以被前台MM代为签收的,即程序中新丰盛的dom节点也是有事件的。

 

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            //鼠标移入变红,移出变白
            for(var i=0; i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

图片 5

 

 

图片 6

图片 7

 

每种函数都以2个对象,是指标就会占有内部存款和储蓄器,对象更多,内部存款和储蓄器占用率就越大,自然个性就越差了(内部存储器不够用,是硬伤,哈哈),比如上边的98个li,就要占用玖拾8个内部存款和储蓄器空间,如果是1000个,10000个吗,那只好说呵呵了,假诺用事件委托,那么我们就足以只对它的父级(假如唯有3个父级)那个对象开始展览操作,那样大家就必要一个内存空间就够了,是或不是省了重重,自然属性就会更加好。

那是相似的做法,可是你会发觉,新增的li是平昔不事件的,表达添加子节点的时候,事件尚无1并添加进去,那不是大家想要的结果,那怎么做吗?壹般的消除方案会是这么,将for循环用一个函数包起来,命名称为mHover,如下:

这里实在还有二层趣味的:

图片 8

那正是说我们用事件委托的法子做又会怎么着呢?

那么大家用事件委托的主意做又会怎么着呢?

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

图片 9

有多少个同事猜度会在周一收下快递。为签收快递,有二种方法:一是五个人在商店门口等快递;贰是委托给前台MM代为签收。现实中等,我们基本上选择委托的方案(集团也不会隐忍那么多职员和工人站在门口就为了等快递)。前台MM收到快递后,她会咬定收件人是何人,然后依照收件人的供给签收,甚至代为付款。那种方案还有多少个优势,那正是不怕公司里来了新职工(不管多少),前台MM也会在吸收寄给新职员和工人的快递后核实并代为签收。

何以要用事件委托:

1般的话,dom供给有事件处理程序,我们都会平昔给它设事件处理程序就好了,那如借使累累的dom要求加上事件处理呢?比如大家有一百个li,每个li都有同样的click点击事件,恐怕大家会用for循环的办法,来遍历全部的li,然后给它们增加事件,那那样做会存在怎么样影响啊?

 

 ———————————————————————华丽的分割线—————————————————————-

图片 10

 

 

 

那什么叫事件委托呢?它还有2个名字叫事件代理,JavaScript高级程序设计上讲:事件委托正是采纳事件冒泡,只钦命1个事件处理程序,就足以管理某一类别的有着事件。那那是怎么意思吧?网上的诸位大拿们讲事件委托基本上都用了同2个例证,正是取快递来解释那个现象,作者仔细揣摩了瞬间,那些例子还真是稳当,小编就不去想其他例子来表明了,借花献佛,笔者摘过来,大家认真理解一下事件委托到底是二个如何规律:

事件委托是选取事件的冒泡原理来促成的,何为事件冒泡呢?正是事件从最深的节点初阶,然后慢慢发展传播事件,举个例子:页面上有这么1个节点树,div>ul>li>a;比如给最中间的a加三个click点击事件,那么那个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这么二个建制,那么大家给最外面的div加点击事件,那么内部的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会接触,那正是事件委托,委托它们父级代为施行事件。

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            function mHover () {
                //鼠标移入变红,移出变白
                for(var i=0; i<aLi.length;i++){
                    aLi[i].onmouseover = function(){
                        this.style.background = 'red';
                    };
                    aLi[i].onmouseout = function(){
                        this.style.background = '#fff';
                    }
                }
            }
            mHover ();
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
                mHover ();
            };
        }

 

图片 11

到底到了本文的基本部分了,哈哈,在介绍事件委托的措施以前,我们先来看一段1般方法的例证:

终于到了本文的主干部分了,哈哈,在介绍事件委托的办法以前,大家先来看1段一般方法的例证:

虽说效果完结了,瞧着还挺好,但骨子里无疑是又追加了三个dom操作,在优化品质方面是不可取的,那么有事件委托的不二秘诀,能一气浑成优化吗?

图片 12

那里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,那里当点击ul的时候,也是会接触的,那么难题就来了,要是自己想让事件代理的效应跟间接给节点的轩然大波效果等同如何是好,比如说唯有点击li才会触发,不怕,大家有绝招:

 上边的代码的趣味很不难,相信广大人都以那般完毕的,大家看看有稍许次的dom操作,首先要找到ul,然后遍历li,然后点击li的时候,又要找一回指标的li的岗位,才能执行最终的操作,每一回点击都要找三遍li;

 

 

用事件委托就足以只用一遍dom操作就能势如破竹全数的效益,比位置的属性肯定是要好一些的 

概述:

伊芙nt对象提供了3特性质叫target,能够重返事件的靶子节点,大家改为事件源,也正是说,target就足以表示为当前的风云操作的dom,可是还是不是真的操作dom,当然,这一个是有包容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是取得了方今节点的地点,并不知道是哪些节点名称,那里大家用nodeName来获得具体是如何标签名,那一个重临的是3个大写的,我们要求转成小写再做比较(习惯问题):

事件委托怎么落到实处:

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

 

 

 

不相符的就有无数了,举个例子,mousemove,每一遍都要总结它的地点,非凡不佳把控,在不及说focus,blur之类的,本人就没用冒泡的特征,自然就不可能用事件委托了。

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

值得注意的是,mouseover和mouseout即使也有事件冒泡,不过处理它们的时候需求专门的瞩目,因为急需常常总结它们的地方,处理起来不太简单。

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            //事件委托,添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }

            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }

            };

            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

看一下常规的拉长节点的艺术:

图片 13

图片 14

图片 15

图片 16

 

 

地方的例子是说li操作的是一律的职能,假诺每一种li被点击的效率都不相同等,那么用事件委托还有用吗?

 

诚如的话,dom须求有事件处理程序,大家都会直接给它设事件处理程序就好了,那若是是广大的dom须求加上事件处理呢?比如我们有917个li,每一个li都有同等的click点击事件,大概我们会用for循环的方法,来遍历全数的li,然后给它们拉长事件,那那样做会设有啥震慑啊?

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

地方实现的成效本身就不多说了,很简短,5个按钮,点击每贰个做区别的操作,那么至少供给七回dom操作,尽管用事件委托,能开始展览优化吗?

事件委托的规律:

第三,新职工也是可以被前台MM代为签收的,即程序中新足够的dom节点也是有事件的。

看,上边是用事件委托的方法,新加上的子成分是含有事件效果的,我们能够发现,当用事件委托的时候,根本就不需求去遍历成分的子节点,只供给给父级元素添加事件就好了,别的的都以在js里面包车型客车履行,那样能够大大的裁减dom操作,那才是事件委托的精髓所在。

那般改下就唯有点击li会触发事件了,且每回只实行三回dom操作,假如li数量很多来说,将大大收缩dom的操作,优化的属性由此可见!

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

 未来讲的都以document加载实现的依存dom节点下的操作,那么只假若骤增的节点,新增的节点会有事件呢?也正是说,八个新职工来了,他能收到快递吗?

图片 17

图片 18

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }

        }

看一下例行的拉长节点的法子:

概述:

贰、其实小编一贯都没弄驾驭,写那几个一是为着备忘,2是给别的的知其然不知其所以然的伴儿们以参考;

 

————————————————–华丽的分割线————–

在此地先谢谢一下@苍茫大地NV 的问话,提的标题11分好!

她的标题是:

现行反革命给三个场景 ul > li > div >
p,div占满li,p占满div,依旧给ul绑定时间,须求判定点击的是或不是li(要是li里面包车型客车布局是不定点的),那么e.target就恐怕是p,也有望是div,那种景况你会怎么处理吧?

那我们现在就重现一下他给的地方

图片 19

  <ul id="test">
        <li>
            <p>11111111111</p>
        </li>
        <li>
            <div>
                22222222
            </div>
        </li>
        <li>
            3333333333
        </li>
        <li>4444444</li>
    </ul>

图片 20

 

 

如上列表,有5个li,里面包车型地铁始末各不同,点击li,event对象自然是当前点击的对象,怎么钦赐到li上,下边笔者一向给化解方案:

图片 21

  var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

图片 22

 

 宗旨代码是while循环部分,实际上就是二个递归调用,你也得以写成2个函数,用递归的章程来调用,同时用到冒泡的规律,从里往外冒泡,知道currentTarget停止,当当前的target是li的时候,就能够进行相应的轩然大波了,然后终止循环,恩,没毛病!

此地看不到效果,大家能够复制过去运作一下!

——————————————————————–华丽的分割线—————————————————————-

 总结:

那什么的轩然大波能够用事件委托,什么样的轩然大波不得以用啊?

适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

值得注意的是,mouseover和mouseout即使也有事件冒泡,可是处理它们的时候需求专门的令人瞩目,因为急需平时总计它们的职位,处理起来不太不难。

不合乎的就有不少了,举个例证,mousemove,每一回都要总结它的岗位,一无可取把控,在比不上说focus,blur之类的,本人就没用冒泡的风味,自然就无法用事件委托了。

好了,今天就到那里,下次本身想介绍一下事变绑定,欢迎咱们关怀和阅读,以上纯属个人见解,如有不对的地点,万望指正,不胜多谢!

 

那是形似的做法,然而你会意识,新增的li是尚未事件的,表达添加子节点的时候,事件尚未联手添加进去,那不是我们想要的结果,那怎么做啊?壹般的化解方案会是那样,将for循环用2个函数包起来,命名字为mHover,如下:

 

 

<input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

 

事件委托是利用事件的冒泡原理来贯彻的,何为事件冒泡呢?正是事件从最深的节点早先,然后稳步升高传播事件,举个例子:页面上有这么3个节点树,div>ul>li>a;比如给最中间的a加一个click点击事件,那么那么些事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这般三个建制,那么我们给最外面的div加点击事件,那么内部的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会接触,那正是事件委托,委托它们父级代为举行事件。

适合用事件委托的风浪:click,mousedown,mouseup,keydown,keyup,keypress。

图片 23

 总结:

那里其实还有贰层趣味的:

先是,今后嘱托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;

那里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,那里当点击ul的时候,也是会接触的,那么难题就来了,要是本人想让事件代理的效应跟直接给节点的轩然大波效果等同咋做,比如说只有点击li才会触发,不怕,大家有绝招:

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;

            function mHover () {
                //鼠标移入变红,移出变白
                for(var i=0; i<aLi.length;i++){
                    aLi[i].onmouseover = function(){
                        this.style.background = 'red';
                    };
                    aLi[i].onmouseout = function(){
                        this.style.background = '#fff';
                    }
                }
            }
            mHover ();
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
                mHover ();
            };
        }

在JavaScript中,添加到页面上的事件处理程序数量将一直关联到页面包车型地铁总体运维质量,因为必要不断的与dom节点开始展览交互,访问dom的次数更加多,引起浏览重视绘与重排的次数也就越多,就会延伸整个页面包车型客车相互就绪时间,那就是为何品质优化的首要思想之一正是缩减DOM操作的缘故;假如要用事件委托,就会将具有的操作放到js程序里面,与dom的操作就只供给互相2遍,那样就能大大的裁减与dom的并行次数,升高品质;

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");

            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }

        }

各类函数都是多个指标,是指标就会占用内部存款和储蓄器,对象更多,内部存储器占用率就越大,自然习性就越差了(内部存储器不够用,是硬伤,哈哈),比如下边包车型地铁918个li,就要占用九七个内部存款和储蓄器空间,假设是一千个,一千0个呢,那只可以说呵呵了,若是用事件委托,那么大家就能够只对它的父级(假如唯有2个父级)这三个对象实行操作,那样我们就必要1个内部存款和储蓄器空间就够了,是否省了众多,自然属性就会更加好。

图片 24

首先,今后委托前台的同事是足以代为签收的,即程序中的现有的dom节点是有事件的;

在JavaScript中,添加到页面上的事件处理程序数量将一直关联到页面包车型客车全体运营品质,因为须要持续的与dom节点开始展览互动,访问dom的次数更多,引起浏览重视绘与重排的次数也就越来越多,就会延伸整个页面包车型地铁并行就绪时间,那正是为啥质量优化的根本思想之一正是缩减DOM操作的由来;借使要用事件委托,就会将装有的操作放到js程序里面,与dom的操作就只供给相互一遍,那样就能大大的收缩与dom的互动次数,提高品质;

就算成效达成了,瞧着还挺好,但实质上无疑是又扩大了二个dom操作,在优化质量方面是不可取的,那么有事件委托的不二等秘书诀,能做到优化吗?

现在是移入li,li变红,移出li,li变白,这么2个效率,然后点击按钮,能够向ul中添加一个li子节点

图片 25

怎么要用事件委托:

贯彻效益是点击li,弹出1二三:

 

有八个同事臆想会在周1吸收快递。为签收快递,有二种办法:1是六人在店铺门口等快递;二是信托给前台MM代为签收。现实个中,大家大约选拔委托的方案(公司也不会容忍那么多职员和工人站在门口就为了等快递)。前台MM收到快递后,她会判定收件人是哪个人,然后根据收件人的渴求签收,甚至代为付款。那种方案还有2个优势,那正是即是公司里来了新职员和工人(不管多少),前台MM也会在收受寄给新职工的特快专递后核实并代为签收。

 未来讲的都以document加载实现的现有dom节点下的操作,那么一旦是增创的节点,新增的节点会有事件吧?也便是说,三个新职员和工人来了,他能接受特快专递吗?

用事件委托就足以只用1遍dom操作就能成就有着的效劳,比地点的性质肯定是要好一些的 

 

 

 

看,上边是用事件委托的办法,新加上的子成分是富含事件效果的,我们可以发现,当用事件委托的时候,根本就不须要去遍历成分的子节点,只必要给父级成分添加事件就好了,别的的都是在js里面包车型客车履行,那样能够大大的减少dom操作,那才是事件委托的精彩所在。

图片 26

一、那是前者面试的经文题型,要去找工作的同伙看看仍然有赞助的;

事件委托怎么落到实处:

window.onload = function(){
  var oUl = document.getElementById(“ul1”);
  oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == ‘li’){
         alert(123);
         alert(target.innerHTML);
    }
  }
}

地点达成的机能本人就不多说了,一点也不细略,几个按钮,点击各个做区别的操作,那么至少要求6回dom操作,假诺用事件委托,能展开优化吗?

图片 27

 

相关文章

网站地图xml地图