事件侦听及抛发

本文深入解析事件机制的基础概念,包括事件的侦听与派发过程,探讨了系统与自定义事件的区别,以及事件在高内聚低耦合设计模式中的应用。同时,详细介绍了事件处理中的关键方法,如addEventListener和dispatchEvent的使用,以及如何阻止事件冒泡和默认行为。
摘要由CSDN通过智能技术生成

事件基础:

1. 事件是一种通知机制。
2. 事件是按照事件类型进行匹配的。

事件侦听:
事件侦听对象.addEventListener("click",clickHandler);
function clickHandler(e){
    //return  事件函数中不要使用return
}

注意:

  1. clickHandler只能是一个回调函数,不能直接执行(不能直接加括号)。
  2. 因为当收到事件时,执行该函数,如果加()表示立即执行,收到事件后就不会执行了。
  3. addEventListener这个方法并没有对于clickHandler函数的返回结果做处理,因此 clickHandler使用return无效。
  4. 这里clickHandler是不能传参的,clickHandler里面有且只有一个参数是event对象。
事件抛发:
var target=new EventTarget();
target.addEventListener("chilema",clickHandler);
var evt=new Event("chilema");//创建事件对象
target.dispatchEvent(evt);//派发事件(抛发事件)

注意:

  1. 分两种事件:系统派发事件,自定义派发事件。
  2. 侦听和派发的对象是同一个。
  3. 侦听和派发的事件类型完全相同。
  4. chilema就是这里事件类型,其实事件类型就是一个任意字符串。
  5. 系统派发的事件字符串是固定的,自定义派发的事件,字符串可以任意。
  6. EventTarget叫事件目标对象,Event实例的对象叫事件对象。侦听和派发的对象可以是DOM元素,也可以是EventTarget,或者继承EventTarget的类。
  7. 事件侦听回调函数,不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象(e)。

事件传输基础基于两个:

  1. 事件目标对象注册侦听事件,必须先注册再侦听。
  2. 向事件目标对象派发事件对象

高内聚低耦合:

javascript
   var obj={
            a:function(){
                document.addEventListener("b",this.b);
            },
            b:function(e){
                var num=e.num+10;
                var evt=new Event("a");
                evt.num=num;
                document.dispatchEvent(evt);
            }
        }
        var obj1={
            a:function(){
                document.addEventListener("a",this.b);
                var evt=new Event("b");
                evt.num=2;
                document.dispatchEvent(evt);
            },
            b:function(e){
                console.log(e.num);
            }
        }
        
        obj.a();
        obj1.a();

事件原理:

     事件原理三阶段
     捕获    目标     冒泡
     外    到达目标    内
     |                |
     内               外
 addEventListener(事件类型,事件回调函数,是否捕获阶段执行(默认false||对象{once:true})//是否只执行一次

阻止事件冒泡:
e.stopPropagation(); e.cancelBubble=true;//IE8以下浏览器
阻止默认事件:
e.preventDefault();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值