事件监听及委托

 事件监听

//事件监听
        //事件监听是对应的一个事件给到对应的元素
        //可以通过添加事件监听器给到某个元素,来给他绑定事件
        var div = document.getElementsByTagName('div')[0]
        //添加事件监听  参数一:事件名   参数2:对应执行方法
        div.addEventListener('click', addFn)
        var addFn = function () {
            console.log('hello world');
        }
        //移除事件监听  参数一:事件名   参数2:执行方法
        function remove() {
            div.addEventListener('click', addFn)
        }
        //注意:function是对象,引用数据类型,所以不能直接把函数写在括号里面
        //因为两个对象不对等
        //在IE8及以下的浏览器中， 我们可以使用以下方式：
        box.attachEvent("onclick", fn); //添加事件
        box.detachEvent("onclick", fn); //移除事件



        //完整兼容写法
        //添加
        function addEvent(element, type, fn, ) {
            if (element.addEventListener) {
                element.addEventListener(type, fn, false);
            } else {
                element.attachEvent("on" + type, fn);
            }
        }
        //移除
        function removeEvent(element, type, fn, ) {
            if (element.addEventListener) {
                element.addEventListener(type, fn, false);
            } else {
                element.attachEvent("on" + type, fn);
            }
        }

事件委托机制:

//事件委托机制
        //将事件委托给父元素,在父元素内使用target进行判断,当前点击的是哪个元素,再做相关操作
        var box = document.getElementById('box')
        box.onclick = function (e) {
            e = e || window.event
            console.log(e.target); //目标元素
        }