JavaScript基础11--节点操作和事件设置

克隆节点
语法：node.cloneNode(deep)
功能：克隆一个节点
参数：deep

• false：默认值，表示浅复制：只会复制节点本身，不会复制节点的内部内容。
• true：深复制，会复制标签，以及标签内的所有内容

1. 克隆出来的节点跟原来的节点没有关系
2. 不要给要克隆的节点设置id

获取元素的属性节
语法：box.getAttributeNode(“id”)
获取的是 id=”box”; 还要通过.nodeValue;才能获取到ID的值。

兼容性的问题：
概念：某个功能无法在所有浏览器都能使用，就称这个功能具有兼容性问题。
解决问题：寻找替代性功能。（兼容性好的功能）。自己进行实现或者别用。
纯文本操作的兼容性问题：

1，innerText (这是IE提出的)   和  textContent;（是一个标准属性，有兼容性问题）
2，样式获取操作的兼容性问题
   方法结构：getComputedStyle();  获取计算后的样式,实际生效的样式。
   属性结构：currentStyle; //获取计算后的样式， 只有IE支持
3，兼容性解决方式：1.寻找替代功能，2.通过判断方式进行兼容性处理。3.找不到对应功能，自己实现即可。

有兼容性问题的元素获取方式：
根据类名获取元素：document.getElementsByClassName(“类名”);
根据选择器获取元素----只选择第一个满足条件的：document.querySelector(“选择器”);也可以通过元素调用。
根据选择器获取元素—选择所有符合条件的元素返回伪数组：document.querySelectorAll(“选择器”);可以使用各种选择器。也可以通过元素调用。

事件多种设置方式：
on+事件名称

onclick、onmouseover这种on+事件名称的方式注册事件几乎所有的浏览器都支持。

注册事件：

box.onclick = function(){
	//事件处理程序	
}

移除事件：

box.onclick = null;	

on+事件名称注册事件的缺点：

同一个元素同一类型的事件，只能注册一个，如果注册了多个，会出现覆盖问题。

注册事件的新方式
addEventListener与removeEventListener

现代浏览器支持的注册事件的新方式，这种方式注册的事件不会出现覆盖问题。

添加事件监听:addEventListener

//第一个参数：事件类型：click mouseover
//第二个参数：事件处理程序
//第三个参数：false
addEventListener(type, func, useCapture);

注意：如果想要让你注册的事件能够移除，不能使用匿名函数。

function fn1() {
    alert("hehe");
}
//如果想让注册的事件能移除，不能用匿名函数。
box.addEventListener("click", fn1, false);

移除事件监听:removeEventListen

//第一个参数：事件类型
//第二个参数：事件处理程序
//第三个参数：false
removeEventListener(type, func, useCapture);

attachEvent与detachEvent

IE678不支持addEventListener与removeEventListen两个方法，但是支持attachEvent与detachEvent

attachEvent的用法：

//type:事件类型   需要加上on   onclick  onmouseenter

detachEvent的用法:

//type:事件类型   需要加上on   onclick  onmouseenter
//func:事件处理程序
detachEvent(type, func)

事件流
执行的三个阶段：页面中的任意事件出发后都会

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

事件的传递方式：默认事件冒泡
事件冒泡的传递规则：当前元素出发后，会将事件传递给父元素，父元素的相同类型事件会被触发，并以此类推。
通常情况，事件冒泡对于我们来说是没有问题的，我们直接不管就行了，但是如果当事件冒泡给我们带来影响的时候，我们需要阻止事件冒泡。

阻止事件冒泡有浏览器兼容性问题

正常浏览器：

link.onclick = function (event) {
    event = event || window.event;
    //stop :停止  propagation：传播
    event.stopPropagation();
}

取消默认事件效果

event.preventDefault()；取消默认事件效果；
link.onclick = function (event) {
            console.log('a标签被点击了');
            // return false; - 通常推荐使用return false
            event.preventDefault();
        };

事件捕获:

事件捕获是火狐浏览器提出来的，IE678不支持事件捕获（基本上，我们都是用事件冒泡）
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有>祖先元素依次往下传递

//当addEventListener第三个参数为true时，表示事件捕获
arr[i].addEventListener("click", function () {
    console.log(this);
},true);

事件委托

将某些元素的事件设置给外部元素，并指定检测规则的一种设置方式，
好处：页面中已经存在的元素或动态创建的元素都可以使用事件。可以减少事件设置的数量。

页面加载过程中设置的事件无法生效于动态创建的元素
解决：

- 1 任意元素触发事件都会进行事件冒泡
             - 将事件设置给外部元素，例如div，这时内部的任意p标签都可以触发这个事件
- 2 问题：除了目标元素p以外，其他的一些元素例如span或者div自己也可以触发
              - 解决方式：可以在事件触发时判断当前元素是否为p标签
- 3 需要获取到真正触发事件的元素是哪一个
             - event.target
             - console.log(event.target);
- 4 检测这个元素是否符合规则
        var target = event.target;
        if (target.nodeName === 'P') {
            alert('这是p标签');
        } else if (target.nodeName === 'SPAN') {
            alert('这是span');
        }
    };

常见的事件

常见的鼠标事件

onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onclick:单击事件
ondblclick：双击事件
onmouseover：鼠标经过事件
onmouseout：鼠标离开事件
onmousemove：鼠标移动事件
onfocus：鼠标获得焦点事件
onblur：鼠标失去焦点事件

常见的键盘事件

onkeydown:键盘按下时触发
onkeyup:键盘弹起时触发

对于鼠标事件，事件对象中有一系列的XY记录了鼠标的位置信息。而键盘事件中，事件对象有一个event.keyCode属性，记录了按下去的键的键盘码

事件对象

在触发某个事件的时候，都会产生一个事件对象Event，这个对象中包含所有与事件相关的一些信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息。

鼠标事件触发时，事件对象中会包含鼠标的位置信息。
键盘事件触发时，事件对象中会包含按下的键相关的信息。

获取事件对象

既然事件对象中存储了这么多的信息，我们首先需要做的就是获取到这个事件对象。获取事件对象的时候，存在浏览器的兼容问题。

对于现代浏览器，获取事件对象非常的简单，只需要在注册事件的时候，指定一个形参即可。这个形参就是我们想要获取到的事件对象。

btn.onclick = function(event){
    //event就是事件对象，里面包含了事件触发时的一些信息。
	console.log(event);
}

对于IE678来说，获取事件对象则是另一种方式，在事件里面，通过window.event来获取事件对象

btn.onclick = function(){
	//IE678通过window.event获取事件对象
	var event = window.event;
	console.log(event);
}

兼容性封装

btn.onclick = function(event){
  	//只要用到了事件对象，就要记得处理浏览器兼容性
	event = event || window.event;
}

事件对象的常用属性

事件对象中有很多很多的属性，但是很多属性并不常用。我们经常用到的是鼠标位置信息 和键盘码 相关的信息。

记录了鼠标位置信息的相关属性

clientX与clientY：光标相对于可视区左上角的水平位置和垂直位置。
pageX与pageY：光标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）

记录了键盘码的属性

event.keyCode:键盘按下的那个键的键盘码
event.offsetWidth:获取元素真实宽度
event.offsetHeight;获取元素真实高度
event.offsetLeft;用于获取元素到外部距离最近的定位元素之间的距离；
		计算方式：当前元素的边框到定位元素的边框之间的距离。
				获取的结果为数值类型，并且只读。
event.offsetTop;用于获取元素到外部距离最近的 定位元素之间的距离。