JavaScript中的事件

返回索引

1.事件流

74集 事件流
概念:
1.什么是事件流? 描述的是页面中接受事件的顺序
2.事件冒泡:由页面中最具体的元素接收,然后事件逐级向上传播至最不具体的元素的节点(文档)
3.事件捕获:不具体的节点先接收事件,而最具体的节点应该是最后接收到事件
注:目前在JavaScript中利用"事件冒泡"方式进行事件处理兼容性更好

 

2.事件处理

事件处理(第75集)
浏览器对JavaScript的事件处理的机制
概念:
1.HTML事件处理:直接添加(事件处理代码)到HTML结构中
2.DOM0级事件处理:把一个函数赋值给一个对象的事件处理程序属性
3.DOM2级事件处理
 addEventListener("事件名","事件处理函数","布尔值"); 
true:事件捕获
fasle:事件冒泡
removeEventListener();
4.IE事件处理程序相关,指得是<=IE8
 attachEvent  detachEvent 

第1种JavaScript编程方式就是我们平时最常用那种JavaScript事件处理coding风格,俗称硬插风格,即直接在html节点中coding JS事件处理代码

 <button id="btn1" onclick="demo()">按钮</button> 

第2种方式(DOM0级事件处理)

var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello, DOM0级事件处理程序")};

知道: DOM0级事件处理机制有"事件"被所谓覆盖的问题

第3种方式

var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
    btn1.addEventListener("click",demo);//DOM2级事件处理方式
}else if(btn1.attachEvent){
    btn1.attachEvent("onclick",demo);//IE8级以下的事件处理方式
}else{
    btn1.onclick = demo(); //DOM0级事件处理
}
function demo(){alert("Hello JavaScript事件处理机制")}

3.事件对象

事件对象(76集)
1.概念: 事件对象:指"目标"在被触发DOM事件的时候都会产生一个对象,这个对象可以以参数形式被JavaScript引擎传给对应的事件处理函数,请看代码理解.
2.事件对象event:JavaScript中为这个对象提供些属性和方法便于我们操作
事件对象event常用属性和方法
1).type:获取事件的类型
2).target:获取事件目标
3).stopPropagation() 阻止事件冒泡
4).preventDefault(): 阻止事件默认行为

document.getElementById("btn1").addEventListener("mouseover",showType);
function showType(event){
    alert(event.type);
}

3.核心概念:

事件默认行为; 阻止事件的默认行为