12-JQuery学习之bind绑定事件
<!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>
这世上所有美好的东西,都需要踮起脚尖。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步