一名前端工程师的笔记分享！Js篇（01-16更新）

节点克隆

cloneNode()

用法：

对象.cloneNode([true]); true表示可有可无

如果含有参数true，表示深度克隆，即克隆该对象本身，又克隆该对象的内容

如果没有参数true，只克隆该对象本身

---

dom中的属性操作方法

1、获取属性值

对象.getAttribute("属性名") 获取属性值 ，可以获取标签的固有属性值，也可以获取自定义属性值 （该方法不能操作 单选框或复选框的checked值）

2、设置属性值

对象.setAttribute("属性名","值");

3、移出某个对象的属性

对象.removeAttribute("属性名");

---

事件对象（event）

什么是事件对象：当触发某个事件时（onclick、onmouseover...）,会产生一个对象，这个对象就是事件对象。

---

获取事件对象的兼容写法

var e = evt || window.event;   此时 e 变量 代表了事件对象

---

事件对象作用

获取键盘状态，鼠标位置和鼠标按钮状态。

不同的事件产生的事件对象 可能会有不同的属性

---

获取坐标问题

clientX / clientY 获取距离浏览器窗口 左侧 和 定部的距离 （即使滚动条将内容区向上移动，永远获取的是距离浏览器窗口距离）

pageX / pageY 获取距离页面内容区域的左侧和顶部的距离 （如果滚动条没有触发，值和clientY相等）

offsetX / offsetY 获取的是距离某个元素内部的 左偏移 和 上偏移（火狐不兼容）

screenX / screenY 获取距离屏幕的左偏移和上偏移

layerX / layerY （火狐浏览器识别 ： 结果同 offsetX 和 offsetY）

---

button属性

button属性用来区分当前操作的是左键？滚轮？右键?

用法： 事件对象.button

高版本浏览器：　左键　０　　　滚轮　１　　　　右键　　２

低版本浏览器： 左键 1 滚轮 4 右键 2

兼容写法 ：

function getButton(evt){

var e = evt || event;

if( evt ){

return e.button;

}else{

switch(e.button){

case 1 : return 0;

case 4 : return 1;

case 2 : return 2;

}

}

}

---

获取键盘的按键值

事件对象的属性： keyCode --- 通过键盘事件获取的

回车键的keyCode值为 13

功能键：

altKey ctrlKey 功能键返回的值都是布尔值

---

阻止浏览器右键单击的默认行为

右键单击事件：oncontextmenu

e.preventDefault ? e.preventDefault() : e.returnValue = false;

---

最近项目要上线，累成狗～ 更新内容有点少，等项目上线了，我还会更新几篇微信小程序我遇到的坑。

---

欢迎大家持续关注。号内有多个专题，小程序（持续更新中）,Javascript（持续更新）,Vue等学习笔记。觉得有收获的可以收藏关注，欢迎骚扰，一起学习，共同进步

最后推广一下自己的小程序，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

自律更自由，一只喜欢锻炼的程序猿，嘿嘿。

你都看到这了，不点个关注就过分了哈～