当前位置:Gxlcms > JavaScript > 有关DOM元素与事件的3个谜题_DOM

有关DOM元素与事件的3个谜题_DOM

时间:2021-07-01 10:21:17 帮助过:4人阅读

一、背景知识介绍
通常为DOM元素增加事件有以下几种办法:
1,硬编码形式
2,事件监听
3,JS框架提供的事件绑定
1,硬编码形式,采用的是原始事件(Original Event)的形式。
代码类似如下:
代码如下:


document.getElementById('element_id').eventName = func();

2,事件监听机制,这种形式采用的做法是根据DOM事件机制,分为DOM标准事件模型addEventListener和IE事件模型attchEvent。
代码类似如下:
代码如下:

var addEventHandler = function(ele, evt, fn){
if (ele.addEventListener) {
ele.addEventListener(evt, fn, false);
}
else
if (ele.attachEvent) {
ele.attachEvent('on' + evt, fn);
}
else {
ele['on' + evt] = fn;
}
};
var ele = document.getElementById('element_id');
addEventHandler(ele, 'eventName', function(){ code... });

3,JS框架提供的事件绑定机制,这里假设使用jQuery框架。
代码类似如下:
代码如下:

$('element_id').bind('eventName', function(event){ code... });
$('element_id').click(function(){ code... });

二、谜题
谜题是这样的,加入页面中有如下的代码片段:
代码如下:


... ...