jQuery 事件篇(一)

一   jQuery绑定事件的三种方法

target.click(function(){});
target.on('click',function(){});
target.bind('click',function(){});
target.live('click',function(){});

 live的用法和作用等效于bind ，但是两者是存在区别的，bind只能给当前存在的元素绑定事件， 对于事后采用JS等方式新生成的元素无效，但是live则可以对后生成的元素使用。

二   鼠标事件总结

 click()和dbclick()：单击或者双击事件。

mousedown():用来监听用户鼠标按下的操作。

mouseup()：用来监听用户鼠标谈起的操作。

mousemove():监听用户移动的操作，可以作出拖动/拖拽一系列的效果。

mouseover():监听用户鼠标移入的操作。

mouseout():监听用户鼠标移出的操作。

focusin()：当一个元素或者其内部任何一个元素获得焦点的时候触发的事件。

focusout(): 当一个元素或者其内部任何一个元素失去焦点的时候触发的事件。 

三   鼠标事件的使用

 鼠标的各个事件在此用event来代替，介绍鼠标事件使用的三个方法：

  方法一：$ele.event()

 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的通常比较少。

<button>元素绑定事件,弹出回调中this</button>
 <script type="text/javascript">
    //this指向button元素
    $("button:eq(0)").mouseover(function() {
        alert(‘触发指定事件’)
    })
</script>

方法二：$ele.event(handler(eventObject))

 绑定$ele元素，每次$ele元素触发点击操作会执行回调handle函数，可以对事件的反馈做很多操作。

<div class="test2">
    <p>$('button:first').click(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
    $('p').click(function(e) {
        console.log(e.target.textContent)
    })
    //this指向button元素
    $("button:eq(0)").mouseenter(function() {
        $('p').click() //指定触发绑定的事件
    })
</script>

方法三：$ele.event([eventData],handler(eventObject))

使用方法同方法二，不过可以接受一个数据参数，这样可以解决不同作用域下数据传递的问题。

<div class="test3">
    <p>$('.right').click(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
    //不同函数传递数据
    function data(e) {
        console.log(e)
        alert(e.data) //1111
    }
    function a() {
        $("button:eq(0)").click(555, data)
    }
    a();
</script>

四   冒泡问题

  mouseover和mouseenter两个事件最大的区别就是mouseenter是不冒泡的事件，这时候如果注册的监听是mouseenter，无论

鼠标是从任何元素移动到child时，只有child元素发生mouseenter事件，其祖宗节点是不会因为冒泡而触发此事件。

 mouseout和mouseleave同上所述。