<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/186855.html
標籤：Html/Css
上一篇：前端基礎——HTML(一)