jQuery中事件方法live()与on()

项目笔记:

// 由于绑定的.xy是通过js增加的dom 还没有添加进DOM的元素的 要对其进行事件的绑定可以通过两个方法实现 ：
//-方案一.通过on()事件委托方法，给没有DOM元素添加事件委托 就只能先找到父级，然后委托子元素进行事件传递
// demo=> ( ′ . m o v i e b o x ′ ) . o n ( ′ c l i c k ′ , ′ . x y ′ , f u n c t i o n ( ) ) / / 在 j Q u e r y 1.8 版 本 及 其 以 下 的 老 版 本 提 供 了 一 个 . l i v e 的 方 法 。 / / 事 件 委 托 / / . l i v e ( ) 方 法 能 对 一 个 还 没 有 添 加 进 D O M 的 元 素 有 效 ， 是 由 于 使 用 了 事 件 委 托 ： 绑 定 在 祖 先 元 素 上 的 事 件 处 理 函 数 可 以 对 在 后 代 上 触 发 的 事 件 作 出 回 应 。 / / 传 递 给 . l i v e ( ) 的 事 件 处 理 函 数 不 会 绑 定 在 元 素 上 ， 而 是 把 他 作 为 一 个 特 殊 的 事 件 处 理 函 数 ， 绑 定 在 D O M 树 的 根 节 点 上 。 在 我 们 的 例 子 中 ， 当 点 击 新 的 元 素 后 ， 会 依 次 发 生 下 列 步 骤 ： / / 1 、 生 成 一 个 c l i c k 事 件 传 递 给 < d i v > 来 处 理 / / 2 、 由 于 没 有 事 件 处 理 函 数 直 接 绑 定 在 < d i v > 上 ， 所 以 事 件 冒 泡 到 D O M 树 上 / / 3 、 事 件 不 断 冒 泡 一 直 到 D O M 树 的 根 节 点 ， 默 认 情 况 下 上 面 绑 定 了 这 个 特 殊 的 事 件 处 理 函 数 。 / / 4 、 执 行 由 . l i v e ( ) 绑 定 的 特 殊 的 c l i c k 事 件 处 理 函 数 。 / / 5 、 这 个 事 件 处 理 函 数 首 先 检 测 事 件 对 象 的 t a r g e t 来 确 定 是 不 是 需 要 继 续 。 这 个 测 试 是 通 过 检 测 ('.movie_box').on('click','.xy',function(){ }) // 在jQuery 1.8版本及其以下的老版本提供了一个.live的方法。 //事件委托 // .live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。 // 传递给 .live()的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤： // 1、生成一个click事件传递给

来处理 // 2、由于没有事件处理函数直接绑定在

上，所以事件冒泡到DOM树上 // 3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。 // 4、执行由 .live()绑定的特殊的 click 事件处理函数。 // 5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 (′.movieb​ox′).on(′click′,′.xy′,function())//在jQuery1.8版本及其以下的老版本提供了一个.live的方法。//事件委托//.live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。//传递给.live()的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在DOM树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：//1、生成一个click事件传递给<div>来处理//2、由于没有事件处理函数直接绑定在<div>上，所以事件冒泡到DOM树上//3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。//4、执行由.live()绑定的特殊的click事件处理函数。//5、这个事件处理函数首先检测事件对象的target来确定是不是需要继续。这个测试是通过检测(event.target).closest(’.clickme’) 能否找到匹配的元素来实现的。
// 6、如果找到了匹配的元素，那么调用原始的事件处理函数。
// 由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
// 具体实现：直接找到未添加到dom元素的，为其绑定.live()方法
// $(’.xy’).live(‘click’,function(){
})