学习JS（7）

1.DOM事件

    1）DOM对象的句柄书写；

    2）句柄绑定函数；

    3）在事件发生的同时，关于事件的信息，如发生时鼠标在屏幕上面的坐标，事件类型等这些信息，都会被打包成一个对象，返回给我们获取。

    这个对象就是DOM事件对象。

 

2.绑定事件

    1）将事件写在标签的属性里面，例如onclick=””，这种方式受到所有浏览器支持，但是代码混乱，不够简洁，并且效率不高，不符合行为、结构和样式相分离的方式。

    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>