事件处理

最新推荐文章于 2024-02-02 13:53:19 发布

michole

最新推荐文章于 2024-02-02 13:53:19 发布

阅读量650

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/michole/article/details/8109912

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种主要的事件处理方法：设置对象属性与调用事件注册方法。重点讲解了使用addEventListener和attachEvent注册事件处理程序的区别，并提供了阻止事件传播及默认行为的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件处理主要有两种方式，最好使用第2种。

1、设置对象属性

如 window.onload ，该方法各个浏览器都支持，但是每个对象的每种事件都只能注册一个事件处理程序，后注册的会替换之前的。

事件处理程序，都会被传递event参数。IE浏览器并未传递，需要通过全局对象window.event来获取。

function handler(event) {
     event = event || window.event;
     // other......
 }

调用上下文是对象，this指代该对象。

事件处理程序的返回值 (return false)，可以影响与该事件关联的浏览器默认行为。

若要阻止事件的传播，使用 event.stopPropagation() 方法阻止事件传播。IE浏览器设置 event.cancelBubble = true 来阻止事件冒泡。

2、调用事件注册方法

浏览器之间并不兼容，但是每种事件可以注册多个事件处理程序。

Dom标准事件模型，使用 addEventListener(), removeEventListener()。该事件模型支持捕获、冒泡两个阶段。并按照注册顺序调用事件处理程序。

IE 浏览器，使用 attachEvent(), detachEvent()。该事件模型不支持捕获，只能冒泡。事件处理程序的调用顺序不能保证。

事件处理程序，都会被传递event参数。

调用上下文是对象，this指代该对象，但IE浏览器的attachEvent是window。

事件处理程序的返回值，使用 event.preventDefault() 方法阻止与该事件关联的浏览器默认行为。IE浏览器设置event.returnValue = false 来阻止。

若要阻止事件的传播，使用 event.stopPropagation() 方法阻止事件传播。IE浏览器设置event.cancelBubble = true 来阻止事件冒泡。

if (element.addEventListener) {
     element.addEventListener('click', function(event){
         //code here ...
         event.preventDefault();
         event.stopPropagation();
     }, false);
 } else if (element.attachEvent) {
     element.attachEvent('onclick', function(event){
         //code here ...
         event.returnValue = false;
         event.cancelBubble = true;
     });
 } else {
     //do nothing
 }

并不是所有的事件都冒泡，例外的是 scroll, focus, blur, mouseenter, mouseleave 事件。