jQuery 事件

                                                                    jQuery 事件

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： MVC jQuery

作者：超级凶鸭.

撰写时间：2021/6/17   

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调 用的方法。

 

页面载入   

 Ready()  当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。

 // $(function () {       

     //==页面载入      

      //=ready()        

    //$(document).ready(function(){});  

 

事件处理 

   On()  向元素添加事件处理程序 //为按钮绑定点击事件    

      //  $(".btn").on("click", function () {       

    //  alert("被点击了。");        

   // });  

 

    Off() 移除通过 on() 方法添加的事件处理程序 

// 移除事件    

        //$(".btn").off("click");  

 

   Bind()  向元素添加事件处理程序  

    Unbind() bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

 自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加 和移除事件处理程序的首选方法。

  

     One() 向被选元素添加一个或多个事件处理程序。该处理程序只能被 每个元素触发一次

 //$("#div3").one("click", function () {

            //    console.log("one()");    

        //});  

 

    Trigger() 触发绑定到被选元素的所有事件

  //按钮点击事件触发文本框焦点事件,文本框获得焦点并执行函数  

    //$("#btn1").click(function(){    

      //$("#ipt").trigger("focus");        

   // }); 

 

     triggerHandler() 

 触发绑定到被选元素的指定事件上的所有函数        

//按钮点击事件触发文本框焦点事件函数，文本框未获得焦点    

     //$("#btn2").click(function(){     

    //  $("#ipt").triggerHandler("focus");      

   // });  

 

事件委派 

  Delegate() 

 向匹配元素的当前或未来的子元素添加处理程序 

//$("ul").delegate("li", "click", function () {      

      //    alert($(this).text());    

        //});  

 

   Undelegate()  从现在或未来的被选元素上移除事件处理程序 

 // $("ul").undelegate("li", "click");  

 

事件切换       

Hover()  规定当鼠标指针悬停以及离开在被选元素上时要运行的两个 函数 如果只指定一个函数，则 mouseenter 和 mouseleave 都 执行它 

// $("#div1").hover(       

      //   function () {//鼠标进入        

          //  $(this).css("background", "#cccccc");  

           // },   

           // function () {//鼠标离开       

          //   $(this).css("background", "#FFFFFF");    

         //   }  

        //  );    

 //   }); 

 

  toggle() 在版本 1.9 中被移除。 添加 click 事件之间要切换的两个或多个函数 

 

常见事件  

  Click() 添加/触发 click 事件 //==常用事件写法       

     //$("#btn1").click(function () {      

      //    alert("点击事件");      

      //});      

      //$("#btn2").click(function () {     

       //  $("#btn1").click();//通过代码触发事件    

        //}); 

 

    Dblclick()  添加/触发双击事件 

//$("#btn1").dblclick(function () {          

  // alert("点击事件");      

      //});  

 

  mouseenter()  添加/触发鼠标移入事件  

 mouseleave()  添加/触发鼠标离开事件事件只有在离开被选元素的时候才会触发，该事件大多数时 候会与 mouseenter 事件一起使用。

 //$("#btn1").mouseleave(function () {  

          //    alert("鼠标离开");      

      //});  

 

   mousemove()  添加/触发移动事件  

 

 

  mouseout()  添加/触发鼠标离开事件。 事件在鼠标离开被选元素的子元素时也会触发  

  mouseover()  当鼠标指针位于元素上方时触发的事件。事件在鼠标指针进入被选元素或任意子元素时都会被触发  

   mousedown()  添加/触发鼠标按下事件  

   mouseup()  添加/触发鼠标松开事件  

   keydown()  当键盘或按钮被按下时，发生 keydown 事件。（过程）  

   keypress()  当键盘或按钮被按下时，发生 keypress 事件。  

   keyup()  当按钮被松开时，发生 keyup 事件。 它发生在当前获得焦点的元素上。  

   submit()  当提交表单时，会发生 submit 事件。  

   change()  当元素的值发生改变时，会发生 change 事件。  

   focus()  当元素获得焦点时，触发 focus 事件。  

   Blur()  当元素获得焦点时触发blur 事件。  

   Select()  当 textarea 或文本类型的 input 元素中的文本被选择时，会 发生 select 事件。  

   Load()  在版本 1.8 中被废弃。添加事件处理程序到加载页面事件  

   Unload()  在版本 1.8 中被废弃。添加事件处理程序到离开页面事件  

   Resize()  当调整浏览器窗口的大小时，发生 resize 事件。  

   Scroll()  当用户滚动指定的元素时，会发生 scroll 事件。  

 

将数据传递到处理函数中,动态传参

例如：

            $("#btn3").on("click", { name: $("#btn3").text(), age: 10 }, myBtnClick);

保存预览，点击btn3按钮结果如下图。

 

添加新元素 append()

   例如：

       

  for (var i = 0; i < 5;i++){

            $("ul").append("<li>li_"+i+"</li>");

           }

写好保存好，预览，得以下图 li_0到li_4都是添加的新元素。