事件的绑定语法
语法形式1
事件监听:
标签对象.addEventListener('click',function(){ })
语法形式2
on语法绑定
标签对象.onclick = function(){ }
事件绑定的三要素
标签对象 : 事件源 , 也就是绑定事件的标签对象
click : 事件类型 , 也就是绑定给标签对象的事件的类型.
function(){} : 事件处理函数 , 也就是触发事件时执行的函数程序 , 是回调函数语法形式, 可以是函数名称, 可以是匿名函数.
on语法 和 事件监听语法的区别:
on语法 是 通过 = 赋值绑定的事件处理函数
= 本质上是覆盖赋值 , 后赋值的数据会覆盖之前存储的数据 ,
也就是on语法 一个标签对象相同的事件类型只能赋值绑定一
个事件处理函数 , 如果赋值绑定多个处理函数 , 后赋值的事件
处理函数会覆盖之前存储的事件处理函数 , 最终执行的是最后
赋值的事件处理函数.
事件的删除语法
on语法绑定的事件的删除
因为 on语法是 = 等于赋值操作 , 只要赋值一个null/空函数时 , 触发事件时, 就没有调用执行的函数程序 , 达到删除事件的效果.
事件监听语法的删除
需要调用专门的删除函数方法 ,
标签对象.removeEventListener('事件类型',事件处理函数) ;
只能删除绑定的是函数名称的事件处理函数 , 如果绑定的是匿名函数则不能删除.
总的来说:
实际操作中 , 如果不需要删除事件处理函数 , 推荐使用匿名函数语法形式.
实际操作中 , 如果必须要删除事件处理函数 , 只能绑定函数名称.
事件对象 event
事件处理函数中 , 参数存储的数据数值 , 是触发事件的对象 相关数据信息 .
触发事件的对象 和 绑定事件的 不一定是同一个对象 .
触发事件时 , JavaScript程序自动向形参中存储实参 , 也就是向事件对象中自动存储触发事件的 标签对象 相关的数据信息.
事件源.addEventListener(事件类型, function(事件对象){ })
事件对象.target
存储的是触发事件的标签对象
支持所有的DOM操作.
事件对象中的坐标数据
e.offsetX
e.offsetY
相对于触发事件标签对象 左上角的坐标
如果div嵌套p标签
点击的p标签 e.offsetX e.offsetY 就是相对于 p标签左上角的坐标
点击的div标签 e.offsetX e.offsetY 就是相对于 div标签左上角的坐标
e.clientX
e.clientY
相对于视窗窗口左上角的坐标
e.pageX
e.pageY
相对于HTML页面左上角的坐标
默认事件
默认事件是html标签默认执行的程序结果.
阻止默认事件 :
在事件处理函数中定义一个形参 , 形参名称一般是 e / event
标签对象.addEventListener(‘事件类型’, function(e/event){
形参.preventDefault();
})
事件类型:
1, 超链接的点击跳转
给超链接添加点击事件
2, form标签的点击跳转
给form标签添加submit提交事件
3, 鼠标右键
给document添加contextmenu 鼠标右键事件
兼容性:
标准浏览器
e.preventDefault();
低版本IE浏览器
e.returnValue = false;
<body>
<a href="https://www.baidu.com">百度</a>
<form action="./DOM操作的节点操作.html">
<button>点击</button>
</form>
</body>
<script>
// a标签阻止默认跳转
// 获取标签对象
var oA = document.querySelector('a');
// 阻止超链接标签 , 执行默认的点击跳转操作
oA.addEventListener('click',function(event){
// 阻止执行默认事件
event.preventDefault();
})
// form标签阻止默认跳转
// 获取form标签
var oForm = document.querySelector('form');
oForm.addEventListener('submit',function(e){
//阻止执行默认事件
e.preventDefault();
})
//鼠标右键阻止默认事件
// 给整个document添加事件
document.addEventListener('contextmenu ' , function(e){
e.preventDefault();
console.log(1110);
})
// contextmenu 鼠标右键 , 阻止默认事件
</script>
阻止事件的传播 / 阻止冒泡事件
父级标签 和后代标签 添加了相同类型的事件 , 如果 后代标签 触发事件 ,父级标签也会触发相同类型的事件 , 这样的执行原理称为 事件的传播性/冒泡事件 .
阻止事件的传播语法:
标签对象.addEventListener('事件类型',function(e){
e.stopPropagation();
})
事件传播的方式
之前的旧版本中事件的传播方式有两种:
捕获
子级 ---> 父级
冒泡
父级 ---> 子级
现在新版本浏览器中默认只有冒泡 , 没有捕获
事件监听语法绑定事件处理函数 , 参数3 如果设定为true事件的传播执行捕获方式 .
标签对象.addEventListener('click' , function(){ } , true) ;
常见的事件类型
window相关的事件类型
1, window.addEventListener('resize';function(){ })
浏览器视窗窗口大小监听事件
2, window.addEventListener('scroll';function(){ })
页面滚动监听事件
3, window.addEventListener('load',function(){ })
浏览器加载事件
4, window.open(url地址)
新窗口打开url连接
5, window.close()
关闭当前窗口
鼠标相关的事件类型
1, click 鼠标左键单击
2, dbclick 鼠标左键双击
3, contextmenu 鼠标右键单击
4, mousedown 鼠标按键按下
mouseup 鼠标按键抬起
(一个单击事件的判定 ,是鼠标按键按下 和 鼠标按键抬起 两个动作)
5, mousemove 鼠标移动
在定义的标签对象范围内, 移动借触发事件, 一直移动一直触发
6, mouseover 鼠标移入
经过 标签对象的边缘时 , 触发一次事件, 它的后代对象也会触发事件
mouseout 鼠标移出
经过后代标签边界线时 , 触发移出移入两个事件, 移出当前标签 , 移入下一个标签.
7, mouseenter 鼠标移入
当前的标签触发, 后代标签不会触发.
mouseleave 鼠标移出
键盘相关的事件类型
1, keydown 键盘按键按下
2, keyup 键盘按键抬起
3, keypress 键盘按键按下
表单相关事件 (常见的可以获取焦点的标签)
1, submit 表单提交事件
2, focus 标签获取焦点
3, blur 标签失去焦点
4, change 标签失去焦点同时数据改变
5, input 输入数据
移动端事件
1, touchstart 触摸开始
2, touchend 触摸结束
3, touchmove 触摸移动
特殊事件
transitionstart 过渡开始
transitionend 过渡结束
animationstart 动画开始
animationend 动画结束
事件委托语法
不是直接给标签对象绑定事件 , 而是给父级元素绑定事件 , 通过 事件对象.target 来判断 触发事件的不同的标签对象 , 以执行不同的函数程序.
1, 标签对象.target 就是一个 DOM 标签对象 .
2, 标签对象.target.tagName 是大写英文字符的标签名称
3, 标签对象.target 执行DOM 操作判断 点击的是什么标签
实际操作中 ,只要根据不同的条件能触发不同的if判断 ,执行不同的程序.
事件委托语法的优点:
1, 只给一个标签对象添加事件 , 通过判断,执行不同的程序 , 执行效率更高 .
2, 更加有利于动态渲染生成的标签来添加事件 .
<1> 一开始没有 动态生成的标签
一开始就获取标签对象 , 无法获取到的 获取结果只能是null , 不能直接绑定事件
<2> 一开始有 之后 会 动态写入替换这个标签
一开始绑定的事件 如果替换写入了其他标签 , 这个一开始就存在的标签就会被覆盖替换掉 , 绑定的事件也就没有了
因此 ,动态渲染生成的标签 使用 事件委托 , 给一直存在的父级 添加事件 , 通过事件委托判断事件对象.target 是什么
标签 触发什么程序.
<h1>
我是h1标签
<span>我是span标签</span>
<a href="JavaScript:;">我是a标签</a>
</h1>
...
var oH1 = document.querySelector('h1');
oH1.addEventListener('click',function(e){
if(e.target.tagName === 'H1'){
console.log('我是h标签') ;
} else if(e.target.tagName === 'SPAN'){
console.log('我是span标签') ;
}else if(e.target.getAttribute('href') === 'JavaScript:;'){
console.log('我是a标签');
}
})