1.事件目标: 事件目标 target --> event.target 真正触发事件的对象
兼容性写法
正常浏览器：event.target
IE6、7、8： event.srcElement
var target = event.target || event.srcElement;
2.添加事件的新方式
1.通过添加事件监听器的方式注册事件：addEventListener
参数1：事件名称 参数2：事件处理函数 参数3：是否使用捕获
2、IE678添加事件监听器：attachEvent(事件名称，事件处理函数 )
代码写法
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.attachEvent("onclick",function(){alert("1")})//ie6.7.8可使用,谷歌不用使用
btn2.addEventListener("click",function(){alert("2")},false)谷歌可使用
注意事项:
attachEvent 用onclick,两个参数
addEventListener 用click,三个参数
不管是onclick还是click都是字符串,需要加上””
兼容性所有浏览器的函数写法
//封装 兼容所有浏览器的添加事件的函数
//element要绑定事件的元素对象 eventName是字符串而且不加on listener事件处理函数
function addEvent(element, eventName, listener) {
if (element.addEventListener) {
element.addEventListener(eventName, listener, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, listener);
} else {
//element.onclick = listener;
//element["onclick"] = listener;
element["on" + eventName] = listener;
}
}
3.移除事件的新方式
1. 重新定义，覆盖前面的注册事件
2. 移除事件监听器：
removeEventListener 参数与绑定时相同
detachEvent IE678
兼容性所有浏览器的函数写法
封装 兼容所有浏览器的移除事件的函数
function removeEvent(element, eventName, listener) {
if (element.removeEventListener) {
element.removeEventListener(eventName, listener, false);
} else if (element.detachEvent) {
element.detachEvent("on" + eventName, listener);
} else {
element["on" + eventName] = null;
}
}
事件对象的兼容处理
1、获取事件对象：getEvent
2、获取鼠标页面座标： pageX、pageY
3、阻止冒泡函数 stopPropagation( )
4、返回事件目标：getTarget
代码如下:
document.onclick = function (event) {
var event = getEvent(event);
var pageX = getPageX(event);
var pageY = getPageY(event);
stopPropagation(event);
var target = getTarget(event);
};
//封装获取事件对象的兼容方式
function getEvent(event) {
return event || window.event;
}
//封装获取鼠标在页面上的水平坐标的兼容方式
function getPageX(event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
}
//封装获取鼠标在页面上的竖直坐标的兼容方式
function getPageY(event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
}
//封装阻止冒泡的兼容方式
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
//封装获取事件目标的兼容方式
function getTarget(event) {
return event.target || event.srcElement;
}
事件对象兼容处理的进一步封装
1. 声明一个对象：eventUtil 来存储方法
2. 刚刚的兼容方法都写在对象里面
3. 好处: 1.方便 2.避免了全局变量的命名冲突污染
document.onclick = function (event) {
var event = eventUtils.getEvent(event);
var pageX = eventUtils.getPageX(event);
var pageY = eventUtils.getPageY(event);
eventUtils.stopPropagation(event);
var target = eventUtils.getTarget(event);
};
var eventUtils = {
getEvent: function (event) {
return event || window.event;
},
getPageX: function (event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
4.鼠标事件和键盘事件
1、onkeydown：键盘按下相同 摁下不放一直执行
2、onkeypress：键盘按下 onkeydown最本质的区别是键盘码
3、onkeyup：键盘弹起
4、onkeydown\onkeyup使用的是键盘码 onkeypress使用的是Ascll码
5.按回车键切换文本框
1、检测按下的是哪个键：e.keyCode === 13
2、元素获取焦点：obj.focus();
6.按esc关闭
1、检测按下的键对应的值：e.keyCode === 27
2、键盘按键对 就隐藏盒子
7.表单事件
onfocus 获取焦点
onblur 失去焦点
oninput 在输入的时候执行
onchange 失去焦点后如果表单元素的内容发生了改变 这个时候就会执行
网友评论