事件流
1. 冒泡:从内到外
2. 捕获:从外到内
事件处理程序===》添加
1.HTML事件处理程序
语法:把事件添加到了节点身上
缺点:HTML和js耦合
2.DOM0级事件处理程序
语法:box.onclick = function(){}
缺点:同样的元素,同样的事件,后面的会覆盖前面
3.DOM2级事件处理程序
语法:box.addEventListener(事件名称,函数,false|true)
参数1:不需要加on ===>click
参数3: false代表了冒泡
true代表了捕获
缺点:在IE(8或者8以下)不兼容
4.IE事件处理程序
语法:box.attachEvent(事件名称,函数)
参数1》需要加入on
5.跨浏览器事件处理程序(做兼容)
DOM0事件处理程序
DOM2事件处理程序
IE事件处理程序
删除事件处理程序
dom0级事件处理程序删除===》
语法:DOM对象.事件名称 = null
dom2级事件处理程序删除===》
语法:DOM对象.removeEventListener(事件名称,函数,false|true)
参数1.事件名称不需要加入on
参数2.函数,添加和删除必须都是同一个函数,才有效
参数3.false===>冒泡 true===》捕获
IE事件处理程序删除===》
语法:DOM对象. attachEvent(事件名称,函数)
参数1.事件名称需要加入on
参数2.函数,添加和删除必须都是同一个函数,才有效
事件对象
非IE中事件对象====》参数
IE中事件对象===》window.event
跨浏览器事件对象===》window.event || e(参数)
事件对象的属性
1.target(非IE)===》目标(返回对应的DOM节点)
2.srcElement(IE中)====》目标(返回对应的DOM节点)
处理兼容: 事件对象.target||事件对象.srcElement
3.clientX ===》返回当前鼠标位置距离浏览器左侧的值
4.clientY ===》返回当前鼠标位置距离浏览器顶部的值
****注意:返回的结果是没有加入单位的
事件委托
原理:冒泡的原理
优点:
1.性能较好(提高)
2.即使后添加的也有效
一、
事件阻止冒泡
语法:
事件对象.属性名称
非IE:e.stopPropagation
E:e.cancelBubble = true;
事件阻止默认行为
语法:
事件对象.属性名称
非IE:e.preventDefault()
IE:e.returnValue = false;
案例:小人快跑
var img = document.getElementById("img"),
index = -1;
function fn(ve){
index++;
if(index>4){
index = 0;
}
img.src = "images/" + ve + "-" + index + ".png";
}
document.onkeydown = function(e){
var e = window.event || e;
console.log(e.keyCode);
switch(e.keyCode){
case 37:
img.style.left = img.offsetLeft - 10 + "px";
fn("left")
break;
case 38:
img.style.top = img.offsetTop - 10 + "px";
fn("up")
break;
case 39:
img.style.left = img.offsetLeft + 10 + "px";
fn("right")
break;
case 40 :
fn("down")
img.style.top = img.offsetTop + 10 + "px";
break;
}
}
放大镜
var min = document.getElementById("min"),
max = document.getElementById("max"),
b = document.getElementsByTagName("b")[0],
img = document.getElementById("img");
min.onmousemove = function(e){
b.style.display = "block";
max.style.display = "block";
var x = e.clientX + document.documentElement.scrollLeft - min.offsetLeft - b.offsetWidth/2;
var y = e.clientY + document.documentElement.scrollTop - min.offsetTop - b.offsetHeight/2;
if(x<0){
x=0
}else if(x>min.offsetWidth-b.offsetWidth){
x=min.offsetWidth-b.offsetWidth
}
if(y<0){
y=0
}else if(y>min.offsetHeight-b.offsetHeight){
y=min.offsetHeight-b.offsetHeight
}
b.style.left = x + "px";
b.style.top = y + "px" ;
img.style.left = -2*x+"px"
img.style.top = -2*y+"px"
}
min.onmouseout = function(){
b.style.display = "none";
max.style.display = "none";
}
哒哒哒
var ddd = document.getElementById("ddd")
document.onkeydown = function(e){
var e = window.event || e;
switch(e.keyCode){
case 37:
ddd.style.left = ddd.offsetLeft - 10 + "px";
break;
case 38:
ddd.style.top = ddd.offsetTop - 10 + "px";
break;
case 39:
ddd.style.left = ddd.offsetLeft + 10 + "px";
break;
case 40:
ddd.style.top = ddd.offsetTop + 10 + "px";
break;
case 32:
game(ddd.offsetTop,ddd.offsetLeft + ddd.offsetWidth/2)
break;
}
}
function game(top,left){
for(var i=0;i<5;i++){
var pos = document.getElementById("pos"+i)
console.log(i);
if(pos.style.display == "none"){
pos.style.display = "block";
pos.style.left = left+"px";
pos.style.top = top+"px";
break;
}
}
}
setInterval(function(){
for(var i =0;i<5;i++){
var pos = document.getElementById("pos"+i)
pos.style.top = pos.offsetTop -10 + "px"
if(pos.offsetTop<-1){
pos.style.display = "none";
}
}
},50)
lalalalalala
属性 当以下情况发生时,出现此事件 FF N IE
onabort 图像加载被中断 1 3 4
onblur 元素失去焦点 1 2 3
onchange 用户改变域的内容 1 2 3
onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onerror 当加载文档或图像时发生某个错误 1 3 4
onfocus 元素获得焦点 1 2 3
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
onload 某个页面或图像被完成加载 1 2 3
onmousedown 某个鼠标按键被按下 1 4 4
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
onmouseup 某个鼠标按键被松开 1 4 4
onreset 重置按钮被点击 1 3 4
onresize 窗口或框架被调整尺寸 1 4 4
onselect 文本被选定 1 2 3
onsubmit 提交按钮被点击 1 2 3
onunload 用户退出页面