JS中事件和事件处理程序有什么不同

2025-04-27 21:04:35
推荐回答(1个)
回答1:

浏览器会监控鼠标在页面所有的行为,即使你没有添加事件处理程序。
浏览器监控时,会以当前鼠标事件所触发的对象 (一般为视觉上鼠标所处位置的DOM元素) 为起始,触发事件,如果添加了事件处理程序,则调用相应的程序。

举例:











这是最简单的页面,页面上只有一个元素:按钮。当鼠标在按钮上按下(mousedown)时,会触发mousedown事件,如果为按钮添加了处理程序,如:
//伪代码
var Fn = function(){ alert('@_@'); };
btn.onclick = Fn;
那么,Fn函数就会被触发,弹出对话框;

到了现在,并没有结束:mousedown 事件会被响应到 body 元素(奇怪吗?这就是事件的冒泡和捕获),并触发添加到 body 元素的 mousedown 事件处理程序,如果添加了的话;

依然没有结束,事件会响应到更上一层,也是时间冒泡的最顶层:document,依然会触发相应的事件处理程序。

更复杂的DOM结构,也是如此。

当在按钮上按下左键 (mousedown) ,不松开按键将光标移至它处 (mousemove) 时,首先在按钮上触发了 mousedown 事件,鼠标移动时,触发了 mousemove 事件。由于鼠标在 move 的过程之中,会经过很多元素,经过的元素都会被触发 mousemove 事件,并且冒泡。

注:事件冒泡和视觉上的布局结构是毫无关系的,这个冒泡过程仅仅依赖于dom元素的html结构(即嵌套关系)。

以上,个人浅见仅作抛砖引玉。如有错误,请高手斧正。