jquery 事件有哪些方法？

1、事件

1、事件对象

// 事件对象：当一个事件发生的时候，跟这个事件有关的一些详细信息，保存在一个对象中，这个对象就是事件对象（event对象  和  事件函数的第一个参数）
box.click(function (ev) {
    // console.log(ev); // jQuery包装过的事件对象
    // console.log(ev.originalEvent); // 原生的事件对象

    console.log(ev.pageX, ev.pageY); // 鼠标到文档的距离
    console.log(ev.clientX, ev.clientY); // 鼠标到可视区的距离
    console.log(ev.which); // 相当于 keyCode，但比 keyCode 强大，还可以记录鼠标的键值，返回 1\2\3 即左\中\右;

    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    console.log(ev.type); // 事件类型

    console.log(ev.ctrlKey); // 返回 true 或 false，相应的 ctrl 键是否按下
    console.log(ev.shiftKey); // 返回 true 或 false，相应的 shift 键是否按下
    console.log(ev.altKey); // 返回 true 或 false，相应的 alt 键是否按下

    ev.preventDefault(); // 阻止默认事件
    ev.stopPropagation(); // 阻止冒泡的操作
    return false; // 阻止默认事件 + 阻止冒泡的操作
});

2、事件的绑定

格式：jQuery对象.on(‘事件名’, 函数);

// jQuery对象.事件名(函数);
// jQuery对象.on('事件名', 函数);

var box = $('#box');

// 1、普通事件绑定
box.on('click', function () {
    console.log('点我了');
    console.log(this); // 触发这个事件的元素，且是原生的
})

// 2、一次绑定多个事件
box.on('mouseover mouseout click', function () {
    console.log('触发了');
})

// 3、写成对象的形式
box.on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})

// 4、绑定自定义事件
box.on('abc', function () {
    console.log('我是自定义事件');
});
setTimeout(function () {
    box.trigger('abc'); // 自定义事件，需要trigger触发
}, 3000);

3、事件的取消

格式：jQuery对象.off(‘事件名’); // 没有参数，取消该元素上所绑定的全部事件

var box = $('#box');

box.on({
    mouseover: function () {
        console.log('滑上了');
    },
    mouseout: function () {
        console.log('滑离了');
    },
    click: function () {
        console.log('点击了');
    }
})

// box.off(); // 没有参数，解绑全部的事件
// box.off('click'); // 解绑click
box.off('mouseover mouseout'); // 解绑多个

4、事件的命名空间

var box = $('#box');

// 同一个元素的同一个事件，触发不同的函数

box.on('click.a', function () {
    console.log(1);
})
box.on('click.b', function () {
    console.log(2);
})

// 需求：解绑打印2的
box.off('click.b');

5、事件代理

jQuery对象父级.on(‘事件’, ‘子级’, 函数);

// jQuery对象父级.on('事件', '子级', 函数);
// 函数中的this即点击的哪个子级元素，且是原生的

$('ul').on('click', '.abc', function (ev) {
    // console.log('点我了');
    // console.log(this);
    $(this).css('background', 'red');

    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
})

6、一次性事件

jQuery元素.one(‘事件名’, 回调函数);

// jQuery对象.one('事件名', 函数)

var box = $('#box');

box.one('click', function () {
    console.log('点我了');
})

7、合成事件

jQuery元素.hover(滑上执行的函数, 滑离执行的函数);

// 采用的是mouseenter mouseleave，而不同于mouseover mouseout

var box = $('#box');

box.hover(function () {
    console.log('滑上了');
}, function () {
    console.log('滑离了');
});

2、滑上事件

<div id="box">
    <span></span>
</div>
<script>
	var box = document.getElementById('box');
    var n = 0;

    // 冒泡 onmouseover  onmouseout
    box.onmouseover = function () {
        n++;
        console.log(n);
    }

    // 不冒泡 onmouseenter  onmouseleave
    box.onmouseenter = function () {
        n++;
        console.log(n);
    }

</script>