jquery移除了live()、die(),新版事件绑定on()、off()的方法

梦里梦外; 2021-07-04 21:07 403阅读 0赞

新的绑定方法`on()`和比`live()`相比，效率比之前的高。因为`live()`是固定在`document`节点上的。如果绑定的元素嵌套在很深的层中，那么事件一级级的传递必将影响到效率。而`on()`是绑定在`$()`选择的元素上，嵌套深度可自由选择。

`on()`的参数 `on( events [, selector ] [, data ], handler(eventObject) )`

第二个参数可选，可以指定一个绑定的元素，例如:

$(".box").die().on('click','button',function(){ });

这样，就绑定到了`.box`元素中的`button`元素上了

可以同时绑定多个事件：

$(".demonstrate").on("mouseover mouseout","ul li",function(e){ 
    if(e.type=="mouseover"){ 
    $(this).addClass("over");
    }else{ 
    $(this).removeClass("over");
    }
    })

`on()`也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数：  
![在这里插入图片描述][2020102822140752.png]

--------------------

## jQuery中`on、off`和`one` ##

jQuery绑定事件和解绑的方法有三组共六个(绑定事件bind()和unbind()，事件委托.live()和.die()还有delegate()和undelegate())。由于这三组的共存可能会造成一定的混乱，为此 jQuery1.7以后推出了.on()和.off()方法彻底摒弃前面三组。

### 用`on()`替代`bind()`方式: ###

$('.button').on('mouseover mouseout',function(){ });//替代.bind()方式，并绑定一个或多个事件
    
    $('form').on('submit', function () { return false;}); //替代.bind()方式，阻止默认行为并取消冒泡
    
    $('form').on('submit', false); //替代.bind()方式，阻止默认行为并取消冒泡的简写

### 用`off()`替代`unbind()`方式，移除事件 ###

$('.button').off('click');

### `on()`替代`live()`和`delegate()`，事件委托 ###

$('#box').on('click', '.button', function (){ $(this).clone().appendTo('#box');});

### `off()`替代`die()`和`undelegate()`，取消事件委托 ###

$('#box').off('click', '.button');

不管是`.bind()`还是`.on()`，绑定事件后都不是自动移除事件的，需要通过`.unbind()`和`.off()`来手工移除。jQuery 提供了`.one()`方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。

$('.button').one('click', function(){ alert('one仅触发一次!');}); //绑定事件只触发一次
    
    $('#box).one('click','click',function(){ });//委托事件只触发一次

--------------------

# jQuery第三天 #

课程回顾：

属性：`prop，attr`

`parents`：获取上级元素，`toFixed`

文本内容值：`html，text，val`

元素操作：

遍历元素：

$(元素).each(function () { })
    $.each(对象,function () { })

创建元素：`$('元素')`

添加元素：`append，appendTo，prepend，prependTo，after，before`

删除元素：`remove，empty，html`

尺寸：`width，innerWidth，outerWidth，outerWidth（true）`

位置：`offset，pisotion`

卷起：`scrollTop，scrollLeft`

滚动事件：`scroll`

改变事件：`change`

## jQuery事件 ##

目标：

能够说出4种常见的注册事件 
    能够说出 on 绑定事件的优势
    能够说出 jQuery 事件委派的优点以及方式
    能够说出绑定事件与解绑事件

### jQuery事件注册 ###

> 语法：`element.事件(function(){})`

$(“div”).click(function(){   事件处理程序 })

> 其他事件和原生基本一致。
> 
> 比如`mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll` 等

### 事件处理`on()`绑定事件 ###

> `on()` 方法在匹配元素上绑定一个或多个事件的事件处理函数  
> 语法：`element.on(events,[selector],fn)`

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

**`on()` 方法优势1：**

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

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

**`on()` 方法优势2：**

> 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

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

> 在此之前有`bind(), live()，delegate()`等方法来处理事件绑定或者事件委派，最新版本的请用`on`替代他们。

**`on()` 方法优势3：**

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

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

### 事件处理`off()`解绑事件 ###

> `off()` 方法可以移除通过 `on()` 方法添加的事件处理程序。

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

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

### 自动触发事件`trigger()` ###

> 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发  
> `element.click() // 第一种简写形式`  
> `element.trigger("type")//第二种自动触发模式`

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

> `element.triggerHandler(type) // 第三种自动触发模式`  
> `triggerHandler`模式不会触发元素的默认行为，这是和前面两种的区别。

## jQuery事件对象 ##

> 事件被触发，就会有事件对象的产生。  
> 【event==》事件对象】

element.on(events,[selector],function(event){ })

阻止默认行为：event.preventDefault()   或者 return  false 
    阻止冒泡： event.stopPropagation()

上午回顾：

jQuery事件注册：
    
    			$(元素).click(function () { });
    
    			$(元素).on('事件类型'，'后代元素'，function () { });
    
    	解绑：$(元素).off('click','后代元素');
    
    	一次性：$(元素).one('事件类型',function () { });
    
    	自动触发事件：
    
    			$(元素).click();
    
    			$(元素).trigger('事件类型');
    
    			$(元素).triggerHandler(''事件类型);
    
    	事件对象：event：
    
    			阻止默认行为：event.preventDefault()
    
    			阻止冒泡：event.stopPropagation()

## jQuery其他方法 ##

> jQuery 插件

### **jQuery**插件 ###

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 
    注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
    **jQuery** **插件常用的网站：**
    1.  jQuery 插件库  http://www.jq22.com/     
    2.  jQuery 之家   http://www.htmleaf.com/  
    **jQuery** **插件使用步骤：**
    1.  引入相关文件。（jQuery 文件 和 插件文件）    
    2.  复制相关html、css、js (调用插件)。

### 图片懒加载或者（BOOTSTRAP插件） ###

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

当我们页面滑动到可视区域，再显示图片。

我们使用jquery 插件库 `EasyLazyload`。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

注意：

1、要引入JQuery

2、插件JS【js引入文件和js调用必须写到 `DOM`元素（图片）最后面】

3、将图片 `src` 替换为 `data-lazy-src`

4、调用`lazyLoadInit(）`

### BOOTSTRAP插件 ###

1、引入CSS、引入JQ、引入JS

2、`.container`