js事件

最新推荐文章于 2025-04-01 00:01:10 发布

原创最新推荐文章于 2025-04-01 00:01:10 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js基础编专栏收录该内容

24 篇文章

订阅专栏

本文深入探讨了事件处理机制，包括事件冒泡与捕获的概念，详细讲解了如何在不同浏览器环境下解除事件绑定及阻止事件传播和默认行为的方法。

事件
何为事件
重要吗？ 交互体验的核心功能

解除事件处理程序
    ele.onclick = false / null
    ele.reomveEventListener(type,fn,false);
    ele.detachEvent("on" + type , fn);
    如果绑定匿名函数则无法解除

事件处理模型 --- 事件冒泡、捕获
    事件冒泡：
        结构上（非视觉）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，
        自子元素冒泡向父元素。(自底向上)
    事件捕获：
        结构上（非视觉）嵌套关系的元素，会存在事件捕获的功能，即同一事件。
        自父元素捕获至子元素（事件源元素）(自顶向下)；

        IE没有捕获事件
    触发顺序，先捕获，后冒泡

    focus ， blur，change，submit，reset，select 等事件不冒泡
取消冒泡：
    W3C标准event.stopPropagation();不支持IE9以下的版本
    IE独有event.cancelBubble=true；
    封装取消冒泡的函数 stopBubble(event)
阻止默认事件：
    默认事件————表单提交，a标签跳转，右键菜单等
    1. return false 以对象属性的方式注册的事件才生效
    2.event。preventDefault();W3C标注，IE9一下不兼容
    3.event.returnValue = false ; 兼容IE
    封装阻止默认事件的函数 cancelHandler(event)