浅谈JavaScript事件机制与事件委托

程序员文章站 2022-05-06 08:01:37

...

一、事件流（捕获，冒泡）

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。
当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。

DOM2级事件规定事件流包括三个阶段，如图：浅谈JavaScript事件机制与事件委托

事件捕获阶段、处于目标阶段、事件冒泡阶段。

如果我们点击一个div盒子，实际上是先点击的document，然后点击事件一层一层的传递到div，如果div还有子元素，此时并不会停止，会一直传递到最后一层（这就是事件捕获的过程），然后最精确的元素再一层一层的往上传递到document（这是时间冒泡的过程）。

为了兼容更多的浏览器，非特殊情况一般我们都是把事件添加到在事件冒泡阶段。

两种基本事件模型

事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确。

二、事件处理程序

DOM0级事件处理程序

var btn= document.getElementById('btn');
btn.onclick = function(){
    console.log(this.id)//btn
}

注意：基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。利用这个原理我们可以解除事件，btn.onclick＝null;其中this就是绑定事件的那个元素；

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理；

DOM2级事件处理程序

DOM2支持同一dom元素注册多个同种事件，事件发生的顺序按照添加的顺序依次触发（IE是相反的）。
DOM2事件通过addEventListener和removeEventListener管理
//addEventListener(eventName,handlers,boolean);removeEventListener(),两个方法都一样接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段;
注意：通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，并且移除时传入的参数必须与添加时传入的参数一样；比如

var btn2 = document.getElementById('btn2');
var handlers = function () {
   console.log(this.id);
};

btn2.addEventListener('click',handlers,false);

btn2.removeEventListener('click',handlers.false);

IE事件处理程序

IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序,通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,IE8及以前只支持事件冒泡;

var btn3 = document.getElementById('btn3');
var handlers2=function(){
     console.log(this===window);//true,注意attachEvent()添加的事件处理程序运行在全局作用域中;
}
btn3.attachEvent('onclick',handlers2);

跨浏览器事件处理程序

//创建的方法是addHandlers(),removeHandlers(),这两个方法属于一个叫EventUtil的对象;但是这个没有考虑到IE中作用域的问题，不过就添加和移除事件还是足够的。

var EventUtil = {
   addHandlers: function (element, type, handlers) {
      if (element.addEventListener) {
         element.addEventListener(type, handlers, false);
      } else if (element.attachEvent) {
         element.attachEvent(on + type, handlers);
      } else {
         element['on' + type] = handlers;
      }
   },
   removeHandlers: function (element, type, handlers) {
      if (element.removeEventListener) {
         element.removeEventListener(type, handlers, false);
      } else if (element.detachEvent) {
         element.detachEvent(on + type, handlers);
      } else {
         element['on' + type] = null;
      }
   }
};

用法：

var btn4=document.getElementById('btn4');
var handlers3=function(){
   console.log('123')
};
EventUtil.addHandlers(btn4,'click',handlers3);
//……
EventUtil.removeHandlers(btn4,'click',handlers3);

三、事件对象

兼容触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含了所有与事件有关的信息，比如导致事件的元素target，事件的类型，及其他特定的相关信息。例如鼠标操作导致的事件对象中会包含鼠标的位置，单双击等，而键盘操作导致的事件对象会包含按下的键等信息；

事件被触发时，会默认给事件处理程序传入一个参数e , 表示事件对象；通过e，我们可以获得其中包含的与事件有关的信息；

只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会被销毁；

DOM中的事件对象

兼容DOM的浏览器会自动将一个事件对象event传递给事件处理程序
ps:关于事件对象中的this，target，currentTarget,看个例子：（注：event.target不支持IE浏览器，应该用event.srcElement；还有 IE中通过attachment添加的事件是运行在全局作用域中的，this===window）
当事件绑定在真正的目标元素上时，this===target===currentTarget ,而且绑定事件时是否捕获结果都是一样的，此时eventParse==2;

//this,target,currentTarget,this===currentTarget
$('#outer').on('click','#center',function(e){
   console.log(this.id);//on()中间的参数是个过滤器,相当于将事件绑定到了#center上;此时点击#center将不会触发事件
   console.log(e.target.id);
   console.log(e.currentTarget.id);
});

$('#outer').on('click',function(e){
   console.log(this.id);
   console.log(e.target.id);
   console.log(e.currentTarget.id);
});

event.stopPropagation()不能简单说阻止了事件的冒泡，其实也阻止了事件的继续捕获，确切的说应该是阻止事件的进一步传播

var d1 = document.getElementById('d1');
d1.addEventListener('click', function (evt) {
    console.log('d1');
    evt.stopPropagation();
}, true);
var d2 = document.getElementById('d2');
d2.addEventListener('click', function () {
    console.log('d2');
}, true);

