1. jQuery时间绑定：
$obj.on(events[,selector][,data],handler(eventObject))
2. html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery事件处理机制</title> <style type="text/css"> div{ border:2px solid #aaa; margin:10px; padding:20px; font-size:30px; } #d1{ width:300px; height:300px; background-color:red; } #d2{ width:200px; height:200px; background-color:green; } #d3{ width:100px; height:100px; background-color:blue; } </style> <script type="text/javascript" src="../jquery-3.5.1.js"></script> <script src="../js/case407.js"> </script> </head> <body onload=""><!-- 加载后注册 --> <!-- 1.jquery事件注册 --> <!-- javasctipt 原始绑定事件 --> <button onclick="f1();">按钮1</button> <button>按钮2</button> <!-- 2.jquery事件冒泡机制和委托机制,事件对象常用属性 --> <div id="d1">相关科目 <ul >列表： <li>语文</li> <li>数学</li> <li>英语</li> <li>物理</li> </ul> </div> <!-- 3.事件对象常用方法 --> <a href="http://www.baidu.com">测试event.preventDefault方法</a><br> <!-- 4.合成事件 --> <img src="../images/image1.jpg"/> <p> <button id="chg">切换</button> </p> <!-- 4.模拟事件 --> <p><input type="button" value="打分" id="score"></p> <p>红海行动:<input type="text" ></p> <p>捉妖记2:<input type="text" ></p> <p>唐人街探案2:<input type="text" ></p> <p>女儿国:<input type="text" ></p> </body> </html>
3. js代码：
function f1(){ alert("调用按钮1单击事件"); } function f2(){ // alert("调用按钮2的单击事件"); console.log("click&mousemove"); } function f3(){ console.log("mouseout"); } $(function(){ // $("button:contains('按钮2')").on("click",f2); //一个事件绑定一个方法 // $("button:contains('按钮2')").on("click mousemove",f2); //不同事件绑定同一个方法 $("button:contains('按钮2')").on({ "click":f2, "mouseout":f3 }); // 不同事件绑定不同的方法 }) $(function(){ $("li").on("click",function(){alert($(this).text())}); $("ul").on("click",function(){alert($(this).text()) return false;}); //e.stopPropagation(); $("#d1").on("click",function(){alert($(this).text())}); })