格式
元素名.事件名称=function(){
时间所执行的操作
}
其中function()里有一个参数e,打印e会看到事件里的各种属性
鼠标常用事件
名称 | 含义 |
---|---|
onclick | 单击鼠标 |
ondblclick | 双击鼠标 |
oncontextmenu | 右击鼠标 |
onmousedown | 鼠标按下 |
onmouseup | 鼠标抬起 |
onmouseenter | 鼠标移入 |
onmouseleave | 鼠标移出 |
onmousemove | 鼠标移动 |
onmouseover | 鼠标进入 |
onmouseout | 鼠标离开 |
onfocus | 获得鼠标焦点 |
onblur | 失去鼠标焦点 |
键盘事件
键盘事件中常用的是键盘按下事件onkeydown主要用在搜索框或者登陆框时,不用鼠标点击按钮,直接按回车就能直接搜索或者登陆。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" class="keyword">
<button class="search">搜索</button>
<script>
// onkeydown键盘按下事件
let keyword = document.querySelector('.keyword')
let search = document.querySelector('.search')
let fn = function () {
console.log('搜索商品');
}
search.onclick = fn
keyword.onkeydown = function (e) {
if (e.keyCode === 13) {
fn()
}
}
</script>
</body>
</html>
这个页面中,在搜索框输入内容以后,可以点击旁边的搜索按钮,或者输入完内容后直接按回车,都可以触发打印“搜索商品”
innerHTML和innerText的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="div1"></div>
<div id="div2"></div>
<body>
<script>
div1.innerHTML = '<span>我是div标签</span>'
div2.innerText = '<span>我是div标签</span>'
</script>
</body>
</html>
执行结果为
区别在于innerHTML会读取标签,连同标签一起打印到页面上
而innerText只会读取纯文本,识别不出HTML标签,所以它将标签转成文本打印出来了,常用innerHTML。
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo {
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="demo">
<div class="child"></div>
</div>
<script>
// 移动到内部元素时不会重复触发
let demo = document.querySelector('.demo')
let child = document.querySelector('.child')
child.onclick = function () {
demo.remove()
}
demo.onclick = function () {
location.href = 'https://jd.com'
}
</script>
</body>
</html>
这里有一个页面,上面有两个div分别设置不同的样式 ,点击红色区域时跳转到京东页面,点击黄色区域时,出现先关闭红色区域然后跳转到京东的操作。
正常的操作中我们可以把这个看成一个广告的弹出框,我想要点击红色区域跳转到京东,点击黄色区域只关闭红色区域,其他不做任何操作,此时就有阻止事件冒泡的操作。用 e.stopPropagation(); //阻止事件冒泡
在代码中添加e.stopPropagation()就可以解决这个问题,我们称之为
“阻止事件冒泡”
child.onclick = function (e) {
e.stopPropagation(); //阻止事件冒泡
demo.remove()
}