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

1、介绍

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

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

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

 

2、各种操作

  

  1、事件委托

  案例分析:

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

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

  常规操作:

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

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

  

  很简单,也是非常好的。

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

  这个时候该如何处理呢?

 

  事件委托:

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

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

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

  代码展示:

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

  

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

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 做元素获取的,如:

 

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

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

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

 

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

  

  上面很清楚的可以知道:

  querySelector 是获取单个元素

  querySelectorAll 是获取多个匹配元素

  最大的变化就是 selector。

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

 

 

  class 类的一些 es5 操作 

 

  Dom 的 classList 属性:

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

  

  获取样式类列表

  document.querySelector('test').classList

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

  

{
  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 中是如是实现的呢 ?

 

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

  

   获取方法及其封装:

 

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

  

  如上面:

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

 

 

 

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

 

   相对于文档的位置

  

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

  那 js 中如何实现的呢?

 

  代码:

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等属性。

 

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

 

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

 

上一篇:Linux系统配置(应用程序)


下一篇:js 计算获取鼠标相对某个点的移动旋转角度