事件

事件

注册事件

  • 给元素添加事件，称为注册事件或者绑定事件

  • 注册事件有两种方式:

    • 传统方式
    • 方法监听注册方式

  • 传统注册方式

    • 利用on开头的事件 onclick
    • <button onclick= "alert('hi')"></button>
    • btn.onclick = function() {}
    • 特点：注册事件的唯一性
    • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

  • 方法监听注册方式

    • W3C 标准 推荐方式
    • addEventListener()它是一个方法
    • IE9之前的IE不支持此方法，可使用attachEvuent()代替
    • 特点：同一个元素同一个时间可以注册多个监听器
    • 按注册顺序依此执行

  • addEventListener事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

  • eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数

  • 同一个元素，同一个事件可以添加多个侦听器(事件处理程序)

  • 该方法接受三个参数:

    • type: 事件类型字符串，比如clcik、 mouseover，注意这里不要带on
    • listener: 事件处理函数，事件发生时，会调用该监听函数
    • useCapture: 可选参数，是一个布尔值，默认是false

  • 代码演示

<button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        const btns = document.querySelectorAll('button');
        //1. 传统注册事件
        btns[0].onclick = function() {
            console.log("传统注册事件");
        }
        btns[0].onclick = function() {
            console.log("传统注册事件2");
        }
        //2. 方法监听注册事件
        btns[1].addEventListener('click', function() {
            console.log('方法监听注册事件');
        })
        btns[1].addEventListener('click', function() {
            console.log('方法监听注册事件2');
        })
    </script>

  • attachEvent事件监听方式

  • eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行

  • 该方法接受两个参数

    • enentNameWithOn:事件类型字符串，比如clcik、 mouseover，这里要带on
    • callback:事件处理函数，当目标触发事件时回调函数被调用

  • 注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
            //判断当前游览器是否支持 addEventListener 方法
            if (element.addEventListener1) {
                element.addEventListener(eventName, fn);//第三个参数默认为false
            }else if(element.attchEvent) {
                element.attachEvent('on' + eventName, fn);
            }else {
                // 相当于 element.oclick = fn;
                element['on' + eventName] = fn;
            }
        }
  • 兼容性处理的原则，首先照顾大多游览器，再处理特殊游览器

删除事件(解绑事件)

  • 解绑事件的方式

  • 传统注册方式

    • evenTarget.onclick = null;

  • 方法监听注册方式

    • evenTarget.removeEventListener(type, listener[, useCapture])
    • evenTarget.detachEvent(enentNameWithOn, callback);

  • 代码演示

const btns = document.querySelectorAll('button');
//1. evenTarget.onclick = null; 删除事件
btns[0].onclick = function() {
    console.log("传统注册事件");
    btns[0].onclick = null
}

//2. evenTarget.removeEventListener() 删除事件
btns[1].addEventListener('click', fn)//里面的fn不需要调用小括号
function fn() {
    console.log('方法监听注册事件');
    btns[1].removeEventListener('click', fn)
}

DOM 事件流

  • 事件流描述的时从页面中接受事件的顺序

  • 事件发生时会在元素节点之间按照特点的顺序传播，这个传播过程即DOM事件流

  • 比如我们给一个div注册了点击事件:

  • DOM 事件流分为3个阶段

    1. 捕获阶段
    2. 当前目标阶段
    3. 冒泡阶段

  • 事件冒泡: IE 最早提出，事件开始由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程

  • 事件捕获: 网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受的过程

  • 注意

    • JS代码中只能执行捕获或者冒泡其中一个阶段
    • onclick和attachEvent 只能得到冒泡阶段
    • addEventListener(type, listener[, useCapture])
      • 第三个参数如果是true,表示再事件捕获阶段调用事件处理程序
      • 第三个参数如果是false(不写默认为false),表示在事件冒泡阶段调用事件处理程序
    • 实际开发我们很少使用时间捕获，我们更关注于冒泡
    • 有些事件时没有冒泡的，比如
      • onblur
      • onfocus
      • onmouseenter
      • onmouseleave

  • 代码演示

  • 捕获阶段

<div class="body">body盒子
    <div class="html">html盒子
        <div class="div">div盒子</div>
    </div>
</div>
<script>
    const div = document.querySelector('.div')
    div.addEventListener('click', function() {
        console.log("div");
    },true)
    const body = document.querySelector('.body')
    body.addEventListener('click', function() {
        console.log("body");
    },true)
    const html = document.querySelector('.html')
    html.addEventListener('click', function() {
        console.log("html");
    },true)
    document.addEventListener('click', function() {
        console.log("document");
    },true)