event.stopPropagation()可以组织事件的传播，但它阻止不了绑定在该元素上的其他函数的执行，比如将上面例子改一下，给d1再绑定一个事件，同时d1的第一个事件中改成event.stopImmediatePropagation()，那么第二个事件也会被阻止，它不仅阻止事件的传播还阻止后续事件的执行；

var d1 = document.getElementById('d1');
d1.addEventListener('click', function (evt) {
    console.log('d1');
    evt.stopImmediatePropagation();
}, true);
d1.addEventListener('click', function (evt) {
    console.log('d1+1');
}, true);
var d2 = document.getElementById('d2');
d2.addEventListener('click', function () {
    console.log('d2');
}, true);

IE中的事件对象

IE中event参数是未定的，事件对象是作为window的一个属性存在的，因此可以通过window.event来访问event对象，不同于DOM级中event是作为参数直接传入和返回；事件函数是以on开头的；

属性上也有一些不同，如下：
跨浏览器的事件对象

虽然DOM和IE中对象不同，但是两者event中的全部信息和方法都是类似的只是实现方式不同，可以用前面提到过的EventUtil对象来求同存异

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent(on + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },

    getEvent: function (event) {
        return event ? event : window.event;

    },

    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },

    removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent(on + type, handler);
        } else {
            element['on' + type] = null
        }
    }

};

使用上面的EventUtil对象，举个例子：

var myBtn=document.getElementById('my-btn');
btn.onclick=function(event){
     event=EventUtil.getEvent(event);
     EventUtil.preventDefault(event);
};

四、事件委托

每当将事件处理程序制定给元素时，运行中的浏览器代码与支持页面交互的JS代码之间就会建立一个连接，而这种连接越多，页面执行起来就越慢。考虑内存和性能问题，为了解决事件处理程序过多的问题，采用事件委托变得很有必要。（考虑到内存，也应该尽量减少不必要的事件处理程序，对于内存中过时不用的’空事件处理程序’，也是很有必要将其移除的；）

因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托；利用事件委托，只指定一个事件处理程序，就可以管理某一个类型的所有事件；例如：

var myLinks=document.getElementById('my-links');
myHandlers=function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);

    switch(target.id){
        case 'item-1':
            location.href='https://blog.csdn.net/sinat_36422236';
            break;
        case 'item-2':
            document.title='event';
            break;
        case 'item-3':
            console.log('hi');
            break;
    }
};
EventUtil.addHandler(myLinks,'click',myHandlers);

点击任何一个 li ，该点击事件依然会冒泡到父元素 ul 上，所以直接将点击 li 后要做的事写到了父元素的点击事件里；

总结一下js委托相关的：

因为把事件绑定到了父节点上，因此省了绑定事件。就算后面新增的子节点也有了相关事件，删除部分子节点不用去销毁对应节点上绑定的事件
父节点是通过event.target来找对应的子节点的。（事件处理程序中的this值始终等于currentTarget的值，指向的是绑定到的那个元素）

上一篇： JS的冒泡事件和捕获事件

下一篇： java多线程编程核心技术】-- 第一章：java多线程技能

浅谈JavaScript事件机制与事件委托

一、事件流（捕获，冒泡）

事件捕获阶段、处于目标阶段、事件冒泡阶段。

两种基本事件模型

二、事件处理程序

DOM0级事件处理程序

DOM2级事件处理程序

IE事件处理程序

跨浏览器事件处理程序

三、事件对象

DOM中的事件对象

IE中的事件对象

跨浏览器的事件对象

四、事件委托

浅谈Javascript事件对象

JavaScript常见事件对象与操作实例总结

Javascript中click与blur事件的顺序详析

详解JavaScript事件循环机制

C#委托与事件初探

一篇文章彻底搞清楚c#中的委托与事件

JavaScript常见鼠标事件与用法分析

javascript 运行机制事件循环浏览器缓存

C#委托与事件原理及实例解析

Javascript 事件冒泡机制详细介绍

浅谈JavaScript事件机制与事件委托

一、事件流（捕获，冒泡）

事件捕获阶段、处于目标阶段、事件冒泡阶段。

两种基本事件模型

二、事件处理程序

DOM0级事件处理程序

DOM2级事件处理程序

IE事件处理程序

跨浏览器事件处理程序

三、事件对象

DOM中的事件对象

IE中的事件对象

跨浏览器的事件对象

四、事件委托

浅谈Javascript事件对象

JavaScript常见事件对象与操作实例总结

Javascript中click与blur事件的顺序详析

详解JavaScript事件循环机制

C#委托与事件初探

一篇文章彻底搞清楚c#中的委托与事件

JavaScript常见鼠标事件与用法分析

javascript 运行机制 事件循环 浏览器缓存

C#委托与事件原理及实例解析

Javascript 事件冒泡机制详细介绍

javascript 运行机制事件循环浏览器缓存