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
原文地址:https://www.cnblogs.com/sao-di-seng/p/5488987.html