js事件拓展

事件总括

    *   1、行为本身：浏览器天生就赋予其行为onclick onmouseover onmouseout (onmouseenter onmouseleave不会产生事件冒泡)  onmousemove
    *   onmousedown onmouseup onmousewheel onscroll onresize onload onunload onfocus onblur onkeydown onkeyup。。。
    *   没有给上述行为绑定方法，事件也存在，触发后执行，只是什么都不做而已
    *   2、事件绑定:
    *       oDiv.onclick=function...     DOM0级事件绑定  onclick行为定义在oDiv的私有属性上
    *       oDiv.addEventListener('click',function(){},false)  DOM2级事件 addEventListener这个属性是定义在EventTarget
    *       这个类的原型上

事件的传播机制

    * 捕获阶段：从里往外一次查找元素
    * 目标阶段：当前事件源本身操作
    * 冒泡阶段：从内到外依次触发相关行为（最常用）

事件传播机制.jpg

• 冒泡和捕获
  捕获就是：爹（target）的事件触发，儿子和孙子的相同的事件也会被触发
  冒泡就是：儿子（target）触发事件，爹和祖宗的相同的事件也会被触发
  阻止冒泡

e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

事件委托

把事件绑定到目标元素群的父元素上，通过e.target来判断点击的真正目标，在执行相应的程序

事件冒泡与默认行为

让事件处理函数return false来阻止冒泡和默认行为， 可以认为return false做了三件事情：
1.stopPropagation()；
2.preventDefault()；
3.立即结束当前函数并返回。

DOM 0级事件

• 给元素对象的某一个私有的属性赋一个值（一个函数的值），当事件触发的时候找到对应的属性值，并且执行
• DOM 0级事件只能给元素的某一个事件绑定一次方法，最后绑定的方法会把前面绑定的所有的方法都覆盖掉

DOM 2级事件

• 给当前元素的某一个事件绑定的方法都放置在事件池中，当事件执行的时候，会把事件池里的所有的方法依次去执行
  1.addEventListener 绑定事件
  2.removeEventListener 移除事件
• DOM 2级事件可以为当前元素的某一个事件绑定多个不同的方法，当前事件触发时，会到对应的事件池中把所有的绑定的方法依次执行。
• DOM2和DOM0事件共存，不会冲突 。

深入

• DOM2可以给元素的某一个事件行为绑定多个方法
  1.事件触发时执行对应的方法们，此时不管哪个方法中的this指向的都是当前元素
  2.我们按顺序把顺序增加到‘事件池’中，当触发事件时，方法按照添加的顺序依次执行
  3.如果当前的方法已经给元素的这个行为绑定过一次了，事件池中这个方法不会重复添加
• DOM2中，我们一般绑定的都是实名函数，只有这样，当移除的时候才知道移除谁，
  在IE6-8中绑定的方法只能在冒泡阶段发生。
• DOM2事件在IE6-8中兼容问题。
  1.绑定的语法不一样，IE6-8中，使用attachEvent、detachEvent
  2.标准浏览器this指向当前元素，IE6-8指向window
  3.重复绑定问题，IE6-8 相同的方法可以重复绑定
  4.顺序问题，标准浏览器按绑定的顺序执行函数，IE6-8 没有顺序

function on(ele,type,fn){
  if(/^self/.test(type)){//说明是自定义的事件   都带前缀self
    if(!ele['aself'+type]){
      ele['aself'+type]=[]//创建自定义事件的事件池
    }
    var a=ele['aself'+type];
    for(var i=0;i

自定义事件(订阅发布模式)

function EventEmitter(){
}
EventEmitter.prototype.on=function(type,fn){
  if(!this['aEmitter'+type]){
    this['aEmitter'+type]=[]
  }
  var a=this['aEmitter'+type];
  for(var i=0i

jquery绑定

$(ele).bind() ------在新版本已经淘汰

• 将会给所有匹配的元素都绑定一次事件，当元素很多时性能会变差。 而且后来动态新增的元素不会被绑定。

• 可以添加自定义事件 然后用trigger来手动触发该事件。

• 多个事件类型可以通过用空格隔开一次性绑定：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

• 可以通过传递一个事件类型/处理函数的数据键值对映射来绑定多个事件处理程序

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

$(ele).delegate()

• 它将事件处理函数绑定在指定的根元素上， 由于事件会冒泡，它用来处理指定的子元素上的事件。
• 用于事件委托。

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

是等价于下面使用.on()的代码:

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

$(ele).on()

• 绑定事件最通用的方法，用$(ele).off()解绑事件
• 向事件处理函数中传入数据，并且在事件处理函数中通过名字来获取传入的数据：

function myHandler(event) {
  alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

$(ele).one()

• 处理函数在每个元素上每种事件类型最多执行一次

$( "#foo" ).one( "click", function() {
  alert( "这个函数只会执行一次" );
});

• 如果该方法的第一个参数包含多个用空格分隔的事件类型的话，那么每种类型的事件被触发时，处理函数仅会被每个事件类型调用一次。

$( "#foo" ).one( "click mouseover", function( event ) {
  alert( "The " + event.type + " event happened!" );
});

$(ele).trigger()

• 用来触发事件

$('#foo').on('click', function() {
      alert($(this).text());
    });
 $('#foo').trigger('click');//相当于用户点击了该元素

• 若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替。