JavaScript--事件模型

1、HTML事件处理程序

　1.直接在HTML中定义事件处理程序及动作：

<input type="button" value="Click" onclick="alert('click')">

　2.在HTML定义事件处理程序，调用其他地方的执行函数：

<script>
function show(){
alert("hello world！");
}
</script>
<input type="button" value="Click" onclick="show()">

- 局部变量event就是指事件对象，onclick="alert(event.type)"弹出click事件
- this值等于时间目标元素，比如onclick="alert(this.value)",可以得到input的value值。

2、DOM0级事件处理程序

　　优势：简单、跨浏览器的

　　弱点：每次只能绑定一个事件，多次绑定会覆盖前面的事件。

<script>
var btn= document.getElementById("btn");
btn.onclick= function () {
alert("hello world！");
}
</script>
<input type="button" value="Click" id="btn">

　　删除DOM0级事件程序：

btn.onclick=null

3、DOM2级事件处理程序

　　定义了两个方法添加和删除事件处理程序：addEventListener()和removeEventListener();

　　都接受三个参数：事件名，事件处理程序的函数，布尔值

　　布尔值：参数是true，表示捕获阶段调用事件处理程序；参数是false，表示在冒泡阶段调用事件处理程序。

使用DOM2方法添加两个事件处理程序。

var btn=document.getElementById("btn");
        btn.addEventListener("click", function () {
            alert("helllo world");
        },false);
        btn.addEventListener("click", function () {
            alert(this.id);
        },false);
<input type="button" value="hello" id="btn"/>

　　通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除；移除的时候传入的参数与添加事件处理程序的参数相同。

 var btn=document.getElementById("btn");
    btn.addEventListener("click", function () {
        alert("hello");
    },false);
    btn.removeEventListener("click", function () {//没有效果
        alert("hello");
    },false);

　　上面removeEventListener()中的参数，看似和addEventListener()所用的相同，实际不同。

var btn=document.getElementById("btn");
    var handler=function () {
        alert("hello");
    }
    btn.addEventListener("click",handler ,false);
    btn.removeEventListener("click",handler,false);//有效

4、IE事件处理器

　　IE中也定义两个方法添加和删除事件处理程序：attachEvent( )和detachEvent( );

　　两个相同参数：事件名，事件处理程序函数

- IE11只支持addEventListener()和removeEventListener();和DOM的的弹出顺序一样。
- IE9和IE10对attachEvent( )和addEventListener( )都支持//下面的代码可以尝试

<input id="btn" type="button" value="click"/>
var btn=document.getElementById("btn");
    btn.addEventListener("click",function () {
        alert("hello");
    } ,false);
    btn.addEventListener("click",function () {
        alert("world");
    } ,false);

　使用attachEvent( )和detachEvent( )

<input id="btn" type="button" value="click"/>

var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function () {
        alert("hello");
    });
    btn.attachEvent("onclick", function () {
        alert("world");
    });

　　删除事件处理程序：attachEvent添加的事件处理程序，必须通过detachEvent删除，参数必须一致。

　　同DOM一样，匿名函数无法删除，删除事件处理程序，代码可以这样：

var btn=document.getElementById("btn");
    var handler= function () {
        alert("hello world");
    };
    btn.attachEvent("onclick", handler);
    btn.detachEvent("onclick",handler);

　　作用域：在IE中的attachEvent()和DOM中的addEventListener( )主要区别也正于，作用域。

- DOM2或DOM0级的方法作用域在元素内部，this、值为目标元素。
- attachEvent( )方法，事件处理程序是在全局作用域，this==window

<input type="button" value="click" id="btn">//只能在IE10及以下才能运行
var btn=document.getElementById("btn");
    var handler= function () {
        alert(this==window);
    };
    btn.attachEvent("onclick", handler)

5、事件对象

bubble 　　　　　　表明时间是否冒泡

cancelable 　　表示是否可以取消事件冒泡的默认行为

currentTarget 　　其实事件处理程序当前正在处理时间的那个元素

defaultPrevented　为true表示已经调用了preventDefault( )(DOM3级事件中新增)

detail 　与事件相关的细节

eventPhase 表示事件处于程序阶段：1、表示捕获阶段，2、表示“处于目标阶段，3、表示冒泡阶段

preventDefault( ) 取消事件默认行为。如果cancelable是true，则可以使用这个方法

stopImmediatePropagation( ) 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件新增）

stopPropagation( ) 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法

target 事件目标

trusted 为true表示浏览器生成，为false表示事件由开发人员通过javascript创建(DOM3级事件中新增)

type　　　　　　　被触发的事件类型

view 与事件关联的抽象视图，等同于事件的window对象

dom.dispatchEvent():模拟事件中触发事件

6、DOM 事件流

DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

这里借了个图。

假设我们点击了<div>元素，我们会按上图中的顺序触发事件。

捕获阶段从document到<html>再到<body>后结束

然后就是“处于目标”阶段，最后一次返回document(冒泡阶段)

http://runjs.cn/detail/le6kbt1r //查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        #parent{
            border: solid 1px black;
            width: 200px;
            height: 200px;
        }
        #child{
            border: solid 1px yellowgreen;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li id="parent">
            我是parent
            <span id="child">
               我是child
            </span>
        </li>
    </ul>
</div>
<script>
    window.onload= function () {

        var p=document.getElementById("parent");
        var c=document.getElementById("child");

        p.addEventListener("click", function () {
            alert("parent捕获")
        },true);
        p.addEventListener("click", function () {
            alert("parent冒泡")
        },false);

        c.addEventListener("click", function () {
            alert("child捕获")
        },true);
        c.addEventListener("click", function () {
            alert("child冒泡")
        },false);

    };
</script>
</body>
</html>

- 点击parent，先在document上，然后到parent上捕获到事件，处于目标阶段event.target==parent触发捕获事件，就是current.Target==target,理解为到底开始冒泡
- 点击child，从document到parent再到child事件目标，就会先触发parent捕获事件，child捕获事件，然后冒泡从child到parent再到document，依次触发，child冒泡，parent冒泡。

posted on 2016-07-07 10:03 _lss 阅读(198) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

_lss

JavaScript--事件模型

导航

公告