JavaScript基础回顾知识点记录7-事件补充说明1

js 中事件冒泡
- 冒泡指的就是事件向上传导。当后代元素事件被触发时，其祖先的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的
- 可以通过事件对象阻止冒泡： event.cancleBubble = true；

js 中事件的委派

事件委派指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会冒泡到祖先元素

举个栗子：给ul下的li标签中的a标签绑定点击事件，并且有通过节点往ul中插入新的li标签，此时新插入的li标签没有触发点击事件。（所以需要使用到事件委派，把点击事件绑到ul标签，只要ul的后代触发点击事件，则会冒泡到ul标签。）

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button id="btn">点我添加</button>
        <ul id="u1">
            <li><a href="javascript:;" class="link">点我1</a></li>
            <li><a href="javascript:;" class="link">点我2</a></li>
            <li><a href="javascript:;" class="link">点我3</a></li>
        </ul>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var ul = document.getElementById('u1');
        btn.onclick = function() {
            var li = document.createElement('li');
            li.innerHTML = "<a href='javascript:;' class='link'>点我</a>";
            ul.appendChild(li);
        }
        /*
            给每个a标签绑定点击事件，后来通过节点添加的不会触发事件。
            var a = document.getElementsByTagName('a');
            for(var i=0; i<a.length; i++) {
                a[i].onclick = function() {
                    alert('我被点击了！');
                }
            }
        */

        /*
            给a标签其共同祖先元素绑定点击事件，依赖冒泡触发(也就是事件委派)
            注意：绑定ul需要进行点击区域判断。
                使用事件对象的target属性，获取触发事件的对象
        */
        ul.onclick = function(e) {
            e = e || window.e;
            if (e.target.className == "link") {
                alert('我被点击了！');
            }
        }
    </script>
</html>

js 中事件的传播分为三个阶段
- 1、捕获阶段
  - 在捕获阶段从最外层祖先元素，向目标元素进行事件捕获，但是默认此时不会触发事件
- 2、目标阶段
  - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
- 3、冒泡阶段
  - 事件从目标元素开始向他的祖先元素传递，依次触发祖先元素的事件
- 想要在捕获事件触发事件（从外往内触发事件）只需要将addEventListener方法的第三个参数写为true即可。

js 中事件补充说明

对象.事件名 = function(){} 这种方式绑定事件只会触发一次，后面绑定的会覆盖前面绑定的。
addEventListener() 也可以为元素绑定函数，并且可以让一个元素同时绑定多个响应函数，按照绑定顺序依次触发（在IE8及以下不支持，需使用attachEvent() )

具体使用说明及注意点在下方代码中

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button" id="btn">点击</button>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        /*
            对象.事件 = function  这种方式事件只会触发一次，后面绑定的覆盖前面绑定的。
            btn.onclick = function() {
                alert(1);
            }
            btn.onclick = function() {
                alert(2);
            }
        */
        /*
            addEventListener() 也可以为元素绑定函数，并且可以让一个元素同时绑定多个响应函数，按照绑定顺序依次触发（在IE8及以下不支持，需使用attachEvent() )
                参数： 
                    1： 事件名，不要on
                    2： 回调函数，当事件触发时执行调用
                    3： 是否在捕获阶段触发事件，传一个布尔值，一般为false
                this,是绑定事件的对象
                
            IE8中使用 attachEvent()
                参数：
                    1：事件名，需要on
                    2：回调函数
                this,是window
            btn.attachEvent('click',function(){
                alert(1);
            });
        */

        /*
            兼容写法就是封装一个函数，function xxx(obj,事件名，回调函数)； 在函数中判断，obj.addEventListener 是否为true；
            是则执行addEventListener，否则执行attachEvent。
            
            function bind(obj,eventStr,callback) {
                if (obj.addEventListener) {
                    obj.addEventListener("eventStr",callback,false)
                } else {
                    obj.attachEvent("eventStr",callback)
                }
            }
            
            bind(btn,click,function(){
                alert(1);
            });
        */
        btn.addEventListener('click', function() {
            alert(1);
        }, false);
        btn.addEventListener('click', function() {
            alert(2);
        }, false);
    </script>
</html>

js 实现拖拽功能（直接复制代码运行看效果）

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #box1 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            position: absolute;
        }
    </style>
    <body>
        不要拖拽我！！！
        <div id="box1">

        </div>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            /*
                拖拽box1元素
                    1、当鼠标放在元素上并点击以下后开始拖拽    - onmousedown
                    2、当鼠标移动时元素跟随移动 - onmousemove
                    3、当鼠标松开时，拖拽元素固定到当前位置 - onmouseup
            */

            var box1 = document.getElementById('box1');
            box1.onmousedown = function(e) {
                // 设置box1捕获所有鼠标按下事件，仅在IE中可以使用(这种写法在不支持的浏览器中会自动不调用，不会导致报错)
                box1.setCapture && box1.setCapture();
                e = e || window.e;
                left_py = e.clientX - box1.offsetLeft;
                top_py = e.clientY - box1.offsetTop;
                document.onmousemove = function(e) {
                    e = e || window.e;
                    box1.style.left = e.clientX - left_py + 'px';
                    box1.style.top = e.clientY - top_py + 'px';
                };

                document.onmouseup = function(e) {
                    console.log(e.target);
                    // 取消onmousemove事件
                    document.onmousemove = null;
                    // 鼠标松开后，onmouseup事件也要取消
                    document.onmouseup = null;
                    alert('放这里拉！');
                    // 释放所有捕获事件
                    box1.releaseCapture && box1.releaseCapture();
                };
                // 阻止不小心选择其他元素或选择文字时，拖拽产生的默认行为，但是IE8用这个不生效
                return false;
            };
        }
    </script>
</html>