标签：jQuery function console log demo 实例 事件 yq click

事件绑定

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。