事件的三種加載方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div01{
width: 300px;
height: 330px;
background-color: #01AAED;
}
</style>
</head>
<body>
<div id="div01" ></div>
<div id="div02" onclick="divClick(this);" ></div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
var div01 = document.getElementById('div01');
// 第一種寫(xiě)法
// div01.onclick = function () {
// alert(222);
// }
第二種寫(xiě)法
function divClick(obj) {
obj.style.background = 'yellow';
}
// 第三種寫(xiě)的
div01.addEventListener('click',function () {
this.style.background = 'yellow';
})
</script>
</body>
</html>
事件
| event | description |
|---|---|
| onclick | 鼠標(biāo)點(diǎn)擊 |
| ondblclick | 鼠標(biāo)雙擊 |
| oncontextmenu | 鼠標(biāo)右擊 |
| onmouseover | 鼠標(biāo)移入 |
| onmouseout | 鼠標(biāo)移出 |
| onmousemove | 鼠標(biāo)移動(dòng) |
| onmousedown | 鼠標(biāo)按下 |
| onmouseup | 鼠標(biāo)抬起 |
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div01{
width: 300px;
height: 300px;
background-color: #5bc0de;
}
</style>
</head>
<body>
<div class="div01">
我事件測(cè)試的div
</div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
var div = document.getElementsByClassName('div01');
console.log(div);
/*
div[0].onclick = function () {
console.log('我被點(diǎn)擊了.........');
}
div[0].ondblclick = function () {
console.log('我被雙擊了.........');
}
div[0].oncontextmenu = function () {
console.log('我被右擊了..........');
}
div[0].onmouseover = function () {
console.log('我是鼠標(biāo)移入........');
}
div[0].onmouseout = function () {
console.log('我是鼠標(biāo)移出..........');
}
div[0].onmousemove = function () {
console.log('我是鼠標(biāo)移動(dòng).......');
}
div[0].onmousedown = function () {
console.log('我被按下了.........')
}
div[0].onmouseup = function () {
console.log('我被抬起了...........')
}
*/
div[0].onmousemove = function (e) {
// js中會(huì)自動(dòng)將事件對(duì)象賦值給形參 e
console.log(e);
// e.vlientX : 鼠標(biāo)距離屏幕左上角的水平距離
// e.pageX : 鼠標(biāo)距離文檔左上角的值
console.log(e.clientX,e.clientY,e.pageX,e.pageY);
// offsetWith = border + padding + width
console.log(this.offsetWidth,this.offsetHeight);
// offsetTop : 參考對(duì)象是里他最近的參考對(duì)象如果沒(méi)有 默認(rèn)是 body
console.log(this.offsetTop,this.offsetLeft);
}
</script>
</body>
</html>
