jQuery（四）

1、jQuery事件

• 事件注册
  • 元素.事件（function(){}）

2、事件处理 on() 绑定事件

• 语法： element.on(events, [selector], fn)

  • events:一个或多个用空格分隔的事件类型，如"click"，"keydown"
  • selector：元素的子元素选择器
  • fn：回调函数 即绑定在元素身上的侦听函数

• on() 方法优势

  • 1、可以绑定多个事件、多个处理事件处理程序

     $(“div”).on({
      mouseover: function(){},
      mouseout: function(){},
      click: function(){} 
    
    }); 
    

  • 2、事件委派

    • 把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

      $('ul').on('click', 'li', function() {
         alert('hello world!');
      }); 
      

  • 3、动态创建的元素，click()没有办法绑定事件,on()可以给动态生成的元素绑定事件

     $(“div").on("click",”p”, function(){
       alert("给动态生成的元素绑定事件")
     });
    

3、解除事件绑定

• off()

  $("p").off() // 解绑p元素所有事件处理程序
  
  $("p").off( "click")  // 解绑p元素上面的点击事件 
  
  $("ul").off("click", "li");   // 解绑事件委托
  

• 如果有的事件只想触发一次， 可以使用 one() 来绑定事件

4、自动触发事件

• 简写

• 对象调方法

• trigger() 会触发元素默认效果

  $("p").on("click", function () {
  
    alert("hi~");
  
  }); 
  
  $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
  

• triggerHandler() 不会触发元素的默认行为

5、jQuery事件对象

• 事件被触发，就会有事件对象的产生
• 阻止默认行为
  • e.preventDefault() 或者 return false
  • 阻止事件冒泡
    • e.stopPropagation();

6、瀑布流

7、图片懒加载

• 看到哪里加载到哪里

8、BootStrap插件

• 图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载