DOM事件event/冒泡/委派/取消默认行为/dataset属性

1DOM获取CSS样式表里的样式:

<head>

<meta charset="UTF-8">

<title>Title</title>

<link rel="stylesheet" href="css/style.css">

<style>

body{

color: red;

}

h1::after{

content: 'hello';

color: red;

}

</style>

<script>

window.onload = function () {

// document.styleSheets 是一个类数组对象，会返回页面中所有的样式表

// var ss = document.styleSheets;

// console.log(ss[0].cssRules[0]);

var h1 = document.getElementById('h1');

// var cs = getComputedStyle(h1, "::after");

// alert(h1.currentStyle.color);

};

</script>

</head>

<body>

<h1 id="h1">我是一个一级标题</h1>

</body>

2DOM事件event:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

#areaDiv {

border: 1px solid black;

width: 300px;

height: 50px;

margin-bottom: 10px;

}

#showMsg {

border: 1px solid black;

width: 300px;

height: 20px;

}

</style>

<script type="text/javascript">

window.onload = function(){

/*

在areaDiv中移动时，在showMsg中显示鼠标的坐标

*/

// 获取id为areaDiv的元素

var areaDiv = document.getElementById('areaDiv');

var showMsg = document.getElementById('showMsg');

// 为areaDiv绑定一个鼠标移动的事件

/*

事件的响应函数会在事件触发时，由浏览器自动调用

当事件的响应函数调用时，浏览器会在响应函数中传递一个对象作为参数

这个对象就是事件对象，在事件对象中存储所有的当前事件的相关信息

事件对象中存储关于当前事件的所有细节，比如键盘哪个按键被按下、鼠标哪个按键被按下、鼠标指针的坐标...

注意：在IE8及以下的浏览器中，事件对象没有作为实参传递，无法通过以下的方式来获取事件对象--

在IE8中，事件对象会作为window对象的属性保存

*/

areaDiv.onmousemove = function (event) {

// 可以通过以下方式来处理event的兼容问题

// event = event || window.event;

/*

事件对象中的属性：

clientX 鼠标指针的x轴坐标

clientY 鼠标指针的y轴坐标

*/

// console.log(event.clientX, event.clientY);

// 获取鼠标的坐标

//在showMsg显示鼠标的坐标

showMsg.innerHTML = 'x = '+event.clientX+', y = '+event.clientY;

};

};

</script>

</head>

<body>

<div id="areaDiv"></div>

<div id="showMsg"></div>

</body>

</html>

3.1DOM鼠标事件:

3.2:鼠标坐标事件:

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，(算滚动条区域)但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

4 div元素跟随鼠标练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{

height: 3000px;

}

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

</style>

<script>

window.onload = function () {

// 获取box1

var box1 = document.getElementById('box1');

// 当鼠标移动时，改变div的偏移量

document.onmousemove = function (ev) {

//获取垂直滚动条滚动的距离

// console.log(document.documentElement.scrollTop);

// alert(ev);

// 获取鼠标指针的坐标

// clientX 和 clientY 获取的是鼠标指针相当于浏览器窗口的坐标

// pageX 和 pageY用来获取鼠标相当于相当于整个页面的坐标

var left = ev.clientX + document.documentElement.scrollLeft;

var top = ev.clientY + document.documentElement.scrollTop;

// 修改box1的水平和垂直的偏移量

// box1是一个绝对定位元素，默认是相对于初始包含块进行定位

box1.style.left = left + 'px';

box1.style.top = top + 'px';

};

};

</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>

5事件的冒泡Bubble:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>冒泡</title>

<style>

#box1{

width: 200px;

height: 200px;

background-color: #bfa;

}

#s1{

background-color: #ff0;

position: absolute;

width: 100px;

height: 100px;

left: 300px;

top:300px;

}

</style>

<script>

window.onload = function () {

/*

事件的冒泡（bubble）

- 冒泡指的是事件的向上传导

- 当一个后代元素上的事件被触发时，同时会导致其祖先元素上的相同事件一起触发

- 冒泡只和网页的结构有关和表现无关

- 冒泡的存在实际上简化了开发，所以大部分情况下冒泡都是有利的

- 但有一些情况，我们不希望冒泡存在，可以通过事件对象来取消冒泡

*/

// 为s1绑定单击响应函数

document.getElementById('s1').onclick = function (ev) {

alert('我是s1上的单击响应函数');

// 将事件对象的cancelBubble设置为true，即可取消事件的冒泡

// ev.cancelBubble = true;

ev.stopPropagation();

};

// 为box1绑定单击响应函数

document.getElementById('box1').onclick = function (ev) {

alert('我是box1上的单击响应函数');

ev.stopPropagation();

};

// 为body绑定单击响应函数

document.body.onclick = function () {

alert('我是body上的单击响应函数')

};

};

