金伯利jbl娱乐官方手机版金伯利jbl娱乐官方手机版

金百利jbl娱乐备用手机版
金伯利jbl体育备用注册

中高级前端应该必会,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 = parentfunc.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等属性。

 

  

 

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

 

, 1, 0, 9);

欢迎阅读本文章: 邱新民

金伯利kbl体育官方注册

金百利jbl娱乐备用手机版