[JavaScript知识库]Jquery-on绑定事件和动态事件

Jquery-on绑定事件

• 与传统的绑定事件不同，变得更丝滑了

on可以绑定多个事件

• 在传统的绑定事件中，只能绑定一个事件,例如：$(" div ") . click ( function(){…} )
• 用on可以绑定多个事件，例如:

$("div") . on( {
		click:function(){
			...
		},
		mouseleave:function(){
			...
		},
		mouseenter:function(){
			...
		},
} )

• 注意书写格式：on( { 事件一，事件二，事件三 ， … } )

on倘若多个事件的效果相同

• 有时多个事件的效果相同，那么可以把这些相同的事件写在一起
• 格式为：$(“div”).on(" click mousleave ", “function(){…}” )
  例如：

$("div").on({
      mouseenter:function(e){
        console.log(“鼠标进入”)
      },
     " mouseleave click":function(){
        alert("aaa")
      },

on绑定动态事件

• 动态事件的原理就是事件委派

事件委派

• 通过父元素绑定事件，但是触发在字元素。
• 格式： $(“ol”). on(“click” , “li” , function(){。。。 })
• 原理：比如这个事件绑定在ol标签(里面有很多li标签)上面，那么ol就可以触发事件，但事件触发绑定在子元素li上面，那么ol中的li就获得了事件
• 对比：好处就是可以进行动态事件的绑定（如下）

动态事件

• 倘若我们的事件也就绑定完了，但是后面又添加了一个子元素进来，那么这个子元素是没有绑定事件的
• 例如：【(ol li) 是子选择器，选择ol中的li】

 $("ol li").on("click",function(){
			 alert("我出来了)
		 }) //那么原本ol中的所有li都获得了这个点击事件)
		 
 $("ol").append($("<li>新元素</li>>")) //这是后面添加的，那么就不会有这个点击事件

• 但是倘若我们使用动态事件：

$("ol").on("click","li",function(){
         alert("我出来了)
      })

   $("ol").append($("<li>新元素</li>>")) //这是后面添加的，但是有点击事件

原因：因为这里绑定事件的是ol中的li，只要是里面的li，就都满足这个条件，就会有绑定事件

注意事项

• 当绑定一个添加事件时，我们应该每次都添加新的元素，而不是吧已知元素添加进来
• 例如：

$("ol").on("click","li",function(){
          $("ol").append(a));
      })
    a=$("<li>新加</li>")

• 这个时候我们的添加的是a这个元素，那么a这个元素就只能被添加一次，意思是我不管点多少下这个事件，都只能增加一次
• 正确的方法应该不断添加新元素

  $("ol").on("click","li",function(){
          $("ol").append($("<li>新加</li>"));
      })