<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #box { background-color: red; width: 100px; height: 100px; } </style> <script type="text/javascript"> $(document).ready(function() { // 单击事件 $(document).click(function() { alert("click") }); // 不推荐 被on取代 $(document).bind("click mouseenter", function() { alert("bind") }); // 性能高 支持动态创建的元素 // 第一个参数 要绑定的事件元素 // 第二个参数 事件类型 // 第三个参数 事件处理函数 $(document).delegate("#box", "click", function() { alert("delegate") }); // 最现代的方式 // 第一个参数 要绑定的事件名称 可以多个 可以是标准事件或者自定义事件 // 第二个参数 执行事件的后代元素 // 第三个参数 传递给处理函数的数据 事件触发的时候通过event.data来使用 // 第四个参数 事件处理函数 $(document).on("mouseenter", "#box", function() { alert("on") }); $(document).on("mouseenter", "#box", { "name": "furong" }, function(event) { alert(event.data.name) }); }); </script> </head> <body> <div id="box"> </div> </body> </html>
