JavaScript事件---事件绑定和深入 - 努力就有机会

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

JavaScript事件---事件绑定和深入 - 努力就有机会  阅读原文»

发文不易，转载传播，请亲注明链接出处，谢谢！

内容提纲：

1.传统事件绑定的问题

2.W3C事件处理函数

3.IE事件处理函数

4.事件对象的其他内容

事件绑定分为两种：一种是传统事件绑定(内联模型，脚本模型)，一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。

一．传统事件绑定的问题

传统事件绑定有内联模型和脚本模型，内联模型我们不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。

1 var box = document.getElementById('box'); //获取元素
2
3 box.onclick = function () { //元素点击触发事件
4
5 alert('Lee');
6
7 };

问题一：一个事件处理函数触发两次事件

window.onload = function () { //第一组程序项目或第一个JS文件

alert('Lee');

};

window.onload = function () { //第二组程序项目或第二个JS文件

alert('Mr.Lee');

};

当两组程序或两个JS文件同时执行的时候，后面一个会把前面一个完全覆盖掉。导致前面的window.onload完全失效了。

解决覆盖问题，我们可以这样去解决：

PS：如果一开始没有window.onload，旧版火狐显示undefined，新版显示object，谷歌和IE浏览器也是object；如果有window.onload，所有浏览器都会显示function。

1 window.onload = function () { //第一个要执行的事件，会被覆盖
2
3 alert('Lee');
4
5 };
6
7 if (typeof window.onload == 'function') { 　　//判断之前是否有window.onload
8
9 var saved = null; //创建一个保存器
10
11 saved = window.onload; //把之前的window.onload保存起来
12
13 }
14
15 window.onload = function () { //最终一个要执行事件
16
17 if (saved) saved(); //执行之前一个事件
18
19 alert('Mr.Lee'); //执行本事件的代码
20
21 };

问题二：事件切换器

window.onload = function () {

var box = document.getElementById('box');

box.onclick =toBlue; //第一次执行toBlue()

};

function toRed() {

this.className = 'red';

this.onclick = toBlue; //第三次执行toBlue()，然后来回切换

}

PS：直接将函数绑定给事件处理函数，toBlue里面的this就是事件对象box，否则是window！（事件入门一篇提到过）

function toBlue() {

this.className = 'blue';

this.onclick = toRed; //第二次执行toRed()

}

这个切换器在扩展的时候，会出现一些问题：

1.如果增加一个执行函数，那么会被覆盖

box.onclick = toAlert; //被增加的函数

box.onclick = toBlue; //toAlert被toBlue覆盖了

2.如果解决覆盖问题，就必须包含到一起，然后同时执行，但又出新问题

box.onclick = function () { //包含进去，但可读性降低

//第一次不会被覆盖，但第二次又被覆盖（被toBlue里面的onclick覆盖）

　　　　　toAlert();

toBlue.call(this); //还必须把this传递到切换器里

};

PS：通过匿名函数执行一个函数，此函数里面的this是window，所以必须在匿名函数中把this传递过去！

浅谈DevExpress<六>：为chart创建动态数据源 - 蚂蚁拉车  阅读原文»

【摘要】今天搞点稍微复杂些的东西，在列表中点击不同的行时，图表中显示和其数据关联的图，效果如下： 效果挺炫吧，现在就开始设计吧。首先在界面中拉一个分割面板，并将PivotGdidControl(多维数据控件)和ChartControl放进去： 然后为项目模拟一个数据源，在这里用北风数据库里的数据进行... 阅读全文

阅读更多内容