事件
用户和浏览器之间的交互行为我们就称之为事件,比如：点击，移入/移出
给元素绑定事件
- 在JavaScript中所有的HTML标签都可以添加事件
- 当对应事件被触发时候就会自动执行
function中的代码
元素.事件名称 = function(){};
事件示例
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
alert("按钮被点击了");
}
// 如果给元素添加了和系统同名的事件, 添加的事件不会覆盖系统添加的事件
let oA = document.querySelector("a");
oA.onclick = function () {
alert("a标签被点击了");
// 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
return false;
}
添加事件的三种方式
- 通过
onxxx的方式来添加
// 由于是给属性赋值, 所以后赋值的会覆盖先赋值
oBtn.onclick = function () {
alert("666"); // 不会弹出
}
oBtn.onclick = function () {
alert("777");
}
- 通过
addEventListener方法添加
// 事件名称不需要添加on
// 后添加的不会覆盖先添加的
// 只支持最新的浏览器IE9及以上
oBtn.addEventListener("click", function () {
alert("666");
});
oBtn.addEventListener("click", function () {
alert("777");
});
- 通过
attachEvent方法添加
// 事件名称必须加上on
// 后添加的不会覆盖先添加的
// 只支持低版本的浏览器
oBtn.attachEvent("onclick", function () {
alert("666");
});
oBtn.attachEvent("onclick", function () {
alert("777");
});
- 兼容性写法
addEvent(oBtn, "click", function () {
alert("666");
})
addEvent(oBtn, "click", function () {
alert("777");
})
function addEvent(ele, name, fn) {
if(ele.attachEvent){
ele.attachEvent("on"+name, fn);
}else{
ele.addEventListener(name, fn);
}
}
事件对象
事件对象就是一个系统自动创建的一个对象，当注册的事件被触发的时候, 系统就会自动创建事件对象
事件对象的注意点
- 在高级版本的浏览器中, 会自动将事件对象传递给回到函数
- 在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
- 在低级版本的浏览器中, 需要通过
window.event来获取事件对象
let oBtn = document.getElementById("btn");
oBtn.onclick = function (event) {
// 兼容性的写法
event = event || window.event;
console.log(event);
console.log(typeof event);
}
let oA = document.querySelector("a");
oA.onclick = function (event) {
// 兼容性的写法
event = event || window.event;
alert("666");
// 阻止默认行为
return false; // 企业开发推荐
// 注意点: preventDefault方法只支持高级版本的浏览器
// event.preventDefault();
// IE9以下的浏览器
// event.returnValue = false;
}
事件冒泡和捕获
事件的三个阶段
- 捕获阶段(从外向内的传递事件)
- 当前目标阶段(执行回调函数)
- 冒泡的阶段(从内向外的传递事件)
注意点
三个阶段只有两个会被同时执行，要么捕获和当前, 要么当前和冒泡
设置事件捕获或冒泡
// 通过addEventListener方法, 这个方法接收三个参数
// 第一个参数: 事件的名称
// 第二个参数: 回调函数
// 第三个参数: false冒泡 / true 捕获
oFDiv.addEventListener("click", function () {
console.log("father");
}, false);
oSDiv.addEventListener("click", function () {
console.log("son");
}, false);
// onXxx的属性, 不接收任何参数, 所以默认就是冒泡
// attachEvent方法, 只能接收两个参数, 所以默认就是冒泡
事件冒泡应用
/*
- 我是第1个li
- 我是第2个li
- 我是第3个li
- 我是第4个li
- 我是第5个li
*/
let oUl = document.querySelector("ul");
let oLi = document.querySelector(".selected");
oUl.onclick = function (event) {
event = event || window.event;
oLi.className = '';
let item = event.target;
item.className = 'selected';
oLi = item;
};
阻止事件冒泡
oSDiv.onclick = function (event) {
event = event || window.event;
// 阻止事件冒泡兼容性写法
if(event.cancelBubble){
// 低级浏览器
event.cancelBubble = true;
}else{
// event.stopPropagation() 只支持高级浏览器
event.stopPropagation();
}
console.log("son");
}
移入移出事件区别
onmouseover和onmouseenter的区别
-
onmouseover移入到子元素,父元素的移入事件也会被触发 -
onmouseenter移入到子元素,父元素的移入事件不会被触发
onmouseout和onmouseleave的区别
-
onmouseout移出到子元素,父元素的移入事件也会被触发 -
onmouseleave移出到子元素,父元素的移入事件不会被触发
事件位置获取
-
offsetX/offsetY：事件触发相对于当前元素自身的位置 -
clientX/clientY：事件触发相对于浏览器可视区域（不包括滚动出去的范围）的位置 -
pageX/pageY：事件触发相对于整个网页（包括滚动出去的范围）的位置 -
screenX/screenY：事件触发相对于屏幕的位置
注意点
-
clientX/clientY无论高级浏览器还是低级浏览器都支持 -
pageX/pageY只有高级浏览器支持, 低级浏览器是不支持的(IE9以下)
定时器
在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器
重复执行的定时器
// 每隔1秒会执行一次函数
id = setInterval(function () {
console.log("666");
}, 1000);
// 结束定时器
clearInterval(id);
只执行一次的定时器
// 3秒后执行一次函数
id = setTimeout(function () {
console.log("666");
}, 3000);
// 结束定时器
clearTimeout(id);
表单事件
- 想要获取
input中输入的内容，只能通过value属性获取 - 获取焦点
onfocus - 失去焦点
onblur - 内容改变
onchange，只有在表单失去焦点之后才能拿到 - 内容改变
oninput实时获取内容（IE9及IE9以上） - 如果通过JS代码给
input设置数据，那么不会触发oninput事件 - 内容改变
onpropertychange实时获取内容（IE9以下） - 在JS中如果HTML标签的属性和取值一样，那么JS会返回
true/false