JS知识点总结（三）

JS知识点总结（三）

一、关于Boolean函数

1.使用Boolean()返回一个布尔值

2.使用new Boolean()返回一个对象

需要注意的是当传入一个值为false当布尔对象时，会得到一个值为true当布尔对象

const f1 = new Boolean(false);
const flag = Boolean(f1);
const flag2 = new Boolean(f1)
console.log(flag); // true
console.log(flag2); // [Boolean: true]

二、关于event.target和currentEventTarget

event.target是事件真实触发的对象，currentEventTarget是事件绑定的对象（始终和this相同）。但如果事件发生的对象没有绑定事件，则会往上冒泡，那event.target则不是交互的对象了，变成了冒泡发生的对象。
比如下面的例子在 document.body 上添加了单击处理程序：

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

三、关于新建img标签时，设置src属性的时机

在通过 JavaScript 创建新元素时，也可以给这个元素指定一个在加载完成后执行的事件处理
程序。在这里，关键是要在赋值 src 属性前指定事件处理程序，如下所示：

window.addEventListener("load", () => {
 let image = document.createElement("img");
 image.addEventListener("load", (event) => {
 console.log(event.target.src);
 });
 document.body.appendChild(image);
 image.src = "smile.gif";
});

这个例子首先为 window 指定了一个 load 事件处理程序。因为示例涉及向 DOM 中添加新元素，
所以必须确保页面已经加载完成。如果在页面加载完成之前操作 document.body，则会导致错误。然
后，代码创建了一个新的元素，并为这个元素设置了 load 事件处理程序。最后，才把这个元素
添加到文档中并指定了其 src 属性。注意，下载图片并不一定要把元素添加到文档，只要给它设
置了 src 属性就会立即开始下载。

四、鼠标事件对象中的offsetX, clientX, pageX区别

1.offsetX, offsetY

offsetX, offsetY是距离事件对象左边和右边的距离

2.clientX，clientY

clientX，clientY是距离可是窗口的距离

3.pageX，pageY

pageX，pageY是距离页面的距离（包括纵向或横向滑动的距离）

五、DOM节点类型

• Node类型，所有节点都继承于Node类型
• Document类型, 文档对象类型
• Element类型，所有都HTML元素类型
• TEXT类型，文本类型
• Comment类型，注释类型
• CDATASection 类型，继承于Comment类型
• DocumentType 类型，文档的dcotype信息
• DocumentFragment 类型，文档片段类型
• Attr 类型，属性类型

六、h5中操作类名

HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。
classList 是一个新的集合类型 DOMTokenList 的实例。与其他 DOM 集合类型一样，DOMTokenList
也有 length 属性表示自己包含多少项，也可以通过 item()或中括号取得个别的元素。此外，
DOMTokenList 还增加了以下方法。
 add(value)，向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做。
 contains(value)，返回布尔值，表示给定的 value 是否存在。
 remove(value)，从类名列表中删除指定的字符串值 value。
 toggle(value)，如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。
这样以来，前面的例子中那么多行代码就可以简化成下面的一行：
div.classList.remove(“user”);
这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂
性，如下面的例子所示：
// 删除"disabled"类
div.classList.remove(“disabled”);
// 添加"current"类
div.classList.add(“current”);
450 第 15 章 DOM 扩展
// 切换"user"类
div.classList.toggle(“user”);
// 检测类名
if (div.classList.contains(“bd”) && !div.classList.contains(“disabled”)){
// 执行操作
)
// 迭代类名
for (let class of div.classList){
doStuff(class);
}

七、自定义数据属性

定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。dataset 属性是一个 DOMStringMap 的实例，包含一组键/值对映射。元素的每个 data-name 属性在 dataset 中都可以通 过 data-后面的字符串作为键来访问（例如，属性 data-myname、data-myName 可以通过 myname 访 问，但要注意 data-my-name、data-My-Name 要通过 myName 来访问）。下面是一个使用自定义数据 属性的例子：

let div = document.getElementById("myDiv");
// 取得自定义数据属性的值
let appId = div.dataset.appId;
let myName = div.dataset.myname;
// 设置自定义数据属性的值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
// 有"myname"吗？
if (div.dataset.myname){
 console.log(`Hello, ${div.dataset.myname}`);
}

自定义数据属性非常适合需要给元素附加某些数据的场景，比如链接追踪和在聚合应用程序中标识
页面的不同部分。另外，单页应用程序框架也非常多地使用了自定义数据属性。

八、sort方法默认排序

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的