jQuery实例方法 — 事件

事件绑定

on()
可传递四个参数：

1. type
2. selector（可不填）
3. data（可不填）
4. handle

<div class = "demo"></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

$('.demo').on('click', function () {
	alert(0);
});
$('.demo').on('click', function () {
	alert(1);
});
// 两个都会执行，弹出两次

$('.demo').on('click', 'yq', function () {
	alert(0);   // 填的字符串，绑定失效
});
$('.demo').on('click', 'li', 'yq', function (e) {
    console.log(e.data);  // 'yq'
})
$('.demo').on('click', {name : 'yq'}, function (e) {
	console.log(e.data);   // {name: "yq"}
});
$('.demo').on('click', true, function (e) {
	console.log(e.data);   // true
});

$('.demo').on({
	click : function () {
		console.log('click');
	},
	mouseenter: function () {
		console.log('mouseenter');
	},
	mouseleave: function () {
		console.log('mouseleave');
	}
});

// 事件委托
$('ul').on('click', 'li', function (e) {
	alert($(e.target).text());
});
$('<li>9</li>').appendTo('ul');   // 点击它也会弹出9

one()：只能触发一次，方法与on大同小异

off()：解绑事件
没有值是解绑选出的DOM对象的所有事件，填入一个值填入解绑事件类型，两个参数后面第二个添加解绑函数名称，就只会解绑这个

*trigger()：对以有的事件做到主动触发
用处，比如一些广告条，播放完后触发消失，可以自定义一个事件

<div style = "width:100px;height:100px;background-color:red"></div>

$('div').on('pageLoad', function (a, b, c, d) {
	console.log(a, b, c, d);    // 10, 20, 30, 40
})
$('div').trigger('pageLoad', [10, 20, 30, 40]);

hover()：移入移出

// 传统写法
$('div').on('mouseenter', function () {
	console.log('enter');
}).on('mouseleave', function () {
	console.log('leave');
});
// hover写法
$('div').hover(function () {
	console.log('enter');
}, function () {
	console.log('leave');
});

click()、keydown()、mouseenter()、mousewheel()等等
mousewheel()：滑轮事件

标签：jQuery,function,console,log,demo,实例,事件,yq,click
来源： https://blog.csdn.net/weixin_43873449/article/details/94651991