jQuery事件学习总结

1.mouseenter和mousemove 、mouseleave和mouseout 区别

上代码：

<div style="background-color:red; width: 300px; height: 300px; padding: 20px">
    <p style="width: 100px; height: 100px; background-color: green;">这是一个段落。</p>
    <button style="width: 100px; height: 50px; background-color: orange; margin-top: 20px">请点击这里</button>
</div>

js：

    $('div').mousemove(function(e){
        console.log('我是onmouseover');
    });

    $('div').mouseout(function(e){
        console.log('我是mouseout');
    });

    //这个可以反注释尝试一下，或者配合上面的代码任意反注释，打印对比一下看一下就明白了
//    $('div').mouseenter(function () {
//
//        console.log('我是mouseenter');
//    });
//
//    $('div').mouseleave(function () {
//
//        console.log('我是mouseleave');
//    });

总结：mouseenter 只有在鼠标指针穿过被选元素时会响应，通俗来件当鼠标刚好进入改标签的范围内时响应一次；mousemove鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，通俗来件就是当鼠标在其标签或者子标签上移动时都是可以响应的，而且只要在该区域内就会连续不断响应；mouseleave和mouseout都是离开该区域是响应

2.trigger事件

<p>我是来测试的</p>

js：

$("p").click( function (event, a, b) {
    // 一个普通的点击事件时，a和b是undefined类型
    // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

    console.log(a);

    console.log('-------------');
    console.log(b);
} ).trigger("click", ["foo", "bar"]);

总结：Dom结构加载完成，第一次进来就会自动触发p的点击事件，并且把参数传过来传递过来， 再次点击时不会触发trigger， 个人认为跟one事件很类似，one是一次性的行为，也是只执行一次，你可以自己在试试看