jQuery事件基础

1、on()多事件绑定（多事件绑定同一个函数、多事件绑定多个函数、高级用法）

$("#elem").on("mouseover mouseout",function(){ })

$("#elem").on({//每一个事件绑定自己的回调方法
　mouseover:function(){},
　mouseout:function(){}
})
$("div").on("click",selector,fn)//可绑定第二参数，on事件会发生冒泡，在冒泡过程中遇到了匹配选择器的元素将会触发回调

2、jQuery事件对象/事件委托（event）

[--事件委托--如监听每个li事件，因每个li的事件都是相同的，可利用事件冒泡把事件处理函数绑定到父元素上，在触发每个li时冒泡到父元素]
[--事件对象--记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁]
$("ul").on('click',function(e){
　console.log(e.target.textContent)//target注册事件的元素或子元素
 })
//事件对象的属性和方法
event.pageX;event.pageY//获取鼠标当前相对于页面的坐标，以页面为参考点，不随滚动条变化而变化
event.preventDefault()//阻止标签默认行为，如a标签跳转
event.stopPropagation() //阻止事件冒泡，return false亦可
event.currentTarget//事件冒泡过程中当前DOM元素，类似this（this可变，currentTarget不变）

3、自定义事件trigger（事件触发）

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自定义事件")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])//会发生事件冒泡，会影响所有匹配元素，返回jq对象以供链式调用
$('#elem').triggerHandler('Aaron',['参数1','参数2'])//不会触发浏览器默认行为，也不回发生时间冒泡，仅影响第一个匹配元素，返回事件处理值，如果没有发生事件就会返回undefined

4、.bind()方法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind({event:function, event:function, ...})

5、$.Event()方法

+function($){
    function testEvent(){
        var hidden = $.Event("hide.bs",{
            user:"foo",
            pass:"bar",
            relatedTarget:$("#input")[0]
        })
        $("#input").trigger(hidden)// 默认事件触发 把属性绑定到事件上
    }
    $("#input").on({
        'hide.bs':function(e){
            console.log(8)   
            alert(e.user)
        },
        click:function(){
            testEvent()
        }
    }) 
}(jQuery)

原生事件绑定

element.onclick = function(e){
      //传统方法只会在事件冒泡中运行，而非捕获和冒泡
      //一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
 };
element.addEventListener('click', function(e){
      // 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)
      // 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
}, false);