随笔- 101 文章- 0 评论- 2 阅读- 27932

JS EventTarget方法

js event

事件的本质是程序的各组成部分之间的一种通信方式，也是异步编程的一种实现

DOM的事件触发都是定义在EventTarget接口。所有节点对象都部署了这个接口。

该接口主要实现三个方法
addEventListenser 绑定事件的监听函数
removeEventListener 移除事件的监听函数
dispatchEvent 触发事件
------------------------------
EventTarget.addEventListenser()
作用于当前节点或对象上，定义一个特定事件的监听函数，
一旦这个事件发生，就会执行监听函数。无返回值

addEventListenser(type, listener [, useCapture]);
三个参数
type: 事件名称，大小写敏感
listener: 监听函数。事件发生时，会调用该监听函数
useCapture: 布尔值，表示监听函数是否在捕获阶段触发
默认false(监听函数只在冒泡阶段触发)

第二个参数除了监听函数，还可以是一个具有handleEvent方法的对象
第三个参数除了布尔值，还可以是一个属性配置对象，属性有一下
{
capture: 布尔值，表示是否在捕获节点触发
once: 布尔，表示是否只触发一次监听函数，然后就自动移除
passive: 布尔值表示监听函数不会调用事件的preventDefult方法
}

------------------------------
EventTarget.removeEventListenser()
该方法用来移除addEventListener方法添加的事件监听函数

eg：
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

移除的监听函数必须是添加的同一个监听函数，而且必须是在同一个节点元素，】
否在无效
//无效的移除函数因为部署同一个监听函数
div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);
//无效的移除函数因为第三个参数不一样，移除的一个是捕获节点一个是冒泡阶段
element.addEventListener('mousedown', handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false);
------------------------------
EventTarget.dispatchEvent()

在当前节点触发指定事件
返回布尔，只有存在一个监听函数调用了Event.preventDefault(),
则返回值为false, 否则为true
dispatchEvent方法的参数是一个Event对象

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>EventTarget</title>
</head>
<body>
    <button id='btn'>事件冒泡触发</button>
</body>
<script>
    function hello1() {
        console.log('hello world1');
    }
    function hello2() {
        console.log('hello world2');
    }

    var hello = {
        handleEvent: function(event) {
            event.preventDefault();    
            console.log('hello world');
        }
    };

    var useCapture = {
        capture: false
        //once: true,
        //passive: true
    };

    // useCapture: 布尔值，表示监听函数是否在捕获阶段触发 默认false(监听函数只在冒泡阶段触发)
    var btn = document.getElementById('btn');

    // 可以添加多了不同的监听函数，按照添加顺序触发，
    // 但是如果多次添加的是同一个函数，只会触发一次
    // btn.addEventListener('click', hello1, useCapture);
    // btn.addEventListener('click', hello1, useCapture);
    // btn.addEventListener('click', hello2, useCapture);

    btn.removeEventListener('click', hello1, false);
    // btn.removeEventListener('click', hello2, false);
    //div.removeEventListener('click', function (e) {}, false);

    //触发一次点击事件
    var event = new Event('click');
    // btn.dispatchEvent(event);

    var canceled = !btn.dispatchEvent({});
    if (canceled) {
        console.log('事件取消');
    } else {
        console.log('事件未取消');
    }


</script>
</html>

拖拉事件
为了让元素节点可拖拉，可以将该节点的draggable属性设为true。

当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。

drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。
通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，
该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。
不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是
当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop
）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，
就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个
事件的监听函数中设置。
dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），
该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter
事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target
属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监
听函数中设置。
drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，
如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果
用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出
拖拉数据，并进行相关处理。

浏览器原生提供一个DragEvent()构造函数，用来生成拖拉事件的实例对象。
new DragEvent(type, options)
第一个参数是字符串，表示事件的类型必须
第二个参数是事件的配置对象可选

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>EventTarget</title>
    </head>
    <body>
        <div id='nodeDrag' draggable="true" style="background-color: aqua;">
            此区域可拖拽
        </div>
        <div style="background-color: aqua;">
            此区域可拖拽
        </div>

        <div class="dropZone">1
            <div id='draggable' draggable="true">
                此节点可拖拽
            </div>
        </div>
        <div class="dropZone">2
        </div>
        <div class="dropZone">3
        </div>
        <div class="dropZone">4
        </div>
    </body>

    <script>
        var node = document.getElementById('nodeDrag');
        node.addEventListener('dragstart', function (e) {
            this.style.backgroundColor = 'red';
        }, false);

        node.addEventListener('dragend', function (e) {
            this.style.backgroundColor = 'green';
        }, false);

        // 被拖拉节点
        var dragged;

        document.addEventListener('dragstart', function(event) {
            dragged = event.target;
            event.target.style.opacity = 0.5;
        }, false);

        document.addEventListener('dragend', function(event) {
            event.target.style.opacity = 1;
        }, false);

        document.addEventListener('dragover', function(event) {
            event.preventDefault();
        }, false);

        document.addEventListener('dragenter', function (event) {
            // 目标节点的背景色变紫色
            // 由于该事件会冒泡，所以要过滤节点
            if (event.target.className === 'dropZone') {
                event.target.style.background = 'red';
            }
        }, false);

        document.addEventListener('dragleave', function( event ) {
            // 目标节点的背景色恢复原样
            if (event.target.className === 'dropZone') {
                event.target.style.background = '';
            }
            }, false);

            document.addEventListener('drop', function( event ) {
            // 防止事件默认行为（比如某些元素节点上可以打开链接），
                event.preventDefault();
                if (event.target.className === 'dropZone') {
                    // 恢复目标节点背景色
                    event.target.style.background = '';
                    // 将被拖拉节点插入目标节点
                    dragged.parentNode.removeChild(dragged);
                    event.target.appendChild( dragged );
                }
            }, false);
    </script>
</html>