[TOC] # 事件 ## 1。事件的格式 ### 1.1 $().click(function(){ 執行代碼; }) **只能綁定靜態的** ### 1.2 $().on("事件名稱"，"參數對象"，"事件函數")------------事件名和事件函數不可以省略 ```css //第一種 $(".box").on("click", {name:"JQuery"}, function(e){ alert(e.data.name); }); //第二種 $("div").on("click",function () { alert(123); }) ``` **可以綁定動態的對象 即使用js動態添加的對象** ***** #### 1。2。1擴展 event對象實例將作為第一個參數傳遞給事件的回調函數，簡寫為e 下面的為event對象屬性和方法的用法  ### 2注銷事件 #### 2.1 在事件內部書寫 **至少執行一次事件** ``` $("div").on("click",function(){ alert(123).; $(this).off("click"); }) ``` ***** #### 2。2 直接注銷 **一次也不會執行事件** ``` $(".box").on("click", {name:"JQuery"}, function(e){ alert(e.data.name); }); $(".box").off("click"); ``` ### 3事件冒泡 #### 3。2阻止事件冒泡 操作子盒子，父盒子的事件被觸發了，這就是事件冒泡現象 **阻止事件冒泡的兩種方式： ** 【1】在回調函數中返回false return false 【2】調用事件對象的stopPropagation e.stopPropagation(); ***** ### 4.自定義事件 給標簽添加自定義事件，但是自定義事件需要.trigger()方法觸發才能執行 ``` <div></div> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ // 自定義事件 $("div").on("shitihua",function(){ $(this).css({ width:200, height:200, background:"#ccc" }) }); // 觸發事件 $("div").trigger("shitihua"); }) </script> ``` ### 5.阻止標簽的默認行為 默認行為 ： 頁面中的一些標簽常常存在默認的行為，比如表單的submit事件類型，如果該類型的事件被觸發，則會導致表單的提交；比如a標簽存在跳轉網頁連接的默認行為等。 ***** 阻止方法： **第一種**e.preventDefault(); **第二種**return false; ## 2。鍵盤按鍵事件 鍵盤按下某鍵會觸發這個事件的執行 .keyDown() ***** $(document).keyDown(function(e){ ##3 案例 ### 3。1 圖片跟著鼠標動 ``` <style> img{ position: absolute; } </style> ... ... <img src="images/dian.gif" height="192" width="390"/></body> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ $(document).on("mousemove", function(e){ //鼠標在網頁上移動的時候，執行這里的代碼 //e.pageX為鼠標所在位置相對于網頁文檔左上角的水平距離 //e.pageY為鼠標所在位置相對于網頁文檔左上角的豎直距離 // console.log(e.pageX, e.pageY); $("img").css({ left: e.pageX, top: e.pageY, }) }); }) </script> ```