事件对象

 

目录

使用方式

事件冒泡和事件委托

事件捕获

常用事件类型

---

使用方式

方式一   直接在标签属性中, 绑定事件和对应的执行代码
    <button id="btn" οnmοusemοve="alert('你干嘛摸我?');">按钮1</button>

方式二    绑定事件和对应的执行函数
    绑定方式1    通用, 但是多次绑定会覆盖
        box.onclick = function () {    //添加事件
            console.log('点击后执行');
        };
        box.onclick = null;    //移除事件

    绑定方式2    可以绑定多次, 正序执行
        box.addEventListener('click', eventCode, false);    //添加事件
        box.removeEventListener('click', eventCode, false);    //移除事件

    绑定方式3    适配IE78, 可以绑定多次, 逆序执行
        box.attachEvent('onclick', eventCode);    //添加事件
        box.detachEvent('onclick', eventCode);    //移除事件

//兼容代码	借助惰性函数进行优化
function addEventListener(element, type, fn) {  // 添加事件
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}
function removeEventListener(element, type, fn) {  // 移除事件
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

事件冒泡和事件委托

事件冒泡
    当一个DOM, 处理过事件之后, 会自动的向上传递;
    如果上层也监听了对应事件, 那么也会得到响应
        
阻止冒泡
    event.stopPropagation();

事件委托
    我们可以借助事件冒泡机制, 直接监听他们的父元素的事件
    target:触发事件的某个具体对象,只会出现在事件流的目标阶段

<div id="box">
    <div class="smallBox">1</div>
    <div class="smallBox">2</div>
    <div class="smallBox">3</div>
</div>

<script>
let div = document.getElementById("box");
div.onclick = function(evt) {
    let target = evt.target;
    // 如果点击了子元素，事件会冒泡到父元素,此时点击的是哪个子元素target就是谁
    // 如果点击的是父元素，则 target=this
    if (target != this) { // 这里表示点击的是子元素，而不是父元素
        console.log(target.innerText);
    }
}
</script>

事件捕获

    事件对象的产生, 最先知道的是html, 然后body, 然后往内到具体对象，这是事件被捕获的顺序
    事件先经过事件捕获阶段，然后再是事件冒泡阶段
    如果想要调整模式, 可以通过修改useCapture,默认是false
    element.addEventListener("click", function(){}, false);  中false改为true就是捕获模式

 

常用事件类型

    鼠标
        onclick    鼠标点击某个对象
        ondblclick    鼠标双击某个对象
        onmousedown    某个鼠标按键被按下
        onmouseup    某个鼠标按键被松开
        onmouseover    鼠标被移到某元素之上
        onmouseout    鼠标从某元素移开
        onmousemove    鼠标被移动
    键盘
        onkeydown    某个键盘的键被按下
        onkeyup    某个键盘的键被松开
        onkeypress    某个键盘的键被按下或按住
    加载
        onload    某个页面或图像被完成加载
        onunload    用户退出页面
    表单
        焦点
            onfocus    元素获得焦点
            onblur    元素失去焦点
        onchange    用户改变域的内容
        onreset    重置按钮被点击
        onsubmit    提交按钮被点击
    其他
        onresize    窗口或框架被调整尺寸
        onscroll 页面滚动

常用方法
    preventDefault()    阻止事件默认行为
    stopPropagation()    阻止事件传递