20-第二十章 event对象 阻止冒泡 注册/ 移除监听事件

一、事件event对象

Event 对象 /ɪ'vent/ 事件
用来获取事件的详细信息：鼠标位置、键盘按键

主流浏览器:事件函数的第一个形参
低版本 IE ( IE8 及其以下不支持): window.event

标准下 : 事件对象是通过事件函数的第一个参数
传入 如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象

        ie: event是一个内置全局对象
        var obj.onclick = function (ev) {
            var ev = ev || window.event;
        }

        or

        document.onclick = function (e) {
            e = e || window.event;
        }

Event 对象的兼容：

        ev = ev || window.event;

Event 对象下的获取鼠标位置：e.clientX e.clientY

1、跟鼠标相关的

相对于当前文档可视窗口的左上角的坐标
clientX
clientY

相对于文档顶部左上角的坐标(真实宽高) IE8及其以下不支持
pageX
pageY

兼容 pageX / pageY

        _X = pageX || clientX + document.documentElement.scrollLeft;
        _Y = pageX || clientY + document.documentElement.scrollTop;

target 事件源
不兼容低版本 IE
低版本 IE 使用 srcElement

兼容 target

        tar = e.target || e.srcElement

事件类型
type: click

2、跟键盘相关的

key 按下的键名
keyCode 对象的键值

事件会在窗口或框架被调整大小时发生。

onresize

二、事件冒泡

事件冒泡指子元素触发事件的时候，会 冒泡（触发）父级的相同的事件
标准：ev.stopPropagation();
propagetion /ˌprɑpəˈgeɪʃən/ 传播
非标准( IE )：ev.cancelBubble= true;
cancel /'kænsl 取消
bubble /'bʌb(ə)l/ 冒泡，气泡

兼容写法

        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }

三、 注册处理事件

DOM 0级 默认冒泡，不可以捕获 (带 on 的都是dom 0级 事件)
同一个对象不能存在两个同类型事件，谁写在后面谁生效

DOM 2级· 默认冒泡，可手动修改为捕获
可以一次性绑定多个

捕获默认外层先执行
冒泡必须等内部全部执行完才能执行

回调函数必须写有名函数
因为如果写匿名函数，对象是 object 类型的，添加的和删除的是两个不同的对象

1、标准：obj.addEventListener(事件名称，事件函数，是否捕获);

obj.addEventListener(type, callback, boolean)
是否捕获
false 冒泡
true 捕获
先捕获后冒泡

• 有捕获
• 事件名称没有on
• 事件执行的顺序是正序
• this 触发该事件的对象

2、低版本IE obj.attachEvent(事件名称，事件函数);

attach /ə'tætʃ/ 附加

• 没有捕获
• 事件名称有 on
• 事件函数执行的顺序：
  标准ie >正序
  非标准 ie > 倒序
• this 指向 window

3、 移除 obj.removeEventListener(事件名称，事件函数)

ele.removeEventListener(click, callback, boolean)

4、 移除 object.detachEvent(事件名称,function);

detach /dɪ'tætʃ/ 分离

detachEvent(on + type, callback)

兼容 阻止冒泡行为

        // 添加事件监听
        function on(dom, type, cb, bool) {
            if (dom.addEventListener) {
                dom.addEventListener(type, cb, !!bool);
            } else {
                dom.attachEvent('on' + type, cb)
            }
        }


        // 清除事件监听
        function off(dom, type, cb, bool) {
            if (dom.removeEventListener) {
                dom.removeEventListener(type, cb, !!bool);
            } else {
                dom.detachEvent('on' + type, cb);
            }
        }

       const fn = () => {console.log("clicked")}
    
       on(document, "click", fn)
  
       off(document, "click", fn)

事件代理 \ 事件委托

自己的事件让别人去执行，本质上是利用事件冒泡行为

四、拖拽

onmousedown
onmousemove
onmouseup