JS事件的委派

     对于JS事件的委派我们并不陌生，使用js事件的委派能让我们关于事件的绑定进行一系列的操作。

用简单的语言来说就是当事件被绑定到一个祖先元素，然而它的后代元素被触发时那么它就会一直冒泡到祖先元素从而触发祖先元素所绑定的函数事件，那么关于它的使用以及方法下面我来用两个例子来实现对于委派的使用

1  

首先我们要完成的是图片之间的切换，更换背景图片的这个功能，那么对于这个案例来说分为两个步骤：第一就是把布局设置好和所要引用到的属性值，通过style属性来完成我们所需要完成的页面布局，

在这里需要注意的是，布局的时候要清除要用到什么标签，以为不一样的标签和有不一样的效果，就好像img和background：url（）这两个区分开来，一个是图片，一个是背景图片，图片块级元素会作为块级元素来呈现，而背景图片会根据你给的宽度高度而形参背景。

在这里我直接用img属性来背景，后面JS代码与background与img互相冲突，

使用我使用img来布局是为了和后面的JS配合使用，当然如果使用background：url（）属性来布局也是可以，的是要区分JS的方法函数。

 

第二部就是写JS代码了。

 

我们首先给事件绑定一个点击事件通过点击图片来完成这个效果，获取到它的id然后通过变量选择到具体的标签、要改变的样式。

提供if循环从而能够选择到它然后调用这个元素从而响应函数，这就是事件绑定触发。

大体的流程是获取图片的父节点，通过绑定父节点而触发子元素图片改变body的样式，从上图中我们可以看到if是我们常见的循环函数，而括号里面紧跟着的nodeName==“”这个获取的标签名，这是需要注意的是标签名必须是大写字母，还有就是下面的getAttribute获取的是样式属性值通过图片属性来改变我们要改变的属性值、达到我们所需求的效果。

2.

还有一个就是网页换肤

这次我们通过标签来设置它的元素，我们只需要点击小圆圈里面的颜色那么背景就会变成和它一样的颜色，通过style给他们设置样式，每一个span标签都设置一个样式，这样方便我们好选择到它，用span:nth-of-type/sapn:nth-child…等等而在这里我用了span:nth-of-type这样方便JS代码的函数获取达成效果

这次我们用的是span标签，和background所以要改变的获取属性值就不一样。

其实他们的原理是一致的，绑定-获取-实现。

在这里我们要注意的是要改变样式不同、它的获取方法也不同，特别注意它们之间的获取属性值，

它们所引用的样式和效果也不同，一个是图片img另外一个是background。