</script>

</head>

<body>

<div id="box1">

我是div

<span id="s1">

我是span

</span>

</div>

</body>

</html>

6DOM事件-冒泡练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{

height: 3000px;

}

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

#box2{

width: 500px;

height: 500px;

background-color: #bfa;

}

</style>

<script>

window.onload = function () {

// 获取box1

var box1 = document.getElementById('box1');

// 当鼠标移动时，改变div的偏移量

document.onmousemove = function (ev) {

//获取垂直滚动条滚动的距离

// console.log(document.documentElement.scrollTop);

// alert(ev);

// 获取鼠标指针的坐标

// clientX 和 clientY 获取的是鼠标指针相当于浏览器窗口的坐标

// pageX 和 pageY用来获取鼠标相当于相当于整个页面的坐标

var left = ev.clientX + document.documentElement.scrollLeft;

var top = ev.clientY + document.documentElement.scrollTop;

// 修改box1的水平和垂直的偏移量

// box1是一个绝对定位元素，默认是相对于初始包含块进行定位

box1.style.left = left + 'px';

box1.style.top = top + 'px';

};

// 取消box2上的鼠标移动事件的冒泡

document.getElementById('box2').onmousemove = function (ev) {

ev.stopPropagation();

}

};

</script>

</head>

<body>

<div id="box1"></div>

<div id="box2">

</div>

</body>

</html>

7DOM事件的委派:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

window.onload = function () {

/*

当需要为多个元素绑定相同事件时，往往会面临如下问题：

① 需要绑定多次事件（有可能创建多个功能相同的函数）

② 新添加的元素必须重新绑定事件

我希望只需要绑定一次事件，即可让所有的元素都拥有该事件包含现在的元素和未来新添加的元素

事件的委派

- 当需要为多个元素绑定事件时，可以统一将事件绑定到其共同的祖先元素上

这样只需要绑定一次事件既可以使所有的子元素都拥有该事件

*/

//为每一个超链接都绑定一个单级响应函数

var links = document.getElementsByTagName('a');

// 为ul绑定一个单击响应函数

var ul = document.querySelector('ul');

ul.onclick = function(ev){

// 判断事件的触发对象，如果是我们希望的对象则向下执行

// 如果不是我们希望的对象，则不执行

// 事件对象中的target属性，表示的是触发事件的对象

// 元素的nodeName属性可以返回标签名

if(ev.target.nodeName.toLowerCase() === 'a'){

alert('我是ul上的单击响应函数~~');

}

};

//点击按钮添加超链接

document.getElementById('btn').onclick = function () {

//创建li

var li = document.createElement('li');

li.innerHTML = '<a href="javascript:;">新添加的超链接</a>'

// 将li添加到ul中

document.querySelector('ul').appendChild(li);

};

};

</script>

</head>

<body>

<button id="btn">添加超链接</button>

<ul>

<li><a href="javascript:;">超链接一</a></li>

<li><a href="javascript:;">超链接二</a></li>

<li><a href="javascript:;">超链接三</a></li>

</ul>

</body>

</html>

8 currentTarget的指向和取消a超链接默认行为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

}

#box2{

width: 200px;

height: 200px;

background-color: #bfa;

}

#box3{

width: 300px;

height: 300px;

background-color: #ff0;

}

</style>

</head>

<body>

<div id="box3">

<div id="box2">

<div id="box1"></div>

</div>

</div>

<a href="https://www.baidu.com">鍘籅aidu</a>

<input id="inp" type="text">

<script>

//------取消超链接默认行为

document.querySelector('a').onclick = function(ev){

ev.preventDefault(); //------取消超链接默认行为,写前后都行

alert(123);

// return false; //------取消超链接默认行为,只能写最后

};

//

box3.onclick = function (event) {

alert(event.currentTarget.id);// currentTarget 指向当前绑定事件的函数==box3

};

// box2.onclick = function (event) {

// alert('box2');

// };

// inp.onkeydown = function (event) {

// alert(event)

// };

</script>

</body>

</html>

9 dataset属性(h5中的):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

window.onload = function () {

// 获取btn01

var btn01 = document.getElementById('btn01');

var box1 = document.getElementById('box1');

btn01.onclick = function () {

// 在元素当中，有一个dataset属性，在该属性中存储所有的data-xxx的属性值

alert(box1.dataset.yyy);

};

};

</script>

</head>

<body>

<button id="btn01">按钮</button>

<!--

在元素中可以自主添加形如 data-xxx="" 的属性

-->

<div id="box1" data-haha="123" data-xxx="456" data-yyy="你好" data-aaa-bbb="xixi"></div>

</body>

</html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！