事件侦听及抛发 | 易学教程

事件基础：

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

事件侦听：

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

注意：

clickHandler只能是一个回调函数，不能直接执行(不能直接加括号)。
因为当收到事件时，执行该函数，如果加()表示立即执行，收到事件后就不会执行了。
addEventListener这个方法并没有对于clickHandler函数的返回结果做处理，因此 clickHandler使用return无效。
这里clickHandler是不能传参的，clickHandler里面有且只有一个参数是event对象。

事件抛发：

var target=new EventTarget();
target.addEventListener("chilema",clickHandler);
var evt=new Event("chilema");//创建事件对象
target.dispatchEvent(evt);//派发事件(抛发事件)

注意：

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

事件传输基础基于两个：

事件目标对象注册侦听事件，必须先注册再侦听。
向事件目标对象派发事件对象

高内聚低耦合：

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以下浏览器

来源：CSDN

作者：双手_成就梦想

链接：https://blog.csdn.net/weixin_46153665/article/details/103866863

标签

var函数