</script>

  • 接下来我们点击div盒子

  • 发现打印顺序是从上往下渗透

    • document -> html -> body -> div

  • 然后我们将true改为false或者删除(默认false)

  • 这里代码不做演示

  • 然后我们点击div盒子

  • 发现打印顺序是从下往上冒泡

    • div -> body -> html -> document

事件对象

div.onclick = function(event) {}
eventTarget.onclick = function('click', function(event) {})
  • event就是一个事件对象，写到我们侦听器函数的小括号里面当形参来看
  • 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
  • 事件对象时我们事件的一系列相关数据的集合，更事件相关的
    • 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等
    • 比如键盘事件里面就包含了键盘事件的信息，判断用户按下了哪个键等
  • 这个事件对象可以自己命名，常见 event 、evt 、 e
  • 事件对象也有兼容性问题 IE678 通过 window.event
    • 兼容性写法 e = e || window.event
  • 官方解释：event对象代表事件的状态，比如键盘的状态，鼠标的位置，鼠标按钮的状态
  • 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是事件对象event，它有很对属性和方法

事件对象常见的属性和方法

  • 所有的属性和方法都写在函数里面

返回触发事件的对象

  • e.target 返回触发事件的对象
  • e.target 返回触发事件的对象IE678
  • 和this的区别
    • e.target及e.target点击了那个元素，就返回那个元素
    • this那个元素绑定了这个点击事件，就返回谁

返回事件的类型

  • e.type返回事件的类型，比如click、mouseover 不带on

止默认(行为)事件

  • e.preventDefault 该方法阻止默认(行为)事件
  • e.returnValue 该属性阻止默认(行为)事件IE678
  • return false 也能阻止默认(行为)事件，也没有兼容性问题，但是要注意return后面的代码不执行了

阻止冒泡

  • e.stopPropagation()该方法阻止事件冒泡
  • cancelBubble = true该属性阻止事件冒泡IE678
  • 阻止冒泡的兼容性解决方案
if(e && e.stopPropagation) {
    e.stopPropagation();
}else {
    window.event.cancelBubble = true;
}

事件委托

  • 事件委托也称之为事件代理，在jQuery里面称为事件委派

事件委托的原理

  • 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托的作用

  • 我们只操作了一次DOM，提高了程序的性能
<ul>
    <li>老大</li>
    <li>老二</li>
    <li>老三</li>
    <li>老四</li>
    <li>老五</li>
</ul>
<script>
    const ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        //e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'green'
    })
</script>

常见的鼠标事件

  • onclick 当鼠标点击左键触发
  • ondblclick 当鼠标双击左键触发
  • ondrag 当拖动元素时触发
  • ondragend 当拖动操作结束时触发
  • ondragenter 当元素被拖动至有效的拖放目标时触发
  • ondragleave 当元素离开有效拖放目标时触发
  • ondragover 当元素被拖动至有效拖放目标上方时触发
  • ondragstart 当拖动操作开始时触发
  • ondrop 当被拖动元素正在被拖放时触发
  • onmousedown 当按下鼠标按钮时触发
  • onmousemove 当鼠标指针移动时触发
  • onmouseout 当鼠标指针移出元素时触发
  • onmouseover 当鼠标指针移至元素之上时触发
  • onmouseup 当松开鼠标按钮时触发
  • onmousewheel 当转动鼠标滚轮时触发
  • onscroll 当滚动元素的滚动条时触发

禁止鼠标右键菜单

  • contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        })

禁止鼠标选中文字

  • selectstart
document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })

鼠标事件对象(MouseEvent)Y

  • e.clientX返回鼠标相对于游览器窗口(可视区)的X坐标
  • e.clientY返回鼠标相对于游览器窗口(可视区)的Y坐标
  • e.pageX返回鼠标相对于文档页面的X坐标IE9+支持
  • e.pageY返回鼠标相对于文档页面的X坐标IE9+支持
  • e.screenX返回鼠标相对于电脑屏幕的X坐标Y
  • e.screenY返回鼠标相对于电脑屏幕的Y坐标

常用的键盘事件

  • onkeyup某个键盘按键被松开时触发
  • onkeydown某个键盘按键被按下时触发
  • onkeypress某个键盘按键被按下时触发但是它不能识别功能键，比如ctrl shift箭头等
  • 注意
    • 如果使用addEventListener不需要加on
    • 三个事件的执行顺序keydown -- keypress -- keyup

键盘事件对象

  • keyCode返回该键的ASCll值、

  • 注意

    • onkeydown和onkeyup不区分大小写，keypress区分大小写
    • 在我们实际开发中，我们更多的使用onkeydown和onkeyup，它们能识别所有的键(包括功能键)
    • keypress不能识别功能键，但是keyCode属性能区分大小写，返回不同的ASCll值
posted @ 2020-03-16 21:20  懒惰ing  阅读(146)  评论(0)  编辑  收藏  举报