事件对象
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>