一、事件
(1)、鼠标事件
onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件:在鼠标指针移出元素后触发
完成对无序列表的隔行换色;
//鼠标移入事件
box1.onmouseover = function () {
this.style.fontSize = "26px";
this.style.height = "60px";
console.log(111)
}
// 鼠标移出事件
box1.onmouseout = function () {
this.innerText = "鼠标移出了哈!";
this.style.height = "30px";
this.style.fontSize = "16px";
}
onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发
// 鼠标进入事件
box2.onmouseenter = function () {
this.style.borderRadius = "12px";
this.style.backgroundColor = "blue";
}
//鼠标的离开事件
box2.onmouseleave = function () {
this.style.borderRadius = "0";
this.style.backgroundColor = "purple";
}
onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur失去焦点事件:在鼠标光标失去焦点时触发。
//获取焦点事件
user.onfocus = function () {
this.style.border = "3px solid red";
this.style.outline = "0";
}
// 失去焦点事件
user.onblur = function () {
console.log(this.value);
}
onclick单击事件:在鼠标指针单击时触发
ondblclick双击事件:在鼠标光标双击时触发。
box1.ondblclick = function () {
this.style.backgroundColor = "yellow";
}
(2)、键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
document.getElementById("user").onkeydown = function () {
console.log("按下了!!1");
}
document.getElementById("user").onkeyup = function () {
console.log("抬起来了!!1");
console.log(this.value);
}
(3)、游览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
window.onscroll = function () {
console.log("滚动了!");
}
二、事件进阶
(1)、监听事件
绑定监听事件 addEventListener("事件的类型",事件的处理程序)
box1.addEventListener("click", myFunc)
function myFunc() {
this.style.backgroundColor = "blue";
}
解绑监听事件removeEventListener("事件的类型",事件的处理程序)
box1.removeEventListener("click", myFunc);
(2)、事件对象
任何事件都有内置对象event,event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件对象的兼容性写法为
var event = event || window.event;
// 事件的类型
console.log(event.type);
// 元素的ID
console.log(event.target.id);
// 文本的内容
console.log(event.target.innerText);
// 事件的触发点是距离浏览器左侧的横纵坐标
console.log("横坐标:" + event.clientX + "," + "纵坐标:" + event.clientY);
console.log("横坐标:" + event.pageX + "," + "纵坐标:" + event.pageY);
console.log("我单击header!");
(3)、元素的坐标
1、clientX与clientY
clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。 客户区指的是当前窗口。
2、pageX与e.pageY
pageX/Y:相对于文档边缘,包含滚动条距离
clientX/Y:相对于当前页面且不包含滚动条距离
有兼容性问题 从IE9以后才支持,pageY = clientY + 页面滚动出去的距离
(4)、事件冒泡
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
假设一个元素div,它有一个下级元素p。
<div>
<p>元素</p>
</div>
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
注意:mouseenter不支持冒泡,而mouseover支持冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onmouseover&onmouseenter</title>
<style>
#outer{
position: relative;
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid #ccc;
}
#inner{
position: absolute;
left: -50px;
top: 0;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
outer.onmouseenter = function(e){
console.log(e.target.id) // outer
}
outer.onmouseover = function(e){
console.log(e.target.id) // inner
}
</script>
</body>
</html>
(5)、阻止默认事件
1、阻止事件冒泡
<body>
<div id="outer">
<p id=inner>这是盒子中的p标签</p>
我是div#outer
</div>
</body>
<script>
inner.addEventListener("click", function (event) {
// 阻止默认冒泡事件的发生
var event = event || window.event;
// propagation n. 传播; 英[ˌprɒpə'ɡeɪʃ(ə)n]
event.stopPropagation();
console.log("我单击到P元素上了!");
})
outer.addEventListener("click", function () {
console.log("我单击到div元素上了!");
})
</script>
2、阻止事件默认行为
什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
<a href="http://www.baidu.com">测试</a>
$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});
三、元素属性操作
(1)、自定义属性
元素除了本身的属性之外可以设置自定义属性
<div id="box1" class="box_1" name1="divObj">我是盒子</div>
(2)、获取属性
getAttribute("属性的名字")
getAttribute("属性"):不仅可以获取元素本身的属性的属性值,还可以获取元素自定义的属性的属性值
console.log(in1.getAttribute("type"));//text
console.log(in1.getAttribute("name"));//user
console.log(in1.getAttribute("id"));//text1
console.log(in1.getAttribute("style"));//color: red;
(3)、设置属性
setAttribute("属性的名字","属性的值");
元素的属性的设置:不仅可以设置元素本身的属性,还可以设置元素自定义的属性
setObj1.onclick = function () {
in1.setAttribute("name", "password");
// in1.setAttribute("class", "");
in1.className = "";
// in1.setAttribute("style", "border:5px dotted pink");
in1.style.border = "5px dotted pink";
console.log(in1.getAttribute("name"));//password
}
(4)、移除属性
removeAttribute("属性"):不仅可以移除元素本身的属性,还可以移除元素自定义的属性
var removeObj = document.getElementById("remove");
removeObj.onclick = function () {
in1.removeAttribute("class");
div1.removeAttribute("name1");
}