javascript事件详解1

事件流讲解来袭，嘎嘎嘎嘎嘎

----------------------------------------------------------------

1.事件流：描述的是在页面中接受事件的顺序。

2.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。

3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。

--------------------------------------------------------------------

事件处理：

1.HTML事件处理：直接添加到HTML结构中（例：之前的onclick等，可以往前查看例子）。

2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对2）：<div id="div">

<button id="btn">按钮</button>

</div>

<script>

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

btn.onclick=function(){

alert("hello,DOM0级事件处理程序1。");

}

</script>

结果：界面出现，鼠标点击按钮后，弹出对话框

若在上述代码中稍做改变：

<div id="div">

<button id="btn">按钮</button>

</div>

<script>

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

btn.onclick=function(){

alert("hello,DOM0级事件处理程序1。");

}

btn1.onclick=function(){

alert("hello,DOM0级事件2.");

}

</script>

结果：界面出现一按钮，鼠标点击后弹出对话框

我们可以发现对二个函数对第一个进行了覆盖，即这就是DOM0级事件的缺点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.DOM2级事件处理：

（1）addEventListener("事件名"，“事件处理函数”，“布尔值”)

true：事件捕获。

false:事件冒泡。

（2）removeEventListener();

详细前几我上篇里面的 DOM EventListener.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

例：

<div id="div">

<button id="btn">按钮</button>

</div>

<script>

var btn1=document.getElementById("btn").addEventListener("click",demo);

function demo(){

alert("DOM2事件。");

}

</script>

结果：按钮，点击按钮，弹出提示框DOM2事件。

优点：对比于DOM0级事件，DOM2级不会有覆盖现象。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-----------------------------------------------------------------------------------------

4.IE事件处理程序

attachEvent:添加事件；

detachEvent:移除事件。

（ps:这两个的运用原理跟addEventListener()和removeEventListener()差不多，只是涉及到浏览器的是否能执行后用的，处理兼容问题。）

-------------------------------------------------------------------------------------------

例：(解决了兼容问题的例子，综合例子。)

<div>

<button id="btn1">按钮</div>

</div>

<script>

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

if(btn1.addEventListener()){

btn1.addEventListener("cilck",demo);

}else if(btn1.attachEvent){

btn1.attachEvent("onclick",demo);

}else{

btn1.onclick=demo();

}

function demo(){

alert("综合例子");

}

</script>