事件委托和事件对象

上一篇文章写的事件冒泡中的冒泡优点，涉及到了事件委托和事件对象(事件源)，感觉一笔带过没有深入好好的了解，这不是一个好的学习态度呀，惭愧惭愧。

基本的概念就不再赘述了，贴心弄个传送门，不清楚了去看一看吧 ==》。那现在直接上栗子吧，上篇是原生JS，这次有用jQuery也有用到JS测试，需求是点击每一个列表项时都可以有相应的弹框出现。

<ul>
    <li>这是个测试1</li>
    <li>这是个测试2</li>
    <li>这是个测试3</li>
    <li>这是个测试4</li>
    <li>这是个测试5</li>
</ul>

<script>
    $("ul").on("click",function(e){
        alert("你点击了: "+e.target.textContent);
    })
</script>

至于样式，可以自行随便定义，但就算只是测试demo，但我仍然认真写了CSS为了舒心，如下这般效果：

上篇文章有说过，父元素 ul 上绑定事件是因为存在事件冒泡产生了事件委托，又因为存在事件对象可以确定是点击了哪个 li。但这认识果然浮于表面，今天细看了一下代码，还是存在了一些困扰，尤其是对于事件对象中 target 这样的属性呀，都不是很清楚到底干嘛的。这里再提一下事件对象的概念，毕竟只有知其所以才能知其所以然，

事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。

DOM中事件对象

target属性

target 属性作用于的元素可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

this和event.target的异同：

.this和event.target都是dom对象，可以使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素

事件对象的属性和方法有很多,除了上面那个,还有一些经常用到的,阐述一下他们的作用和区别

type属性

event.type：获取事件类型

<div>
    <input type="button" value="按钮" id="btn">
</div>
<script>
    var btn = document.getElementById("btn");
    var event = {
        // 添加事件
        addEvent:function(elem,type,handle){    //根据DOM2级事件处理程序的三个参数
            if(elem.addEventListener){           //非IE浏览器
                elem.addEventListener(type,handle,false);
            }else if(elem.attachEvent){        //IE浏览器
                elem.attachEvent("on"+type,handle);
            }else{                            //以上都不支持时采用DOM0级处理程序
                elem["on"+type]=handle;
            }
        },
        // 删除事件
        removeEvent:function(elem,type,handle){
            if(elem.removeEventListener){
                elem.removeEventListener(type,handle,false);
            }else if(elem.detachEvent){
                elem.detachEvent("on"+type,handle);
            }else{
                elem["on"+type]=null;
            }
        }
    };
    function message(e){
        alert(e.type);
    }
    // 调用封装好的函数
    event.addEvent(btn,"click",message);
</script>

以上例子是补充的，今天看了imooc上的课程加深了对事件相关知识的一些理解。对于事件的添加、删除，针对不同的浏览器会有不同的方法，代码中event封装了主流浏览器和IE浏览器以及很老的浏览器的兼容处理。其中，需要注意的一点，在最后调用的时候，犯了一个错误，最后一个参数是函数message，先是错误的写成了message（），这样是不对的，不能加括号。

pageX和pageY属性

event.pageX和event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与（顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。

which属性

event.which：获取在鼠标单击时，单击的是鼠标的哪个键，左键报告1，中间键报告2，右键报告3。

$(document).bind("keydown mousedown", function(event){
    var msg = '';
    if( event.type == "mousedown" ){ // 鼠标按下事件
        var map = {"1": "左", "2":"中", "3":"右"};
        msg = '你按下了鼠标[' + map[event.which] + ']键';
    }
    if(msg){
        $("body").prepend( msg + '<br>');
    }

currentTarget属性

event.currentTarget：在事件冒泡过程中的当前DOM元素。冒泡前的当前触发事件的DOM对象，等同于this。

preventDefault方法

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

<a href="https://www.baidu.com" id="goto">跳转</a>
<script>
    var goto = document.getElementById("goto");
    var event = {
        // 添加事件
        addEvent:function(elem,type,handle){    //根据DOM2级事件处理程序的三个参数
            if(elem.addEventListener){           //非IE浏览器
                elem.addEventListener(type,handle,false);
            }else if(elem.attachEvent){        //IE浏览器
                elem.attachEvent("on"+type,handle);
            }else{                            //以上都不支持时采用DOM0级处理程序
                elem["on"+type]=handle;
            }
        };
    function goTo(e){
        e.preventDefault();
    }
    // 调用封装好的函数
    event.addEvent(goto,"click",goTo);
</script>

stopPropagation方法

event.stopPropagation() 方法：阻止事件冒泡

事件有冒泡模式，有些情况下需要防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。之前有用过解决冒泡模式的困扰。

IE中事件对象

type属性,用于获取事件类型
srcElement属性,用于获取事件的目标
cancelBubble属性,用于阻止事件冒泡.设置为true表示阻止冒泡
returnValue属性,用于阻止事件的默认行为.设置为false表示阻止事件的默认行为

因为存在IE和非IE的不同，所以还是需要兼容处理的。

//获取事件
getEvent:function(event){
	return event?event:window.event;
},
//获取目标元素
getElement:function(event){
	return event.target || event.srcElement;
}
//阻止默认行为
preventDefault:function(event){
	if(event.preventDefault){
		event.preventDefault();
	}else{
		event.returnValue=false;
	}
},
//阻止冒泡
stopPropagation:function(event){
	if(event.stopPropagation){
		event.stopPropagation();
	}else{
		event.cancelBubble=true;
	}
}