zoukankan      html  css  js  c++  java
  • jq事件注意点

    接受数据参数--解决不同作用域下数据传递的问题

      <div id="test">点击触发</div>

      $('#test').click('001',function(e){

          alert(e.data)  //弹出001

      });

    mouseenter与mouseover(mouseout与mouseleave)的区别---关键是冒泡的方式处理问题

      <div>

        <p></p>

      </div>

      如果在div与p中都绑定mouseover,鼠标在离开p但没离开div时,出现p与div都响应事件,因为先触发p然后冒泡。

      mouseenter事件只会在绑定它的元素上被调用,不会在后代节点上被触发。。

    foucus(blur)与foucusin(foucusout)的区别---是否支持冒泡处理

      前者不冒泡,或者冒泡

    hover方法

      $(selector).hover(handlerIn, handlerOut)

    • handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
    • handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数

      $("p").hover(
          function() {
            $(this).css("background", 'red');
          },
          function() {
            $(this).css("background", '#bbffaa');
          }
      );

    on()的多事件绑定 on( events [, selector ] [, data ] )

      多个事件绑定同一函数

        $('*').on('mouseover mouseout',function(){});

      多个事件绑定不同函数

        $(*).on({

          mouseover:function(){},

          mouseout:function(){},

        });

      将数据传递到处理程序

        $('*).on('click',{name:'my',age:'36'},function(e){

          alert(e.data.name);

        })

      委托机制

        .on(events,[,selector][,data],handler(eventObject))

        如:

          <div>

            <p>

              <a>目标节点</a>

            </p>

          </div>

        $('div').on('click','p',fn)

         事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中

         遇到了选择器匹配的元素,将会触发事件回调函数。

      事件委托

        利用浏览器的冒泡特性,给父元素绑事件,用e.target判断被触发的元素,做相应的function。

        (e:事件对象---是用来记录一些事件发生时的相关信息的对象。只在事件发生时产生,只能是事件处理函数内部访问,在所有事件处理函数运行结束后,

          事件对象就被销毁)。

      jQuery事件属性方法

        e.type/pageX/pageY/preventDefault()/stopPropagation()/which/currentTarget(等同于this).

        this与e.target的区别:

            冒泡过程中this是可以变化的,但e.target永远是直接接受事件的目标DOM元素

        this与e.target都是dom对象,用jq需要转换为$(this),$(e.target)

    trigger事件--根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

       $('#elem').trigger('click') //不同点击直接运行click时的fn。

       trigger还支持自定义事件,支持传递参数

          $('#elem').on('Aaron',function(e,arg1,arg2){

            alert('自触自定义事件')

          });

          $('#elem').trigger('Aaron',['参数1','参数2']);

    trigger触发浏览器事件与自定义事件的区别:

       自定义事件对象,是jQuery模拟原生实现的

       自定义事件可以传递参数

    triggerHandler--触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件

       trigger与triggerHandler用法一样,不同点:

    • riggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
    • .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
    • 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
    • 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined
  • 相关阅读:
    Flask快速入门(14) — 请求上下文2
    Flask快速入门(13) — 请求上下文1
    24 python异常机制
    11 python socket网络编程
    21 python调用外部系统命令
    10 python从键盘获取输入、刷新缓冲区
    18 python文件、目录操作
    17 python内置特殊方法
    15 python之ORM sqlalchemy模块使用
    14 python类的继承
  • 原文地址:https://www.cnblogs.com/sao-di-seng/p/5488987.html
Copyright © 2011-2022 走看看