中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

1、介绍

　　随着组件开发大流行，现在三大框架已经基本占领了整个前端。

　　这时候，我们要是引入一个 jq 是不是先得你的项目非常臃肿，jq 也很不适合。

　　这个时候，你就需要来增加你 js 的功底。

 

2、各种操作

　　

　　1、事件委托

　　案例分析：

?

1 2 3 4 5 6 7

<ul id= "list">     <li>1</li>     <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul>

　　如上面的页面机构，我们需要个每一个 li 添加同一个事件。

　　常规操作：

　　选择出所有的 li 标签，然后为所有的标签都添加这个事件。

?

1 2 3 4

var liList = document.querySelectorAll('#list li') liList.foreach(function(item,index)=>{ 　　item.addEventListener('click',doSomething) })

　　

　　很简单，也是非常好的。

　　但是当这里的 li 标签多了之后，那么你获取所有的 li 标签并绑定事件就会变慢，也就是说性能就会不好了。

　　这个时候该如何处理呢？

 

　　事件委托：

　　解释下事件委托吧，可能新手不知道。

　　就是把子元素想要绑定的事件，绑定到子元素的父元素上面。

　　然后当事件触发的时候，通过事件冒泡来获取到当前事件源对应的的元素。(事件冒泡和捕获如果不知道还是需要补习下的)

　　代码展示：

?

1 2 3 4 5 6

var liList = document.querySelectorAll('#list') liList.addEventListener('click',function(e)=>{     if(e.target && e.target.nodeName.toUpperCase == 'LI'){ 　　　　console.log('你点击了'+e.target.innerText ) 　　} })

　　

　　给一个比较完整的例子，没有验证...

?

1 2 3 4 5 6 7 8 9 10 11 12 13

function delegate(element, eventName, name, func) {     element.addEventListener(eventName, function (e) {         var target = e.target, parent = target;         while (target && parent != element) {             if (parent.nodeName.toLowerCase() == name) {                 e.target = parent                 func.apply(parent,e);                 break;             }             parent = parent.parentNode;         }     }); }

　　

　　上面的例子，name 字段可以是 类命，id 的值，也可以是 标签。

　　自行修改，更灵活。。

 

　　总结：

　　事件代理委托主要是通过给父元素绑定事件。

　　通过事件的冒泡来确定当前的事件源。

　　确定事件源，并执行具柄。

　　

　　

 

　　2、es5 的元素获取、class 的操作

　　

　　es5 的元素获取

 

　　在之前我一直都是使用的 es3 做元素获取的，如：

 

?

1 2	document.getElementById(id) document.getElementsByClassName(class)

　　上面的相信是大家以前最熟悉的 js 获取方法。

　　但是在 es5 出来后，你会惊奇的觉得 Jquery 选择器可以被替代了

 

?

1 2 3 4 5

document.querySelector(selector) document.querySelectorAll(selector) // 例如 document.querySelector('.classs p')  // 获取 class 类下面的 p 标签 // 可以看到和 jquery 选择器差不多，只是功能精简了

　　

　　上面很清楚的可以知道：

　　querySelector 是获取单个元素

　　querySelectorAll 是获取多个匹配元素

　　最大的变化就是 selector。

　　它可以是 .className  、  #id   、也可以是多级选择  .className p

 

 

　　class 类的一些 es5 操作 

 

　　Dom 的 classList 属性：

?

1	<div id = "test" class = "red big hot"></div>

　　

　　获取样式类列表

　　document.querySelector('test').classList

　　这里会返回一个 TokenList 也就是是个类数组：

　　

?

1 2 3 4 5 6 7

{ 　　0:red, 　　1:big, 　　2:hot, 　　length:3, 　　value:'red big hot' }

　　

　　添加类名

　　document.querySelector('test').classList.add('good','new')

　　添加类 good ， new 。如果类名已经存在，则不添加

 

　　移除某类

　　document.querySelector('test').classList.remove('good','new')　　

　　移除 good ， new 类。移除不存在的类，会报错

 

　　切换类

　　document.querySelector('test').classList.toggle('good')

　　切换 good 类。如果 good 存在返回true，否则false

 

　　判断是否存在某类

　　document.querySelector('test').classList.contains('good')

　　返回 boolean 值。

 

　　

　　3、获取元素在父元素中第几个

 

　　其实这个在现在的组件模式中很容易实现。

　　但是 js 中是如是实现的呢 ？

 

?

1 2 3 4 5

<ul> 　　<li>1</li> 　　<li>2</li> 　　<li>3</li> </ul>

　　

 　　获取方法及其封装：

 

?

1 2 3

function index(parent,son) {        return [].indexOf.call(parent.children,son);    }

　　

　　如上面：

　　parent 是父元素，son 很显然是子元素

 

 

 

　　4、元素相对于文档 / 窗口视图的位置 

 

 　　相对于文档的位置

　　

　　在 jquery 中我们实现的方法是 $(s).offset() 来回去相对于文档的位置。

　　那 js 中如何实现的呢？

 

　　代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const getDocPosition = (element) => {     let eleCom = element;     if (typeof element === 'string') eleCom = document.querySelector(eleCom);     let x = eleCom.offsetLeft;     let y = eleCom.offsetTop;     let parent = eleCom.offsetParent;     while (parent) {         x += parent.offsetLeft;         y += parent.offsetTop;         parent = parent.offsetParent;     }     return {         x,         y,     }; };

　　

　　代码很简单：

　　可以看出，通过不断的获取 offsetLeft / offsetTop ，并且与它的父元素相加。

　　直到相加到顶级元素为止。 

 

 　　

　　相对于窗口视图位置

 　　

　　getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

 

　　

 

?

1	rectObject = object.getBoundingClientRect();

　　

　  rectObject.top：元素上边到视窗上边的距离;

　  rectObject.right：元素右边到视窗左边的距离;

　  rectObject.bottom：元素下边到视窗上边的距离;

　  rectObject.left：元素左边到视窗左边的距离;

 

　　如果你看过 lazyImg 图片的懒加载，你们就会发现，他的实现原理就是这个。

　　当它图片出现在窗口的视图中，就会加载真的图片资源。 

 

 

　　后续继续添加常用的、容易忘的一些 js 功能。

 

　　https://www.cnblogs.com/jiebba/p/9663268.html 

   我的博客 ：  XiaoLong's Blog

   博客园小结巴巴： https://www.cnblogs.com/jiebba