<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>13-bind绑定事件</title>
</head>
<body>
<h3>bind()方法简单的绑定事件</h3>
<div id="test" style="cursor: pointer;">点击查看内容</div>
<input type="button" id="btntest" value="点击就不可用了">
<hr>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
</body>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/** 绑定单个事件
* 1、确定为哪些元素绑定事件
* 获取元素
* 2、绑定什么时间
* 第一个参数：事件的类型
* 3、相应事件触发的，执行的操作
* 第二个参数：函数
* */
$(‘#test‘).bind(‘click‘,function(){
alert(‘时间在不停地筛选你身边的人和事，不会有人永远陪着你，但永远会有人陪你。‘)
})
// 原生js绑定事件
document.getElementById(‘test‘).onclick = function(){
console.log(‘test.......‘);
}
/**直接绑定*/
$(‘#btntest‘).click((function(){
console.log(this);
$(this).prop(‘disabled‘,true);
}))
//绑定多个事件
// 1同时为多个事件绑定一个函数
$(‘#btn1‘).bind(‘click mouseout‘,function(){
console.log(‘按钮1。。。。‘)
})
// 为元素绑定多个事件并设置不同的函数
$(‘#btn2‘).bind(‘click‘,function(){
console.log(‘按钮2被点击了‘);
}).bind(‘mouseout‘,function(){
console.log(‘按钮2失去焦点‘);
});
//
$(‘#btn3‘).bind({
‘click‘:function(){
console.log(‘按钮3被点击了‘);
},
‘mouseout‘:function(){
console.log(‘按钮3失去焦点‘);
}
})
//直接绑定
$(‘#btn4‘).click(function(){
console.log(‘按钮4被点击了‘);
}).mouseout(function(){
console.log(‘按钮4失去焦点‘);
});
</script>
<!--
绑定事件
blind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind(eventType[,eventData],handler(eventObject));
eventType ：是一个字符串类型的事件类型值，就是你所需要绑定的时间。
[,eventData] ：传递的参数，格式：{名:值,名2:值2}
handler(eventObject) ： 该事件触发执行的函数
绑定单个事件
blind绑定
$(‘指定元素‘).bind(‘事件类型‘,function(){});
直接绑定
$(‘元素‘).事件名(function{});
绑定多个事件
bind绑定
1、同时为多个事件绑定同一个函数
指定元素.bind(‘事件类型1 事件类型2 ...‘,function(){});
2、为元素绑定多个事件，并设置对应的函数
指定元素.bind(‘事件类型‘,function(){}).bind(‘事件类型‘,function(){});
3、为元素绑定多个事件，并设置对应的函数
指定元素.bind({
‘事件类型‘:function(){},
‘事件类型‘:function(){},
‘事件类型‘:function(){}
})
直接绑定
指定元素.事件名(funciton(){}).事件名(function(){});
-->
</html>
12-JQuery学习之bind绑定事件