js笔记

1.点击更换背景图片案例

<div class="box">
        <a href="javascript:;"><img src="images/1.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/2.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/3.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/4.jpg" alt=""></a>

    </div>
    <script>
        var box = document.querySelector('.box');
        var as = box.querySelectorAll('a');
        for (var i = 0; i　 < as.length; i++) {
            as[i].addEventListener('click', function() {
                // console.log(this.children[0].src);
                var address = this.children[0].src;
                // console.log(this.children[0]);
                // 记住backgroundImage属性前面需要加style
                document.body.style.backgroundImage = 'url(' + address + ')';
            });
        }
    </script>

• 刚开始document.body.backgroundImage = ‘url(’ + address + ‘)’;是这么写的，backgroundImage前面没有加style，导致点击图片没有达到更换效果
• 完整的应该是 document.body.style.backgroundImage = ‘url(’ + address + ‘)’; backgroundImage是元素属性，修改需要通过style的方式，这个以后要记得

2. 自定义属性的操作

获取属性值：

• 元素对象.属性； 一般用来获取元素自带的属性值，获取自定义属性的值时这种方式获取不到，显示undefined
• 元素对象.getAttribute(‘属性’)； 用来获取自己定义的属性值

设置属性值：

• 元素对象.属性 = 值；设置元素自带的属性
• 元素对象.setAttribute(‘属性’,值); 一般用来自己定义属性的值

移除属性：
元素对象.removeAttribute(‘属性’)；
注意：移除类的时候，不是写className了，这里写class

3.自定义属性

• 自定义属性目的是为了保存并使用数据
• 自定义属性的获取是通过getAttribute(‘属性’)获取
• H5规定自定义属性以 data- 开头作为属性名并赋值

4.节点操作

1.节点 ：有 节点类型(nodeType)、节点名称(nodeName)、节点值(nodeValue) 这三个属性

• 元素节点 nodeType为1
• 属性节点 nodeType为2
• 文本节点 nodeType为3 (包括文字、空格、换行等)

2.父级节点 parentNode 可返回某节点的一个最近的父节点，如果没有父节点则返回null

3.子节点

• childNodes 返回的是一个集合，不仅返回元素节点，还返回文本节点 使用的时候，父节点.childNodes
• children 返回所有子元素节点，只返回元素节点，不返回文本节点，一般这个用的比较多 父节点.children
• 另外如果想返回第一个子元素节点 用children[0] 中括号里面跟数字，就可返回第几个节点，第一个元素节点 从0 开始
  返回第一个子元素节点 父节点.children[0]
  最后一个可以用 父节点.children[父节点.children.length - 1]

4.创建节点 document.createElement(‘标签名’);

5.添加节点

• node.appendChild(child) 将一个节点添加到指定父节点的子节点的列表末尾

ul.appendChild(li) // 表示在ul下面添加一个li

• node.insertBefore(child,指定元素) 将一个节点添加至父节点的指定子节点的前面

ul.insertBefore(lis, li) // 将ul下面的li前面添加一个名为lis节点

6.删除节点

node.removeChild(child) // 删除当前节点的一个子节点

7.克隆(复制)节点

node.cloneChild()  // 复制一个节点

• 如果括号里面为空或者false ，为浅拷贝，只复制节点本身，不复制里面的子节点
• 如果括号里面加true，为深拷贝，会复制节点本身及里面所有子节点，包括文本节点、元素节点等等

<ul>
        <li>
            <a href="#"></a> 1
        </li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 只复制li标签
        // var li1 = ul.children[0].cloneNode();
        // 会复制整个li以及里面的子元素
        var li1 = ul.children[0].cloneNode(true);
        ul.appendChild(li1);
        console.log(ul);
    </script>

5.事件高级

1.注册事件（两种）

• 传统注册方式
  带on 开头的事件 如onclick
  特点：注册事件唯一性
  同一个元素同一个事件只能设置一个处理函数，而后面注册的函数 会覆盖前面注册的，以最后注册的那个为准
• 监听注册方式
  使用addEventListener()方法 事件前不带on
  特点：同一个元素同一个事件可以设置多个监听器
  按注册事件的顺序依次执行

2.删除(解绑)事件

• 传统注册方式

eventTarget.onclick = null;

• 监听注册方式

eventTarget.addEventListener('事件类型', fn) 
	function fn(){
		eventTarget.removeEventListener('事件类型', fn);
	}

6.DOM事件流

• 事件捕获：从DOM顶层节点开始，逐级向下传播到具体元素的接受过程
• 事件冒泡：事件开始由具体的元素接受，然后逐级向上传播到DOM顶层节点的过程

DOM事件流经历三个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

• js只能执行捕获或冒泡的其中一个阶段
• onclick 只能到冒泡阶段
• addEventListener(‘事件类型’，事件处理函数，[可选参数，为一个布尔值，默认为false]) 可选参数设置为true时，表示事件捕获阶段调用函数，false则为冒泡
  注意：
  有些事件是没有冒泡的， 比如 (on)focus,(on)blur,(on)mouseenter,(on)mouseleave

7.事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
例如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

事件对象属性方法	说明
e.target	返回触发事件的对象
e.type	返回事件的类型 如：click mouseover 不带on
e.preventDefault()	阻止默认事件
e.stopPropagation	阻止冒泡

事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

延伸案例：

1. 禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
})

2. 禁止鼠标选中（selectstart）

document.addEventListener('selectstart', function(e) {
	e.preventDefault();
})

3.鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相当于文档页面X坐标 IE9+支持
e.pageY	返回鼠标相当于文档页面Y坐标 IE9+支持
e.screenX	返回鼠标相当于电脑屏幕的X坐标
e.screenY	返回鼠标相当于电脑屏幕的Y坐标

// 跟随鼠标的天使案例
// 1.图片要移动距离不占位置，因此需要绝对定位
// 2.每次移动鼠标都可以得到鼠标在页面中的坐标，把鼠标的X和Y 给图片的left和top 后面记住一定要加单位px  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // console.log(e.pageX, e.pageY);
            img.style.left = e.pageX - 50 + 'px';
            img.style.top = e.pageY - 40 + 'px';
        })
    </script>
</body>

</html>

4. 键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 但是它不识别功能键 如 ctrl shift 箭头等

注意：

1. 使用addEventListener不需要加on
2. 三个事件的执行顺序：keydown --> keypress --> keyup

5. 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：

• onkeyup和onkeydown不区分字母大小写，onkeypress区分字母大小写
• onkeypress不识别功能键，keyCode能区分字母的大小写，返回不同的ASCII 值