事件绑定、解绑、DOM事件流、事件对象等事件高级介绍

其他 2020-04-03 22:25:03 阅读次数: 0

事件高级

1. 注册事件(绑定事件)

1.1 注册事件概述

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

注册事件有两种方式：传统方式和方法监听方式

1. 传统注册方式

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

2. 方法监听注册方式

  • W3C标准 推荐方式
  • addEventListener() 它是一个方法
  • IE9之前的IE不支持，可使用attachEvent()代替
  • 同一个元素，同一个事件可以添加多个监听器(监听处理函数)

1.2 addEventListener 事件监听方式

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

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

该方法接受三个参数

  • type：事件类型 字符串，比如click、mouseover, 注意这里不带on
  • listener：事件处理函数，事件发生时，会调用该监听函数
  • useCapture：可选参数，是一个布尔值，默认是false。
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
     var btns = document.querySelectorAll('button');
        //1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
            alert('hello'); // 这个事件会覆盖前面那个事件
        }
        // 2. 事件监听注册事件 
        //(1) addEventListener里面的事件类型是字符串要加引号，不加on
        //(2) 同一个元素 同一个事件可以添加多个监听器(事件处理函数)
        btns[1].addEventListener('click',function() {
            alert(22);
        })
        btns[1].addEventListener('click',function() {
            alert(33); // 点击按钮后会先弹出22，再弹出33
        })
</script>

1.3 attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

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

该方法接受两个参数：

  • eventNameWithOn：事件类型字符串，如onclick、onmouseover, 注意这里要带on
  • callback：事件处理函数，当目标触发事件时回调函数被调用

注意：只有ie

1.4 注册事件兼容性解决方案(了解)

function addEventListener(element, eventName, fn) {
    //判断当前浏览器是否支持addEventLisener方法
    if(element.addEventListener) {
        element.addEventListener(eventName, fn);//第三个参数默认是false
    }else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        //相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
}

2. 删除事件(解绑事件)

2.1 删除事件的方式

1. 传统注册方式

eventTarget.onclick = null;

2. 方法监听注册方式

(1) eventTarget.removeEventListener(type,listener,useCapture)

(2) eventTarget.detachEvent(eventNameWithOn, callback)

btn1.addEventListener('click', fn)//里面的fn不需要加小括号
//如果想要移除函数，则不能使用匿名函数，需单独注册
function fn() {
    alert(22);
    btn1.removeEventListener('click',fn);
}
btn2.attachEvent('onclick',fn1);
function fn1() {
    alert(33);
    btn2.detachEvent('onclick',fn1);
}

3. DOM事件流

事件流描述的是从页面中接受时间的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫做DOM事件流
在这里插入图片描述

DOM事件流分为3个阶段：

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段
  • 事件冒泡：IE最早提出，事件开始由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
  • 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到具体的元素接收的过程。

帮助理解:

向水里扔石头，下沉过程是事件捕获阶段，到达目标点之后会产生泡泡，泡泡浮到水面的过程，相当于冒泡阶段

注意：

  1. JS代码中只能执行捕获或者冒泡其中一个阶段
  2. onclick和attachEvent 只能得到冒泡阶段。
  3. addEventListener(type, listener,[useCapture]),第三个参数如果是true，表示事件捕获阶段调用事件处理程序；如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
  4. 实际开发中很少使用事件捕获，更关注事件冒泡
  5. 有些事件是没有冒泡的，比如onclur 、onfocus、onmouseenter、onmouseleave

4.事件对象

4.1 什么是事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {})
// 1.event 就是一个事件对象 当形参来看
// 2. 事件对象只有有了事件才会存在，是系统自动创建的，不需要自己传递参数
// 3. 事件对象是事件相关数据的集合，比如鼠标点击事件，里面就包含了鼠标坐标等信息；键盘事件，可以判断用户按下了哪个键。

官方解释：event对象代表事件的状态，比如按键的状态、鼠标的位置、鼠标按钮的状态等

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法。

4.2 事件对象的使用语法

eventTarget.onclick = function(event) {
   // 这个事件对象可以自己命名，比如  evt e
}
eventTarget.addEventListener('click', function() {
    
})

这个event是个形参，系统设定为事件对象，不需要传递实参过去

注册时间时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)

4.3 事件对象的兼容性方案

  1. 事件对象本身的获取存在兼容性问题：
  2. 在IE6~8 z中，浏览器不会给方法传递参数，如果需要的话，通过window.event获取查找

