zoukankan      html  css  js  c++  java
  • jQueryInAction Reading Note 4.

    事件模型:javascript相关

    事件模型的概念是浏览器的内容,却又与javascript相关

    DOM第0级事件模型

    在出现标准的事件模型之前,网景公司的网景航海家浏览器中引入了事件模型的概念。

    $("#someId")[0].onclick = function(event){//...}

    <img src="..." onclick="someFunction();" />

    Event实例

    javascript的每一个函数都有一个event实例作为默认参数。

    在非IE浏览器中,event作为一个类的实例,传递给函数;在IE中,Event类的实例赋给了window.event变量。

    事件冒泡

    当点击一个元素的时候,这个元素的点击事件触发以后,包含这个元素的父元素的点击事件也会触发,以此类推,直到HTML元素。

    这种特性成为冒泡事件。

    阻止冒泡事件

    event实例有一个stopPropagation()方法,这个方法能够阻止冒泡事件的继续发生。

    而IE的做法是把event的一个名叫cancelBubble的属性的值设为true。

    DOM第2级事件模型

    $("someId")[0].addEventListener("click", function(event){//some work to do}, false);

    这里面click是eventType,常见的有click,dbclick,blur,mouseover等;

    function就是针对这个元素的eventType事件的处理函数;

    false,成为useCapture。

    这个useCapture的值为true的时候,发生冒泡的逆运算;false的时候,发生冒泡;

    这种形式的好处是可以给一个元素追加多个同意eventType类型的函数处理;

    jQuery事件模型:jQuery相关

    bind(eventType, data, listener)

    给一个包装集中的各个元素的eventType类型的event追加一个listener类型的处理函数,而data能够传递给默认的event实例的data属性

    eventType支持"click.editMode"这种形式,这种形式处理的仍然是click事件,但是这个click事件只有在editMode模式下有效。

    导致模式失效的是下面的unbind方法;

    one(eventType, data, listener)

    跟bind基本相同,不过这个元素上绑定的这个事件类型发生一次之后自动移除。

    unbind(eventType, listener)

    unbind(evnet)

    就是把绑定到元素上的eventType类型的event处理函数去除掉

    trigger(eventType)

    触发指定的eventType类型的event。

    这个方法仅仅是触发这个event,不会发生连带反应。

    toggle(listenerOdd, listenerEven)

    点击事件,当点击次数为奇数次时触发listenerOdd函数,偶数次时触发listenerEven函数。

    hover(overListener, outListener)

    覆盖事件,当覆盖当前元素时触发overListener函数,当从当前元素上移开时触发outListener函数。

    $(":checkbox").click(function(event){

      var checked = this.checked; // 判断当前checkbox是否为选中状态

      $("div", $(this).parents("div:first")) // 从当前checkbox元素的父节点中找到第一个div元素,并且从这个div元素内部查找div元素。

        .css("display", checked ? "block" : "none");

    });

    $('span[price] input[type=text]').change(function(event){  // 查找拥有price属性的span元素的子节点中类型为text的input元素

      $('~ span:first', this)  // this指代的是input元素,查找this的兄弟节点中第一个span

        .text(  // 设定其span的text内容

          $(this).val() * $(this).parents("span[price]:first").attr('price');  // 获取input的值,乘以这个input元素的父节点中第一个拥有price属性的span的特性price的值

        )

    });

  • 相关阅读:
    iOS js交互
    崩溃!UIAlertController 引起的崩溃
    跳转到AppStore下载app
    installshield basic msi 更新时覆盖不了上一个版本文件解决方案1
    用ILMerge.exe合并dll
    获取某几个分类下的前N条数据 mssql语句
    计算网络文件的大小
    英语 2018-12-04 2法国燃料涨价抗议活动
    英语2018-12-04
    从一个故事说起,谈谈企业应用架构的演变史
  • 原文地址:https://www.cnblogs.com/voctrals/p/3896027.html
Copyright © 2011-2022 走看看