事件、属性、节点

事件、属性、节点

事件

阻止a标签跳转（三种写法）

第一种：在a标签内部，直接return false；
第二种：在a标签内部调用函数，在该函数内部 return false；
第三种：通过document.getElementById在外部调用函数去阻止跳转；

鼠标事件

移入移出
onmouseover 鼠标移入事件：鼠标指针移动到元素上时触发；
onmouseout 鼠标移出事件：鼠标指针移除元素后触发；
进入离开
onmouseenter 鼠标进入事件：鼠标进入到元素上时触发；
onmouseleave 鼠标离开事件：鼠标离开元素后触发；
二者区别
移入移出会出现冒泡；进入离开不会出现冒泡；
冒泡：子触发父，事件源是子；
不冒泡：不能由子触发父，事件源是父；

失去/获得焦点

onfocus 获取焦点事件：鼠标光标获取输入框焦点时触发；
onblur 失去焦点事件：在鼠标光标失去焦点时触发；

单机/双节

onclick 单击事件：在鼠标指针单击时触发；
ondblclick 双击事件：在鼠标指针双击时触发；

键盘事件

onkeydown：键盘按下时触发；
onkeyup：键盘抬起时触发；

浏览器事件

onload：浏览器加载完成执行；
onscroll：滚动浏览器滚动条时触发；

属性

元素自定义属性
标签除了自带属性外，程序员可以根据需求去自定义属性；
属性名 = ’ ';

设置方式

为元素添加属性，可以自定义属性；
setAttribute：DOM.setAttribute(“属性”,“值”);
获取元素的某个属性，也可以获取自定义的属性；
getAttribute：DOM.setAttribute(“属性”)；
删除元素的某个属性；
removeAttribute：DOM.removeAttribute(“属性”)；

设置css样式；
setProperty：DOM.style.setProperty(“属性”,“值”)；
setText：DOM.style.cssText=“属性：值；…”;
DOM.style.xxx=xxx;
设置已有的属性，不含自定义属性；
DOM.属性=‘值’;

节点
HTML文档中所有的内容都是节点。
整个文档是个文档节点 document；
每个HTML元素是元素节点；
HTML元素内的文本是文本节点；
每个HTML属性是属性节点；
注释是注释节点；

nodeType属性：可以获取节点类型
document 9
标签 1
属性 2 ------ getAttributeNode（“属性”）：获取属性节点
文本 3
注释 8

nodeName属性：可以获取节点名
元素节点的nodeName与标签名相同；
属性节点的nodeName与属性名相同；
文本节点的nodeName始终是#text；
文档节点的nodeName始终是#document；

nodeValue属性：规定节点的值
元素节点的nodeValue是undefined或null；
文本节点的nodeValue是文本本身；
属性节点的nodeValue是属性值；

常用方法
getElementById(id)：获取带有指定id的节点（元素）；
appendChild(node)：插入新的子节点（元素）；
removeChild(node)：删除子节点（元素）；
常用属性
innerHTML：节点（元素）的文本值；
parentNode：节点（元素）的父节点；
childNodes：节点（元素）的子节点；
attributes：节点（元素）的属性节点；

节点关系
嵌套关系（父子关系）、并列关系（兄弟关系）；
父节点 parentNode
父元素节点 parentElement
子节点 childNodes；标签节点、文本节点、注释节点得到的是维数组；
子元素节点：children；
第一个子节点：firstChild；
第一个子元素节点：firstElementChild；
最后一个子节点：lastChild；
最后一个子元素节点：lastElementChild；
上一个子节点：previousSibling；
上一个子元素节点：previousElementSibling；
下一个子节点：nextSibling；
下一个子元素节点：nextElementSibling；

节点的创建
1.document.write();
2.innerHTML = “”;
3.父元素.appendChild(子元素)；

事件三要素
事件源、事件类型、事件驱动程序；

事件绑定
会发生覆盖问题，使用addEventListener不会发生事件覆盖；
事件解绑
事件名.onclick = null;
事件名.removeEventListener(‘click’,function);

事件对象
任何事件都有内置对象event；
兼容性写法：
var event = event || window.event;

事件源妙用
绑定事件之后，若要新增元素；新元素不会拥有事件监听；
可以利用事件源，对父盒子绑定事件；通过绑定真正触发事件的元素，进行操作；

事件冒泡
如果父与子标签，绑定相同的事件监听，如果触发子元素的事件时，
会从子到父一次触发绑定了该事件的元素事件；
捕获机制：恰巧相反，从父到子一次触发；

冒泡事件：事件从事件目标（target）开始，往上冒泡直到页面的最上一级标签。