事件对象以及事件委托(pink老师笔记）

事件对象

element.onclick = function(e){console.log(e);
}
// event就是一个事件对象,写到我们侦听函数的小括号里面,可以当形参来看
// 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
//  事件对象是我们事件的一系列相关数据的集合跟时间相关的,比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊等等。
// 事件对象我们也可以自己命名,比如event,e

target与this

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>abc</li><li>abc</li><li>abc</li></ul>
</body>
<script>var ul = document.querySelector('ul');// e.target返回的是触发时间的对象(元素),this则返回的是绑定事件的对象// e.target点击了哪个元素，就返回哪个元素ul.addEventListener('click',function(e){console.log(e.target);//点击谁返回谁console.log(this);//ul})
</script>
</html>

阻止默认行为

element.addEventListener('click',function(e){e.preventDefault();// 比如阻止a元素的默认跳转事件
})

阻止冒泡

element.addEventListener('click',function(e){e.stopPropagation();e.cancelBubble = true;
})

事件委托

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

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

案例

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
<script>var ul = document.querySelector('ul');ul.addEventListener('click',function(e){for(var i = 0;i < ul.children.length;i++){ul.children[i].style.backgroundColor = '';}e.target.style.backgroundColor = 'pink';})
</script>
</html>

事件对象以及事件委托(pink老师笔记）相关推荐

web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
事件对象，事件流（事件冒泡和事件捕获）、事件委托、L0和L2注册等相关概念及用法
事件对象 1. 事件对象是什么? 这个对象包含事件触发时的相关信息.如:鼠标点击事件中,事件对象就存了鼠标点击时的位置信息等. 2. 事件对象在哪里? 在事件绑定的回调函数的第一个参数就是事件对象,一 ...
第三天：js中的事件提高篇（事件流，事件对象，事件委托深层次理解）
目录前言一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...
echarts基本使用参考pink老师笔记
echarts 可视化面板介绍 Echarts介绍 Echarts使用步骤 Echarts-基础配置 color:调色盘颜色列表 title:标题组件 tooltip:提示框组件触发类型 legen ...
JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
javascript --- 事件对象和事件类型
// 无论程序使用"DOM0级"规范还是"DOM2级"规范,都会在局部产生一个event对象, // 将其打印出来研究: <div id="di ...
2020.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...

事件对象以及事件委托(pink老师笔记）

事件对象

target与this

阻止默认行为

阻止冒泡

事件委托

案例

事件对象以及事件委托(pink老师笔记）相关推荐

最新文章

热门文章