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

最新推荐文章于 2025-03-09 20:18:13 发布

原创

最新推荐文章于 2025-03-09 20:18:13 发布 · 538 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #ecmascript #vue.js #html5 #正则表达式

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>

&l