javascript活动

在javascript倘若有知识的三个方面。事件的第一，流程，其次，事件处理，第三，事件对象。下面就我个人的理解，，分别讲述一下这三个方面的内容。

第一、事件流

事件流指的是事件依照一定的顺序触发。它有两个顺序，各自是自上而下和自下而上。

自上而下的叫做事件捕获。事件捕获指的是事件的处理将从DOM层次的根開始，而不是从触发事件的目标元素開始，事件被从目标元素的全部祖先元素依次往下传递。在这个过程中。事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，假设事件监听器在被注冊时设置了useCapture属性为true,那么它们能够被分派给这期间的不论什么元素以对事件做出处理。否则。事件会被接着传递给派生元素路径上的下一元素。直至目标元素。

事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

自下而上的叫做事件冒泡。当事件在某一DOM元素被触发时，比如用户在客户名字节点上点击鼠标，事件将尾随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点。此时，该事件是onclick事件。

在冒泡过程中的不论什么时候都能够终止事件的冒泡。在遵从W3C标准的浏览器里能够通过调用事件对象上的stopPropagation()方法，在Internet Explorer里能够通过设置事件对象的cancelBubble属性为true。

假设不停止事件的传播。事件将一直通过DOM冒泡直至到达文档根。

第二、事件处理程序

事件处理程序就是捕获到某个事件之后运行的程序。它有三种方式。

1、html级事件处理程序，即在html标签中直接增加事件处理程序。

例如以下所看到的：

<input type="button" value="button" onclick="alert('hello word!')" />

2、dom0级事件处理程序。即把一个函数赋值给一个事件的处理程序属性。

代码例如以下：

var element=document.getElementById('button');
element.onclick=function(){
       alert('hello word!');
}

3、dom2级事件处理程序，即通过调用dom对象的addEventListener( )方法注冊事件处理程序。addEventListener()方法须要三个參数，各自是事件名、事件处理程序的函数和useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。使用addEventListener方法时须要注意事件名不要加前缀“on”，通过addEventListener方法加入的事件处理程序仅仅能通过removeEventListener才干删除。通过addEventListener能够为一个dom加入多个同样的事件处理程序并按顺序运行。代码例如以下：

var element=document.getElementById('button');
element.addEventListener('click',function(){alert('hello jim!')},false);
element.addEventListener('click',function(){alert('hello jack!')},false);

在不遵循w3c标注的浏览器上并不支持addEventListener方法。比如IE8及下面版本号的IE浏览器和Opera浏览器，它们在注冊事件处理程序的时候要用到的是attachEvent方法，删除事件使用detachEvent，它们分别接收两个參数，各自是事件名和事件处理的函数。

这里要注意了。使用这两个方法的时候，事件名必须是要加上前缀“on”的，否则无法识别。

第三、事件对象。在触发dom上的事件时都会产生一个事件对象：event。

它包括了事件的类型、鼠标的坐标等。

我们能够通过event对象target属性指的触发事件的dom对象。在IE8及下面浏览器中要获取这个对象要通过srcElement这个属性来获得。

event对象中的stopPropragation方法是阻止事件冒泡，preventDefault方法阻止默认行为，在IE8及下面浏览器中要设置event.cancelBubble=true阻止事件冒泡，设置event.returnValue=false阻止默认行为。

版权声明：本文博客原创文章，博客，未经同意，不得转载。