一、事件处理程序
事件处理程序是指响应某个事件的函数。
DOM中事件处理程序大概可以分为以下三种类型:
(1)HTML事件处理程序
(2)DOM0级事件处理程序
(3)DOM2级事件处理程序
DOM版本有DOM0、DOM1、DOM2和DOM3
DOM0和DOM2有自己独立的事件绑定和解绑方式。
二、HTML事件处理程序
直接将事件函数写到HTML中元素属性上
<button onclick="alert(hello world!)"></hello>
双引号中的代码是事件触发后执行的代码,是由eval()调用的,它是全局作用域。
<button onclick="add()"></hello>
第二种写法存在时差问题,如果用户在界面刚出现就进行点击,而JS还没有加载好的话,就会报错,此外,一个函数的改变,可能同时需要js和html的改变。
三、DOM0级事件处理程序
1、事件绑定
对象.οnclick=function(){ }
同一元素同时绑定相同事件,后面会覆盖前边。
<body>
<div id="box"></div>
<button>解绑</button>
<script>
window.onload = function () {
var box = document.querySelector('#box');
var btn = document.querySelector('button');
//dom0 绑定
box.onclick = function () {
console.log('我是dom0级事件1')
};//我是dom0级事件1
box.onclick = function () {
console.log('我是dom0级事件2')
};//我是dom0级事件
}
2、事件解绑
解绑本质:把事件属性和事件回调函数断开连接
//点击btn之后 解绑box的单击事件
btn.onclick = function () {
box.onclick = null;
}
四、DOM2级事件处理程序
同一对象,可以绑定多个相同事件。
1、高级浏览器
高级浏览器事件是从上到下执行的
(1)绑定:.addEventListener(‘click’,fun,false)
第一个参数:事件名称 !!!不带on
第二个参数:回调函数
第三个参数:控制事件阶段:默认是false冒泡
box.addEventListener("click",function(){
console.log('今天中午吃多了')
},false)
box.addEventListener('click',fun,false);
function fun() {
console.log('晚上就不吃了')
}
(4)解绑:.removeEventListener(‘click’,fun)
解绑形参与绑定形参要一致
事件需要解绑,那么函数必须定义成有名函数
btn.onclick = function () {
box.removeEventListener('click',fun)
}
box.onclick=function(){
box.removeEventListener(fun)
}
2、IE浏览器
低级浏览器事件是从下到上执行
(1) .attahEvent(‘onclick’,fun)
box.attachEvent("onclick",function(){
console.log("今天晚上又吃了")
})
box.attachEvent("onclick",fun);
function fun(){
console.log("伤心")
}
(2) .detachEvent(‘onclick’,fun)
btn.onclick = function(){
box.detachEvent("onclick",fun)
}
3、两种绑定事件的区别
(1)方法名不同
(2)兼容性不同
(3)参数不同
(4)有on 无on
(5)addEvenListener中的this指向当前绑定对象,attachEvent中的this指向window
五、兼容性封装dom2级事件绑定与解绑
var box = document.getElementById('box');
// 参数1:要绑定事件的元素
// 参数2:要绑定的事件类型
// 参数3:事件的回调函数
function addEvent(node,eventType,callback){
if(node.addEventListener){
// 高级浏览器
node.addEventListener(eventType,callback);
}
else{
// 低级浏览器
eventType = "on" + eventType
node.attachEvent(eventType,callback);
}
}
// 测试
addEvent(box,'click',f1)
function f1(){
console.log('f1函数')
}
//兼容性封装dom2级事件解绑
var btnobj = document.getElementById('btn');
function removeEvent(node,eventType,callback){
// 高级浏览器解绑
if(node.removeEventListener){
node.removeEventListener(eventType,callback);
}
// 低级浏览器
else{
node.detachEvent('on'+eventType,callback)
}
}
// 测试
btnobj.onclick=function(){
removeEvent(box,'click',f1)
}
}
六、事件对象
1、 是什么?
(1)event ev e
(1)事件在触发时,系统封装的对象,称为事件对象。
(2)包含本次事件触发所有的相关信息。
(3)事件对象在高级浏览器触发的时候,系统会将事件对象作为实参,传递给回调函数第一个形参。
(4)低级浏览器把事件对象,作为window的一个属性 window.event
2、 应用
(1)keyCode判断键
window.onload = function () {
var inputNode = document.querySelector('input');
// 按下回车 打印哈哈哈
inputNode.onkeyup = function (event) {
event =event || window.event
if(event.keyCode == 13){
// 按下回车后 才会执行if里边的逻辑
console.log("哈哈哈");
}
}
(2)获取鼠标位置
<body>
<div id="box"></div>
<script>
window.onload = function () {
var box = document.getElementById('box');
box.onclick = function (event) {
// 鼠标按下的位置相对于视口的左上角的坐标
console.log(event.clientX,event.clientY);
// 鼠标按下的位置相对于页面左上角的坐标
console.log(event.pageX,event.pageY);
//鼠标按下的距离元素边界的相对坐标
console.log(event.offsetX,event.offsetY);
//鼠标按下距离屏幕左上角的坐标
console.log(event.screenX,event.screenY);
}
}
(3)事件委派获取目标元素
event.target当前目标元素
(4)阻止事件冒泡
谷歌火狐:event.stopPropagation()
IE:event.cancelBubble=true
(5)阻止默认行为
常见的默认行为:
阻止超链接跳转、在form中按回车会自动提交表单
阻止默认行为:
dom0:return false
dom2:event.preventDefault()