1. 鼠标事件
元素名.onclick = function (){
事件
}
onclick 鼠标点击某元素
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按钮抬起的时候触发
onmousemove 在元素上移动鼠标时会触发事件
ondblclick 双击元素触发事件
🍎oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
// 阻止鼠标右击默认事件，并弹出个性化菜单
<style>
.site {
position: absolute;
background-color: black;
color: white;
width: 200px;
display: none;
}
</style>
</head>
<body>
<div class="site">
<p>菜单A</p>
<p>菜单B</p>
<p>菜单C</p>
</div>
<script>
document.oncontextmenu = function (e) {
e.preventDefault();
// 阻止鼠标右击默认事件
let div = document.querySelector("div");
div.style.display = 'block';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
</script>
</body>
🍎clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
// 创建一个div，让它可以在页面中随意拖动
<body>
<div style="width: 150px;height: 150px;background-color: violet;position: absolute;"></div>
<script>
// 视口宽度：
// document.documentElement.clientWidth
// 视口高度:
// document.documentElement.clientheight
let div1 = document.getElementById('div1');
div1.onmousedown = function (e) {
let areaX = e.clientX - div1.offsetLeft;
let areaY = e.clientY - div1.offsetTop;
var maxW = document.documentElement.clientWidth - div1.offsetWidth;
var maxH = document.documentElement.clientHeight - div1.offsetHeight;
document.onmousemove = function (e) {
div1.style.left = e.clientX - areaX + 'px';
div1.style.top = e.clientY - areaY + 'px';
if (parseInt(div1.style.left) < 0) { div1.style.left = 0 };
if (parseInt(div1.style.top) < 0) { div1.style.top = 0 };
if (parseInt(div1.style.left) > maxW) { div1.style.left = maxW + 'px' };
if (parseInt(div1.style.top) > maxH) { div1.style.top = maxH + 'px' };
}
}
div1.onmouseup = function () {
document.onmousemove = null
}
</script>
</body>
2. 滚动条
document.documentElement.scrollTop 获取滚动条距离顶部的高度。
滚动条滚动事件：
document.onscroll = function (){
事件
}
3. 表单事件
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 用户改变域的内容
onreset 表单重置时触法（只支持 form 标签）
onsubmit 表单提交时触法（只支持 form 标签）
<body>
<form action="" method="get" id='fromId'>
<p>
用户名：<input type="text" name="" id="textId" value="请输入">
</p>
<p>
密码：<input type="password" name="" id="">
</p>
<p>
性别：
<select id='sex'>
<option value="male" selected>男</option>
<option value="female">女</option>
</select>
</p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
let text = document.getElementById('textId');
text.onfocus = function () {
text.style.color = 'red'
}
text.onblur = function () {
text.style.color = 'black'
}
let formId = document.getElementById('fromId');
formId.onsubmit = function () {
alert('我提交了')
}
formId.onreset = function () {
alert('我重置了')
}
let sex = document.getElementById("sex")
sex.onchange = function () {
alert(sex.value);
}
</script>
</body>
4. 监听事件
onclick事件
会被覆盖，只保留最后一个。
<body>
<button>点我</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function () {
alert(1)
}
btn.onclick = function () {
alert(2)
}
btn.onclick = function () {
alert(3)
}
/* 弹出：3 */
</script>
</body>
onclick监听事件
不会被覆盖。
<body>
<button>点我</button>
<script>
window.addEventListener('click',function(){
alert(1)
})
window.addEventListener('click',function(){
alert(2)
})
window.addEventListener('click',function(){
alert(3)
})
/* 按顺序弹出：1 2 3 */
</script>
</body>
⭐冒泡与捕获
❤️事件冒泡：点击子元素，把父元素的事件也调用了。
阻止事件冒泡：子级加上
（1）stopPropagation()或
（2）cancelBubble = true
<body>
<div class="div1">
<div class="div2"></div>
</div>
<script>
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
div1.onclick = function(){
alert(1)
}
div2.onclick = function(e){
/* 兼容写法，让谷歌和ie都支持。
（event是一个js的关键字，这个关键字变量保存了事件源对象的属性）*/
let eObj = e || event;
// eObj.stopPropagation()
eObj.cancelBubble = true;
alert(2)
}
</script>
</body>
❤️addEventListener('click', function () { }, true/false)
true 表示捕获 （从外到里触发事件）
点击div2按顺序弹出 1 2
false 表示冒泡（从里到外触发事件）
点击div2按顺序弹出 2 1
<script>
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
div1.addEventListener('click', function () {
alert(1)
}, true)
div2.addEventListener('click', function () {
alert(2)
}, true)
</script>
5. 键盘事件
onkeydown 按键被按下
onkeypress 按键被按下并松开
onkeyup 按键被松开
keyCode 返回键盘事件触发的键的值的字符代码
<!-- 控制台显示按下的按键的值的字符代码 -->
<script>
document.onkeydown = function (e) {
let eobj = e || event;
console.log(eobj.keyCode);
}
</script>
<body>
<!-- 按下enter键alert输入框的内容 -->
用户名：<input type="text">
<script>
let t = document.querySelector('input')
t.onkeydown = function (e) {
let eobj = e || event;
console.log(eobj);
if (eobj.keyCode == 13) {
// alert(t.value);
alert(eobj.target.value)
}
}
</script>
</body>
6. UI事件
(1) onload 当页面载入完毕后执行Javascript代码
window.onload = function(){ }
(2) onresize 窗口或框架被重新调整大小后执行
window.onresize = function(){ }
// 在head里面写Javascript代码
// 页面加载完毕后点击div，alert出div里面的文字
// 如果页面尺寸改变了，就给div加上红色的背景
<head>
<script>
window.onload = function () {
let div1 = document.querySelector('div')
div1.onclick = function () {
alert(div1.innerText)
}
}
window.onresize = function () {
let div1 = document.querySelector('div')
div1.style.background = 'red'
}
</script>
</head>
<body>
<div>
I am div.
</div>
</body>
7. 阻止默认事件
（1） return false 会阻止下面代码的执行，方法已经结束
（2） e.preventDefault() 不会阻止下面代码执行
//阻止链接跳转
<a href="http://www.baidu.com">百度一下</a>
<script>
let a = document.querySelector('a');
a.onclick = function (e) {
// return false;
e.preventDefault();
}
</script>
