[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> ```