JavaScript-属性操作与事件

1.新事件

1.鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

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

onblur失去焦点事件：在鼠标光标失去焦点时触发。

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

ondblclick双击事件：在鼠标光标双击时触发。

2.键盘事件

onkeydown：键盘按下（用于input标签中当输入键盘按下的时候就可以出发这个事件）

onkeyup:键盘抬起  （按下后抬起的时候就会触发这个事件）

3.浏览器事件

onload:浏览器加载完成执行（当事件写到了获取的元素之前 会无法获取到该元素 不过使用onload后浏览器会先完成加载执行后续就不管谁在前都可以正常获取）

onscroll:滚动浏览器滚动条时触发（使用鼠标滑动浏览器的时候就会触发该事件）

2.事件进阶

1.监听事件

绑定监听事件为：addEventListener("事件的类型",事件的处理程序)

解绑监听事件为：removeEventListener("事件的类型",事件的处理程序)

2.事件对象

任何事件都有内置对象event，event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件对象的兼容性写法为:var event = event || window.event;

3.元素的坐标

clientX与clientY的客户区指的是当前窗口

pageX/Y：相对于文档边缘,包含滚动条距离

clientX/Y：相对于当前页面且不包含滚动条距离

4.事件冒泡

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。

若div和p标签都添加了点击事件那么点击p标签的时候会先触发p标签的点击事件后触发div的点击事件。

<div>
<p>元素</p>
</div>

注意：mouseenter不支持冒泡，而mouseover支持冒泡

5.阻止默认事件

1.阻止冒泡事件（设置后将不再出现冒泡事件的情况）

var event = event || window.event;

 event.stopPropagation();

2.阻止事件默认行为（设置后自带事件的标签将无法执行默认事件）

如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

6.阻止a链接跳转

1.单return（直接再a标签里边添加return false 将阻止a链接跳转）

缺点：代码不分离，不符合低耦合，高内聚的规范

2.双return（在a标签添加return fn2()后续给函数中添加return false;）

缺点：代码不分离，不符合低耦合，高内聚的规范

3.先获取再绑定（获取a标签给在script中添加点击事件函数为 return false;）

行为与结构分离

7.元素的属性操作

1.自定义属性（比如在标签中自定义一个name1）

2.获取属性

getAttribute("属性的名字")

getAttribute("属性"):（不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值）

3.设置属性

setAttribute("属性的名字","属性的值");（元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性）

4.移除属性

removeAttribute("属性"):（不仅可以移除元素本身的属性，还可以移除元素自定义的属性）

8.元素样式设置的几种方式

对象.style

对象.className

对象.setAttribute("style")

对象.setAttribute("class")

对象.style.setProperty("CSS属性","CSS属性值")

对象.style.cssText