js事件类型及处理

1.事件类型

onClick单击事件

onMouseOver鼠标经过事件

onMouseOut 鼠标移出事件

onChange文本内容改变事件

onSelect文本框选中事件

onFocus光标聚集事件

onBlur移开光标事件

onLoad网页加载事件

onUnload关闭网页事件

2.事件处理

a.HTML事件处理

直接添加到HTMl结构中

<input type="text" onclick="demo()"/>

b.DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

<script>

var btn=document.getElementById("btn");

btn.onclick=demo;

</script>

注意：demo非demo();l

c.DOM2级事件处理

<script>

var btn=document.getElementById("btn");

btn.addEventListener("click",demo);

</script>

注意上述参数是click而不是onclick，且demo非demo();l

addEventListener("事件名“，”事件处理函数“）

removeEventListener();移除事件监听

3.事件对象event属性

type：事件类型

target：事件目标

stopPropagation();阻止事件冒泡

stopDefault();阻止事件默认行为

4.事件冒泡与事件捕获

冒泡从最具体元素开始接收，逐级上传。

捕获从最不具体元素开始捕获，最具体的元素最后接收。