1.DOM事件
1)DOM对象的句柄书写;
2)句柄绑定函数;
3)在事件发生的同时,关于事件的信息,如发生时鼠标在屏幕上面的坐标,事件类型等这些信息,都会被打包成一个对象,返回给我们获取。
这个对象就是DOM事件对象。
2.绑定事件
1)将事件写在标签的属性里面,例如οnclick=””,这种方式受到所有浏览器支持,但是代码混乱,不够简洁,并且效率不高,不符合行为、结构和样式相分离的方式。
2)用事件的属性来绑定事件函数。这种方式完成了行为的分离,并且便于操作当前事件对象,因为函数是作为对象的属性而出现的,因此函数里面操作对象,直接使用this就能够引用当前事件对象,同时可以很方便的读取事件对象,当事件被触发时,系统自动把事件对象自动传给事件函数的第一个参数。但是只能够绑定一个事件,绑定多个事件会产生覆盖。
3)利用addEventListener进行绑定事件,这种方式的优点之一就是可以绑定多个事件。
domObject.addEventListener();这就是这种模式的书写方式。
其中有三点需要注意,第一点是事件名一律不带ON,第二点是绑定事件函数中的this是指绑定该事件的对象,第三点是事件执行的顺序,是按照绑定的顺序来执行的。
3.事件模型
通过addEventListener的第三个参数来设置,true代表捕捉,false代表冒泡,默认为false。
1)捕捉模型:点击中间模块,由外向内触发;
2)冒泡模型:点击中间模块,由内向外触发。
4.事件阻止或停止
用事件对象的stopPropagation()函数进行事件的停止传播,用事件对象的preventDefault() = true使事件不发生。
5.解除事件绑定
利用removeEventListener()进行解除绑定。
6.IE的事件模型和标准的区别
1)绑定事件的函数不同,attachEvent,取消事件detachEvent;
2)事件必须加ON;
3)IE中this指向window;
4)事件第三个参数没有效果。
可以通过自定义绑定事件函数来进行解决。
7.事件委托
子元素上不绑定事件,而是利用冒泡原理,到父元素去执行的特点,成为事件委托,将子元素的事件委托给父元素。
8.网络代码
五子棋:
<script type="text/javascript">
var count = (function() {
var currentColor = 'black';
return function() {
var tmp = currentColor;
if(currentColor == 'black') {
currentColor = 'white';
} else {
currentColor = 'black';
}
return tmp;
}
})();
window.onload = function() {
document.getElementsByTagName('table')[0].onclick = function(event) {
play.call(event.srcElement)
};
var tds = document.getElementsByTagName('td');
var isWin = false;
var play = function() {
var color = cnt();
if (isWin) {
alert('已分出胜负');
return;
}
if (this.style.background.indexOf('gif') >= 0) {
alert('此处已落子');
return;
}
this.style.background = 'url(./images/' + color + '.bmp)';
judge.call(this,color);
}
var judge = function(color) {
var currentColor = {'x':this.cellIndex,'y':this.parentElement.rowIndex,color:color};
var line = [' ',' ',' '];
for (var iNum = 0, tmp{}; iNum < 225; iNum++) {
tmp = {x:tds[iNum].cellIndex,y:tds[iNum].parentElement.rowIndex,color:'0'};
if (tds[iNum].style.background.indexOf('black') >= 0){
tmp.color = 'b';
} else if (tds[iNum].style.background.indexOf('white') >= 0){
tmp.color = 'w';
}
if (currentColor.y == tmp.y) {
line[0] += tmp.color;
}
if (currentColor.x == tmp.x) {
line[1] += tmp.color;
}
if ((currentColor.x + currentColor.y) == (tmp.x + tmp.y)) {
line[2] += tmp.color;
}
if ((currentColor.x - tmp.x) == (currentColor.y - tmp.y)) {
line[3] += tmp.color;
}
}
color = color == 'black' ? 'bbbbb' : 'wwwww';
for (var i = 0; i < 4; i++) {
if (line[i].indexOf(color) >= 0) {
alert('black 赢了');
isWin = true;
break;
}
}
}
};
</script>