1.新事件
(1)、鼠标事件
onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件:在鼠标指针移出元素后触发
onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发
onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur失去焦点事件:在鼠标光标失去焦点时触发。
onclick单击事件:在鼠标指针单击时触发
ondblclick双击事件:在鼠标光标双击时触发。
(2)、键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
(3)、浏览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
2、事件进阶
执行事件的步骤:获取元素、绑定事件、书写事件驱动程序
(1)、监听事件
绑定监听事件 addEventListener("事件的类型",事件的处理程序)
box1.addEventListener("click", myFunc)
解绑监听事件removeEventListener("事件的类型",事件的处理程序)
box1.removeEventListener("click", myFunc);
(2)、事件对象
任何事件都有内置对象event,事件对象的兼容性写法为
(3)、元素的坐标
1、clientX与clientY
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。 客户区指的是当前窗口。
2、pageX与e.pageY
pageX/Y:相对于文档边缘,包含滚动条距离
clientX/Y:相对于当前页面且不包含滚动条距离
有兼容性问题 从IE9以后才支持,pageY = clientY + 页面滚动出去的距离
(4)、事件冒泡
假设一个元素div,它有一个下级元素p。
<div>
<p>元素</p>
</div>
这两个元素都绑定了,如果用户点击了p,它在div和p上都触发了
4.阻止默认事件
(1)、阻止事件冒泡
阻止事件默认行为
什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
5.阻止a链接跳转
(1)、单return
<!-- 第一种方法 -->
<a href="https://www.baidu.com" οnclick="fn1(); return false">百度两下</a>
function fn1() {
alert("单击链接了哈");
}
第一种缺点:代码不分离,不符合低耦合,高内聚的规范
(2)、双return
<!-- 第二种方法 -->
<a href="https://www.baidu.com" οnclick="return fn2();">百度三下</a>
function fn2() {
alert("单击百度三了哈!");
return false;
}
第二种代码 缺点同上
(3)、先获取再绑定
<!-- 第三种方法 -->
<a href="https://www.baidu.com" id="link">百度四下</a>
document.getElementById("link").onclick = function () {
alert("单击百度四了哈!");
return false;
}
第三种 行为与结构分离
6.元素的属性操作
获取属性
getAttribute("属性的名字")
getAttribute("属性"):不仅可以获取元素本身的属性的属性值,还可以获取元素自定义的属性的属性值
设置属性
setAttribute("属性的名字","属性的值");
元素的属性的设置:不仅可以设置元素本身的属性,还可以设置元素自定义的属性
移除属性
removeAttribute("属性"):不仅可以移除元素本身的属性,还可以移除元素自定义的属性
7.元素样式设置的几种方式
-
对象.style
-
对象.className
-
对象.setAttribute("style")
-
对象.setAttribute("class")
-
对象.style.setProperty("CSS属性","CSS属性值")
-
对象.style.cssText