DOM事件

发表于 | 分类于

DOM事件类

基本概念

DOM事件的级别

DOM0: element.onclick=function(){}

DOM2: element.addEventListener('click', function(){}, false)

DOM3: element.addEventListener('keyup', function(){}, false)

没有DOM1的原因：因为DOM1制定标准的时候没有设计跟事件相关的内容，但是不代表DOM1不存在

true：捕获时触发

false：冒泡时触发

DOM事件模型

捕获：从上至下

冒泡：从下至上

DOM事件流

捕获 -> 目标阶段 -> 冒泡

描述DOM事件流捕获的具体流程

捕获： window -> document -> html -> body -> … -> 目标元素

冒泡： 反序

JS获取html： document.documentElement

JS获取body： document.body

Event对象的常见应用

阻止默认事件： event.preventDefault()

阻止冒泡事件： event.stopProgagation()

按钮绑定2个click事件A、B,A点击后不触发B，在A的响应函数添加即可阻止B的执行： event.stopImmediatePropagation()

当前绑定的事件，父级元素： event.currentTarget

当前被点击的元素，IE早起没有： event.target

自定义事件

var eve = new Event('custome');
ev.addEventListener('custome', function(){
    console.log('custome')
});
ev.dispatchEvent(eve);

Event：只能指定事件名，不能添加数据；

CustomEvent：除了可以指定事件名，还可后面跟object来做指定自定义参数

源码

event.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event</title>
</head>
<body>
<div id="ev">
    <style>
        #ev{
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
    目标元素
</div>
<script type="text/javascript">
    var ev=document.getElementById('ev');

    //响应顺序与定义顺序无关
    ev.addEventListener('click', function() {
        /* Act on the event */
        console.log('ev capture');
    }, true);

    window.addEventListener('click', function() {
        /* Act on the event */
        console.log('window capture');
    }, true);

    document.addEventListener('click', function() {
        /* Act on the event */
        console.log('document capture');
    }, true);

    document.documentElement.addEventListener('click', function() {
        /* Act on the event */
        console.log('html cature');
    }, true);

    document.body.addEventListener('click',function() {
        /* Act on the event */
        console.log('body cature');
    }, true);

    //自定义事件
    var eve = new Event('test');
    ev.addEventListener('test', function() {
        console.log('test dispatch');
    })

    //ev.dispatchEvent(eve);

    setTimeout(function() {
        ev.dispatchEvent(eve);
    }, 1000);//延时1秒后输出

</script>
</body>
</html>