JavaScript 事件
事件的绑定
-
兼容性很好，但是一个元素的同一事件只能绑定一个，基本等同于写在HTML行间上
div.onclick = function ()
-
IE9以下不兼容,可以为一个事件绑定多个处理函数，不能同一个函数绑定多次 this指向div
div.addEventListener("click", function () {
console.log("a");
}, false);
-
ie9用的，可以绑定多个处理函数，或多个相同的处理函数 this指向window
div.attachEvent("onclick",function(){
console.log("a");
});
绑定事件兼容性封装
/**
* 给任意元素绑定事件
* @param {任意元素} elem
* @param {事件类型} type
* @param {处理函数} handle
*/
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
//为了把this指向的window，改成this指向elem
handle.call(elem);
})
} else {
elem['on' + type] = handle;
}
}
事件的解除
- 直接赋值方法
div.onclick=null;
- 方法解除
div.removeEventListener('click',函数写到外面可以清除,false);
- ie9的解除
div.detachEvent('onclick',fn);
事件解除的封装
/**
* 删除事件
* @param {*} elem
* @param {*} type
* @param {*} handle
*/
function removeEvent(elem, type, handle) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
} else if (elem.detachEvent) {
elem.detachEvent("on" + type, handle);
} else {
elem["on" + type] = null;
}
}
事件处理模型
- 事件冒泡：结构上(非视觉上)嵌套关系的元素,会存在冒泡的功能,即同一事件,自子元素冒向父元素 focus blur change submit reset select没有冒泡
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
wrapper.addEventListener("click",function(){
console.log("wrapper");
},false);
content.addEventListener("click",function(){
console.log("content");
},false);
box.addEventListener("click",function(){
console.log("box");
},false);
- 事件捕获：结构上(非视觉上)嵌套关系的元素,会存在事件捕获事件,子父元素捕获至子元素 ie没有事件捕获
wrapper.addEventListener("click",function(){
console.log("wrapper");
},true);
content.addEventListener("click",function(){
console.log("content");
},true);
box.addEventListener("click",function(){
console.log("box");
},true);
触发顺寻 先捕获后冒泡 当前点击的为事件执行按照绑定顺序执行
取消事件冒泡
- w3c：e.stopPropagation();
- ie：e.cancelBubble=true;
默认事件
- 右键菜单事件
document.oncontextmenu=function(e){
// 禁止右键菜单事件
1、return false;
2、e.preventDefault(); //w3c标准
}
- a href="javascript:void(0)" 相当于return false 禁止默认事件
事件源兼容性获取方法
事件兼容性写法 var event= e|| window.event;
事件源兼容性写法 var target = event.target || event.srcElement
事件委托机制
var ul = document.getElementsByTagName("ul")[0]; //事件委托机制 性能高
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
拖拽事件封装
/**
* 拖拽实现
* @param {需要拖拽的元素} elem
*/
function drag(elem) {
var disX,
disY;
addEvent(elem, 'mousedown', function (e) {
var event = e || window.event;
disX = event.clientX - parseInt(getStyle(elem, 'left'));
disY = event.clientY - parseInt(getStyle(elem, 'top'));
addEvent(document, 'mousemove', mouseMove);
addEvent(document, 'mouseup', mouseUp);
stopBubble(event);
cancelHandler(event);
});
function mouseMove(e) {
var event = e || window.event;
elem.style.left = event.clientX - disX + "px";
elem.style.top = event.clientY - disY + "px";
}
function mouseUp(e) {
var event = e || window.event;
removeEvent(document, 'mousemove', mouseMove);
removeEvent(document, 'mouseup', mouseUp);
}
}
鼠标事件
click、mousedown、mouseup
click = mousedown+mouseup
mouseover、mouseout //进入区域 离开区域
mouseenter、mouseleave //进入区域 离开区域
区分左右键 mousedown mouseup e.button ==2 right e.button==0 left
dom3 click只监听左键
键盘事件
keydown、keyup、keypress
keydown > keypress > keyup
keydown 可以监测所有键
keypress 只返回有asii表的按键， (String.fromCharCode(e.charCode))
文本框事件
input 里面有变化就会触发
change 聚焦和失去焦点 变化触发
focus
blur
window事件
load
1、 浏览器渲染 过程 先domtree csstree rendertree
2、load 渲染过程完成执行 所有下载完成 尤其有大的图片下载的时候，load效率会很低 主程序不可以放load里面
