JS-事件
目录
事件 event
事件类型
执行事件的3个步骤:
获取事件源;
注册事件 (绑定事件) {传统注册事件,方法监听注册事件} (传统注册事件只有冒泡过程)
添加事件处理程序 (函数赋值的形式)
编辑
编辑
addEventListener [ add 添加] [Event 事件 ] [listner 监听,听众]
addEventListener 方法监听注册方式
事件源.addEventListener("事件类型",function(){}) 事件类型不加on,引号引起来; function是事件处理函数;
移除事件: 事件源.removeEventListener('click', 处理函数, false); //函数名要一致才能被移除;
attchEvent 注册事件 ie9以前的,兼容性差; IE专属
注册/移除事件的三种方式
事件流
事件对象, e要加到事件函数中去;
e.targent 返回触发事件的对象(元素)
e.type 返回事件的类型
阻止默认行为 e.preventDefault() [prevent 阻止] [default 默认的]
阻止冒泡 [propagation 传播 ,宣传]
冒泡阶段, 从下到上; 通过e.stopPropagation() 进行阻止事件的冒泡
鼠标事件的对象
键盘事件的对象
事件 event
事件是可以被JavaScript侦测到的行为;浏览器监听用户行为的一种机制 ;
简单理解∶触发---响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件.
例如 :当用户使用鼠标 点击 一个按钮，会触发该按钮的 点击 事件 如果此时我们想要执行代码 就可以通过JS脚本设置 点击 事件的处理函数
事件事件三要素 : 事件源; 事件类型; 事件处理程序;
事件源:事件被触发的对象;
事件类型:即触发什么事件; 传统注册事件: on事件类型
事件处理程序: 通过函数赋值的方法完成;
传统注册事件; on事件类型
var box = document.getElementById('box'); //获得事件源
box.onclick = function() { //事件源 box //on事件类型 onclik //事件的处理程序是 通过函数赋值;
console.log('代码会在box被点击后执行');
};box.onclick = null; //移除事件 事件源.on事件类型 = null; 移除事件
事件类型
鼠标事件 [mouses [maʊs] 鼠标.老鼠]
鼠标事件的对象:
click 点击事件
dblclick 双击事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件(一次click包含一次mousedown和 一次mouseup)
mouseover 鼠标进入事件
mouseenter 鼠标进入事件
mouseout 鼠标离开事件
mouseleave 鼠标离开事件
mousemove 鼠标移动事件
键盘事件 [key 钥匙,键]
常见的键盘事件对象:
keydown 键盘键被按下
keyup 键盘键被松开
keypress 键盘按键 (不识别功能键)
执行顺序: keydown------keypress-------keyup
浏览器的事件
浏览器事件的对象:
load 页面中所有资源都被加载完毕的时候 [load 负载,加载]
scroll 页面的卷动
resize 页面尺寸发生变化 [resize 调整大小]
表单元素事件
表单元素事件的对象:
focus 当一个元素获取到焦点时
blur 当一个元素失去焦点时
change 当一个表单元素内容改变并失去焦点时
input 当一个表单元素内容有输入时
submit 当一个表单元素被提交时
reset 当一个表单被重置时
移动端事件 [touch 触摸]
移动端事件的对象:
touchstart 触摸开始事件 会在手指按下的时候触发
touchmove 触摸并移动 会在手指按下并移动的时候触发
touchend 触摸结束事件 会在手指离开的时候触发
其它事件
其他事件的对象:
animationstart 动画开始时触发
animationend 动画结束时触发
animationcancel 动画取消 [cancel [ˈkænsl] 取消]
transitionstart 过渡开始触发
transitionrun 过渡中
transitionend 过渡结束时触发
transitioncancel 过渡取消
执行事件的3个步骤:
-
获取事件源;
-
注册事件 (绑定事件) {传统注册事件,方法监听注册事件} (传统注册事件只有冒泡过程)
-
添加事件处理程序 (函数赋值的形式)
-
- 事件源 . on事件类型 = 事件处理程序(函数)
addEventListener [ add 添加] [Event 事件 ] [listner 监听,听众]
addEventListener 方法监听注册方式
事件源.addEventListener("事件类型",function(){}) 事件类型不加on,引号引起来; function是事件处理函数;
第三个参数为true, 是捕获阶段; 为false或不写, 是冒泡阶段;
移除事件: 事件源.removeEventListener('click', 处理函数, false); //函数名要一致才能被移除;
div2.addEventListener("click", function fn() {
console.log(123);
div2.removeEventListener("click", fn); //移除事件名字一致
});
attchEvent 注册事件 ie9以前的,兼容性差; IE专属
注册/移除事件的三种方式
var box = document.getElementById('box');
box.onclick = function () {
console.log('点击后执行');
};
box.onclick = null; //移除事件
box.addEventListener('click', 处理函数, false);
box.removeEventListener('click', 处理函数, false); //移除函数, 函数名要一致
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
事件流
只有绑定了事件才有事件流
事件冒泡：当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡 (由下到上)
事件捕获：当点击时 事件从最顶层元素 一层一层的往下触发 直到最精确元素 这个过程叫做事件捕获 (由上到下)
最精确元素： 鼠标点到谁 谁就是最精确元素
最顶层元素：
高级浏览器 最顶层元素是window
IE中 最顶层元素是 document
事件对象, e要加到事件函数中去;
div.onclick = function(e) {
// e 就是事件对象 我们可以根据它获取到许多的信息 兼容性有问题
var e = e || window.event; //兼容ie的写法
}只有绑定了事件才有事件对象
e.targent 返回触发事件的对象(元素)
e.type 返回事件的类型
阻止默认行为 e.preventDefault() [prevent 阻止] [default 默认的]
高级浏览器中 可以通过 e.preventDefault() 阻止默认行为
// 获取元素
var a = document.getElementsByTagName("a")[0];
// 设置点击事件
a.addEventListener("click", function(e) {
console.log("点击了a标签1111");
e.preventDefault();
}, false);------------------------------------------------------------------------------------------
IE浏览器中 可以通过 e.returnValue = false; 阻止默认行为
// 获取元素
var a = document.getElementsByTagName("a")[0];
// 设置点击事件
a.attachEvent("onclick", function(e) {
console.log("点击了a标签1111");
e.returnValue = false;
});-----------------------------------------------------------------------------------------------
DOM0级事件绑定方式中，可以通过return false进行阻止默认行为,也可以通过 e.preventDefault( );
// 获取元素
var a = document.getElementsByTagName("a")[0];
// 设置点击事件
a.onclick = function() {
return false;
}
阻止冒泡 [propagation 传播 ,宣传]
冒泡阶段, 从下到上; 通过e.stopPropagation() 进行阻止事件的冒泡
高级浏览器中 可以通过e.stopPropagation() 进行阻止事件的冒泡
// 高级浏览器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
box1.onclick = function() {
console.log("这是BOX1");
}
box2.onclick = function(e) { //别忘了 e写到事件函数中去
e.stopPropagation();
console.log("这是BOX2");
}----------------------------------------------------------------------------------------
IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡 //取消冒泡
// IE浏览器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
box1.onclick = function() {
console.log("这是BOX1");
}
box2.onclick = function(e) {
var e = e || window.event;
e.cancelBubble = true;
console.log("这是BOX2");
}
- 今天是2021年6月6日21:32:11
- 今天是2021年6月6日21:32:11
- 今天是2021年6月6日21:32:11
- 今天是2021年6月6日21:32:11
- 今天是2021年6月6日21:32:11
[context menu 上下文菜单]
加油,加油
鼠标事件的对象
[client 客户端] [page 页面] [screen 屏幕]
键盘事件的对象
