JQ 事件篇

JQ 事件

JQ的事件绑定

1. jq对象 . 事件名( 回调函数 )

   $().click(function(){});
   
   //例：
   $("#div1").click(function(e){
       var even = e || event;
       console.log("div1的事件触发!", even);
   });
   

2. jq对象 . on()

   JQ推荐的 绑定事件的方式

   $().on()
   

   • on() 基础绑定事件

     语法：

     $().on(“事件类型”, 回调函数);

     $("#div1").on("click", function(e){
     	var even = e || event;
     	console.log("div1点击事件触发!", even);
     });
     

   • on() 一次给jq对象绑定多个不同事件, 触发相同的方法

     语法：

     $().on(“事件1 事件2 …”, 回调函数)

     function randomColor() {
     	var r = Math.floor(Math.random()*256);
     	var g = Math.floor(Math.random()*256);
     	var b = Math.floor(Math.random()*256);
     	return "rgb(" + r + "," + g + "," + b + ")";
     }
     $("#div1").on("mouseenter mouseleave", function(){
     	$(this).css("background", randomColor());
     });
     

   • on() jq对象绑定不同的事件, 对应事件各自触发各自的方法

     语法：

     $().on({

     ​ 事件名1:回调函数1,

     ​ 事件名2:回调函数2,

     ​ …

     })

     $("#div1").on({
     	mouseover:function(){
     		$(this).css("background", "red");
     	},
     	mouseout:function(){
     		$(this).css("background", "blue");
     	},
     	click:function(){
     		$(this).css("color", "pink");
     	}
     })
     

   • on() 构建一个自定义事件

     注: 自定义事件不会有其默认的触发时机, 如果想要让自定义事件的回调函数触发, 需要我们人为写代码触发!

     构建自定义函数：

     $().on(“自定义事件名”, function(事件对象, 接收的数据…){})

     触发自定义事件：

     $().trigger(“自定义事件名”, [要传递的数据…])

     //构建自定义事件
     $("#div1").on("myCusEvent", function(e, num, n1, n2){
         console.log("div1的自定义事件触发了!!! 接收到传递		来的随机数为", e, num, n1, n2);
     });
     
     //触发自定义事件
     var randomTimer = setInterval(function(){
         var ranNum = Math.floor(Math.random()* (50-			30+1)+30);
         console.log(ranNum);
         if (ranNum == 40) {
             // 触发div1的自定义事件, 并传值
             $("#div1").trigger("myCusEvent", [ranNum, 			11, 22]);
             clearInterval(randomTimer);
         }
     }, 500);
     

   • on()与普通绑定的优势

     on()可以为没有创建好的元素绑定事件

     原理：

     实际上不是给为创建的元素绑定事件, 而是给将要创建的元素父级绑定on事件, 并指定触发的元素为将要创建的元素

     语法：

     $(“父级”).on(“事件名”, “指定触发的元素”, 回调函数)

     $("body").on("click", "p", function(){
         alert("p标签被点击了");
     });
     
     function createNewP() {
     $("<p/>").html("这是段落1标签").appendTo($("body"));
     }		
     

     普通方式绑定的事件, 无法移除, on()方式绑定的事件可以移除

     // 移除on()方式绑定的事件  off()
     setTimeout(function(){
     	$("#div1").off("click");
     }, 3000);