目录
鼠标类事件
鼠标左键单击(鼠标按下+鼠标抬起):
// 获取div标签
var oDiv = document.querySelector('div');
// 左键单击事件
oDiv.addEventListener('click' , function(){ console.log(111) });
鼠标左键双击
// 获取div标签
var oDiv = document.querySelector('div');
// 左键双击事件
oDiv.addEventListener('dbclick' , function(){ console.log(111) });
右键单击
// 获取div标签
var oDiv = document.querySelector('div');
// 右键单击事件
oDiv.addEventListener('contextmenu' , function(){ console.log(111) });
默认效果可以阻止;
document.addEventListener( 'contextmenu' , function( event ){
// 阻止默认事件
event.preventDefault();
})
鼠标按键按下
var oDiv = document.querySelector('div');
oDiv.addEventListener( 'mousedown' , function(){
console.log('鼠标按键按下了');
})
鼠标键抬起
var oDiv = document.querySelector('div');
oDiv.addEventListener( 'mouseup' , function(){
console.log('鼠标按键抬起了');
})
mousemove
在 事件源 范围内移动 会触发事件,鼠标移动才能触发事件 鼠标只是悬停 不能触发事件
var oDiv = document.querySelector('div');
oDiv.addEventListener( 'mousemove' , function(){
console.log('div的鼠标移动了');
})
7.鼠标移入移出
-
事件源标签 和 事件源标签的后代标签 都会触发
mouseover 鼠标移入
mouseout 鼠标移出
特点:经过 后代标签边界线时 同时触发 移入移出两个事件 触发执行的顺序是 先移出 再移入
2. 事件源标签 会触发
mouseenter 鼠标移入 mouseleave 鼠标移出
var oDiv = document.querySelector('div');
// 鼠标移入事件 over
oDiv.addEventListener( 'mouseover' , function(){
console.log('over移入事件触发了')
})
// 鼠标移入事件 enter
oDiv.addEventListener( 'mouseenter' , function(){
console.log('enter移入事件触发了')
})
// 鼠标移出事件 out
oDiv.addEventListener( 'mouseout' , function(){
console.log('out移出事件触发了')
})
// 鼠标移出事件 leave
oDiv.addEventListener( 'mouseleave' , function(){
console.log('enter移出事件触发了')
})
键盘类事件
1.不是所有的标签都能直接绑定键盘事件,只有可以获取焦点的标签支持直接绑定键盘事件
input select textarea button a
其他标签需要使用 事件抛发的语法形式 绑定事件
// 一般是给整个文档绑定键盘事件
document.addEventListener( 'keydown' , function(event){
console.log( 111 ) });
document.documentElement.addEventListener( 'keydown' , function(){
console.log( 222 ) });
document.body.addEventListener( 'keydown' , function(){
console.log( 333 ) });
不是所有的按键都会触发keypress,但是keydown所有的键都会触发
触摸类事件
移动端设定,pc端不适应
- touchstart:触摸开始
- touchend:触摸结束
- touchmove:触摸滑动
表单事件
1.获取焦点
oIpt.addEventListener('focus', function () {
// 让span标签显示
oSpanMsg.style.display = 'block';
})
2.失去焦点
oIpt.addEventListener('blur', function () {
// 让span标签隐藏
oSpanMsg.style.display = 'none';
})
3.失去焦点并且数据改变
数据改变是:获得焦点与失去焦点数据不相同;
oIpt.addEventListener('change', function () {
console.log('change');
})
4.input输入事件
oText.addEventListener( 'input' , function(){
// 获取 文本域输入的内容
var text = oText.value ;
// 在 文本域span标签中写入字符串长度数据
oSpanText.innerHTML = `${text.length} / 50` ;
})
5.load输入事件
javaScript中最常用到的一个事件就是load。当页面完全加载后(包括所有图像、javaScript文件、css文件等外部资源),就会触发window上边的load事件。
常用于Ajax请求;
oBtn.addEventListener( 'click' , ()=>{
// 创建 ajax 实例化对象
const xhr = new XMLHttpRequest() ;
// 设定 open() 请求方式 请求地址
xhr.open( 'post' , 'http://localhost:8888/test/fourth' );
// 设定 请求头格式 正确解析携带参数
// 通过 一个固定的代码程序 执行的
xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
// 设定 send() 发送请求
// post请求方式 在 send() 中 以 键值对字符串形式 携带参数
// '键名=键值&键名=键值...'
// 键名是后端程序规定好的键名 键值是input标签输入的数据
xhr.send(`name=${oIptName.value}&age=${oIptAge.value}`);
// 通过 load事件 请求结束 执行程序
xhr.addEventListener( 'load' , ()=>{
console.log( xhr.response );
})
})
事件对象
- 在设定事件处理函数时,在事件处理函数中设定形参,一般设定形参为e/event
-
触发事件时 JavaScript程序 自动向这个形参赋值实参,赋值的内容是一个对象形式的数据
- 事件对象.target
- 触发事件的标签对象
- 可以是事件源,可以是事件源后代
- 本质上是DOM操作获取对象
事件传播
产生原因:事件源与父级标签绑定了相同的事,当事件源执行时,父标签也会触发相同的事件操作
默认传播方式:当前------父级标签 ;也被称为冒泡传播
设置传播方式:父级标签-----当前标签;被称为捕获传播;
当前标签.addEventListener(事件类型,执行函数,true);
阻止事件传播:事件对象.stopPropagation()
键盘事件 事件对象数据信息
触发键盘事件时 事件对象存储的是 按键相关的数据信息
事件对象.keyCode
事件对象.witch
触发键盘事件 按键的编号
document.addEventListener( 'keydown' , function(event){
console.log( event );
// 判断同时按住 ctrl + v
// 按键v 的编号是 86 ctrlKey 是 true 表示两个案件同时按住
if( event.keyCode === 86 && event.ctrlKey ){
console.log( 'ctrl + v 同时按下了' )
}
})
点击事件 事件对象的相关数据
- 鼠标点击位置距离触发事件标签左上角坐标
- 事件对象.offsetX
- 事件对象.offsetY
- 鼠标点击位置距离body标签左上角坐标
- 事件对象.pageX
- 事件对象.pageY
- 鼠标点击位置距离可视窗口左上角坐标
- 事件对象.clientX
- 事件对象.clientY
事件委托
一般用于动态生成页面的标签 绑定事件,给父级标签绑定事件;
优点:通过 事件对象.target 判断点击的是什么标签 触发执行程序操作;
<div>
我是div标签
<p>我是p标签</p>
<span name="span1">我是span标签1</span>
<span name="span2">我是span标签2</span>
<h1>我是h1标签</h1>
</div>
<script>
var oDiv = document.querySelector('div');
oDiv.addEventListener('click', function (event) {
// console.log(event.target, event.target.tagName);
if (event.target.tagName.toLowerCase() === 'div') {
console.log('我是div标签');
}
else if (event.target.tagName === 'P') {
console.log('我是P标签');
}
else if (event.target.getAttribute('name') === 'span1') {
console.log('我是span1标签');
}
else if (event.target.getAttribute('name') === 'span2') {
console.log('我是span2标签');
}
})
</script>