目录
fdf!!
fefd
一、JS中的事件二、JS中的事件分类:
1.事件初级:
2.事件参数 Event
3.鼠标事件
4.键盘事件 ***
5.表单事件 ***
6.文档事件 *
7.图片事件 *
8.页面事件 *****
三、事件的绑定与取消
三、事件对象:
四、事件的冒泡与默认事件 *****
一、JS中的事件
什么是事件: 页面标签在满足某种条件下可以完成指定功能的这种过程,称之为事件
某种条件: 如鼠标点击标签: 单击事件 | 鼠标双击标签: 双击事件 | 鼠标悬浮标签: 悬浮事件 | 键盘按下: 键盘按下事件
指定功能: 开发者根据实际需求完成相应的功能实现
钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
点击事件: 明确激活钩子的条件= 激活钩子后该处理什么逻辑指定完成功能
事件使用简单案例:
var div = document.querySelector(".div"); // 找到的是第一个.div
div.onclick = function () {
// alert(123)
this.style.backgroundColor = "pink";
}
// 明确第一个及第二个
var divs = document.querySelectorAll('.div');
divs[1].ondblclick = function () {
divs[0].style.backgroundColor = "yellow";
}
事件使用案例:(事件控制标题栏)
首先对网页做架构:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件控制标题栏</title>
<style>
.part1 div {
100px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
cursor: pointer;
}
.part1 {
overflow: hidden;
}
h2 {
height: 30px;
}
</style>
</head>
<body>
<div class="part1">
<div class="b1">标题栏</div>
<div class="b2">标题栏</div>
<div class="b3">标题栏</div>
<div class="b4">标题栏</div>
</div>
<h2></h2>
</body>
</html>
第一种方式:使用事件一步一步实现
<script>
var b1 = document.querySelector('.b1');
// 鼠标悬浮事件
b1.onmouseenter = function () {
console.log("鼠标悬浮上了");
// 悬浮上后,该标签的字体颜色变化橘色
this.style.color = "#FF6700";
}
// 需求并非为鼠标移走,去除颜色
b1.onmouseleave = function () {
this.style.color = "#000";
}
</script>
第二种方式:
使用循环绑定的方式进行多个标题的控制
在这里使用var和let进行循环绑定时的区别:
var是没有块级作用域的概念的,也就是说在这里使用var进行循环绑定,i 的值在循环外边也是可以访问的,在循环的时候就会不断被修改,在本题中,i 的值最终会被修改为4.
使用let的时候let具有块级作用域的概念,在每次循环都是会产局部作用域的,在局部作用域中产生的变量,在外部不能被访问的,所以使用了let之后,每次循环 i 的值都是新的,这就简单解决了变量污染的问题
在这里还要注意在JS中函数的定义和调用不是严格遵守先定义后调用的原则的, 它交给浏览器解析的时候会有一个编译过程,会将文档中产生的所有名称存放起来,所以在函数定义的上边进行函数的调用也是没有问题的,在编译过程结束之后才会执行函数里边的代码体
<script>
// 制作数据
var data = ["标题1", "标题2", "标题3", "标题4"];
var divs = document.querySelectorAll('.part1 div');
console.log(divs);
// 循环绑定 => 会出现变量(i)污染(在这里使用局部作用域解决)
for (let i = 0; i < divs.length; i++) {
divs[i].onmouseenter = function () {
// 打印自身索引值
console.log(i);
// 将自身颜色变为橘色,其他兄弟颜色变为黑色
// 就是i为橘色, 非i为黑色
changeColor(i);
// 悬浮内容
changeContent(i)
}
}
// console.log(i);
// 自定义的修改颜色的方法
function changeColor(index) {
for (let i = 0; i < divs.length; i++) {
// 先不管三七二十一,全改成黑色
divs[i].style.color = "black";
// 如果是目标选中标签,它的颜色再重新设置为橘色
if (i == index) {
divs[i].style.color = "#FF6700";
}
}
}
var h2 = document.querySelector('h2');
// 修改内容
function changeContent(index) {
h2.innerText = data[index];
}
</script>
二、JS中的事件分类:
1.事件初级:
onload：页面加载完毕事件，只附属于window对象
onclick：鼠标点击事件
ondblclick: 鼠标双击事件
onmouseenter|鼠标悬浮 (常用)
onmouseleaver|鼠标移开(常用)
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件
onfocus：表单元素获取焦点
onblur：表单元素失去焦点
2.事件参数 Event
存放时间信息的回调参数
3.鼠标事件
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
鼠标的事件参数:
ev.clientX : 鼠标点击点X坐标
ev.clientY : 鼠标点击点
4.键盘事件 ***
键盘事件
onkeydown：键盘按下
onkeyup： 键盘抬起
事件参数ev
ev.keyCode：按键编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键
5.表单事件 ***
onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件
6.文档事件 *
文档事件由window调用
onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
7.图片事件 *
onerror：图片加载失败
8.页面事件 *****
onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离
三、事件的绑定与取消
一、事件的两种绑定方式
1、on事件绑定方式与移除
on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
console.log("文档点击");
}
// 事件的移除
document.onclick = null;
2、非on事件绑定方式与移除
该绑定方式可以为一个元素绑定多个事件, 按照绑定顺序依次执行
addEventListener第三个参数(true|false)决定冒泡的方式
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
三、事件对象:
什么是事件对象: 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
该函数对象中几乎包含了该对象支持的所用样式的事件设置,例如:特殊按键,鼠标点击点等等
在这里引入一个万物皆为假的说法,(就是在js中事件的设置默认都是为false的,例如默认cancleBubble(取消冒泡)=false的)
// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
// 使用事件对象
// 特殊按键 eg: ev.altKey: true | false
// 鼠标触发点: ev.clientX | ev.clientY
// 取消冒泡
ev.cancelBubber = true;
// 取消默认事件
return false;
}
四、事件的冒泡与默认事件 *****
事件的冒泡：父子都具有点击事件，不处理的话，点击子级父级也会发出相应的点击事件
解释: 子级响应时间后, 会将事件传递给父级, 如果父级有相同事件, 也会被激活, 最终船体给document
取消冒泡,当自身处理事件后, 该事件就处理完毕 , 不会再向父级传递
取消冒泡的方式:
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
console.log("body click");
}
</script>
默认事件：取消默认的事件动作，如鼠标右键菜单
取消默认事件时可以将返回值设置为false,当系统看到函数返回值为false的时候,就不会自动执行默认事件动作了
取消默认的事件动作方式:
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二
return false;
}
body.oncontextmenu = function (ev) {
console.log("body menu click");
}
</script>
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85129608