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阻止默认行为。
版权声明:本文博客原创文章,博客,未经同意,不得转载。