解决：

e = e || window.event ;

eventTarget.onclick = function(event) {
    //console.log(event);//一般浏览器可以获取，ie678会显示undefined
    //ie678 获取事件对象通过 window.event
   // console.log(window.event);
    //兼容性做法
    e = e || window.event ;
    console.log(e);
}

4.4 事件对象常用属性和方法

在这里插入图片描述

// 1. e.target获得触发事件的元素

div.addEventListener('click', function(e) {
    // e.target 返回触发事件的对象(元素) this返回绑定事件的对象
    console.log(e.target);//div 
    console.log(this); // div
})

ul.addEventListener('click', function(e) {
    //点击ul里面的li
    console.log(this) // ul
    console.log(e.target); // li 因为事件冒泡 所以点击li会触发它上层的ul
})
// 解决兼容性问题 因为IE6~8是用srcElement获取触发事件的元素
div.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(e.target); 
}

// 2. 返回事件类型
div.addEventListener('click', fn);
div.addEventListerer('mouseover' fn);
function fn(e) {
    console.log(e.type);
}

// 3. 阻止默认行为(事件) 让链接不跳转 提交按钮不提交
// e.preventDefault() 方法(标准)
a.addEventListener('click', function(e) {
    e.preventDefault();//dom标准写法
})
//低版本浏览器( ie6~8)  e.returnValue 属性(非标准) 
a.onclick = function(e) {
    e.returnValue;
}

5. 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

事件冒泡本身的特性，会带来坏处，也会带来好处，需要灵活掌握。

阻止事件冒泡

  • 标准写法：利用事件对象里面的stopPropagation() 方法

    son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation();// 阻止冒泡
})

  • 非标准写法：IE6~8 利用事件对象cancleBubble属性阻止冒泡

6. 事件委托

事件冒泡带来的好处：

案例：点击li 弹出对话框，以前需要给每个li注册事件，访问DOM的次数就会增多，会延长整个页面的交互就绪时间。

  • 事件委托

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

  • 事件委托的原理

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

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的 li ,因为点击 li, 事件会冒泡到 ul 上，ul 注册事件，就会触发事件监听器

  • 事件委托的作用

我们只操作了一次DOM,提高了程序的性能。

7.常用的鼠标事件

7.1 常用的鼠标事件

  • onclick：鼠标点击左键触发
  • onmouseover：鼠标经过触发
  • onmouseout：鼠标离开触发
  • onfocus：获得鼠标焦点触发
  • onblur：失去鼠标焦点触发
  • onmousemove：鼠标移动触发
  • onmouseup：鼠标弹起触发
  • onmousedown：鼠标按下触发
  1. 禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();//阻止默认行为
})
  1. 禁止选中文字
document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 禁用右键
        document.addEventListener('contextmenu', 		 function(e) {
    		e.preventDefault();//阻止默认行为， 此时右键不可用，无法使用右键的复制选项，但是可以使用Ctrl+C
		})
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', 		 function(e) {
    		e.preventDefault();//没办法选中文字 自然就复制不了了
})
        
    </script>
</body>

7.2 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。本文章主要使用鼠标事件对象 MouseEvent和键盘事件对象KeyboardEvent。
在这里插入图片描述

8.常用的键盘事件

8.1常用键盘事件

  • onkeyup：某个键盘按键被松开时触发
  • onkeydown：某个键盘按键被按下时触发
  • onkeypress：某个键盘按键被按下时触发（不识别功能键 ctrl shift等）
document.addEventListener('keyup', function() {
    console.log('我被松开了！');
})

注意：

  1. 如果使用addEventListener不需要加on
  2. onkeypress和前面两个的区别是，不识别功能键。
  3. 三个事件的执行顺序是：keydown–keypress–keyup

8.2 键盘事件对象

keyCode：返回该键的ASCII值

// 键盘事件对象中keyCode属性可以得到相应键的ASCII值
// 1. keyup 和 keydown 事件不区分字母大小写  a A得到的都是65
// 2.  keypress 事件区分字母大小写  a 得到97， A 得到的都是65
document.addEventListener('keyup', function(e) {
    console.log(e.keyCode);// 按下A 打印65
})
coder-lxy
发布了33 篇原创文章 · 获赞 0 · 访问量 367
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_46178261/article/details/105301887
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022