18 JavaScript DOM事件
2022/8/6 1:52:46
本文主要是介绍18 JavaScript DOM事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JS是事件驱动为核心的一门语言
1 事件三要素
事件源、事件、事件驱动程序
- 事件源：引发后续事件的html标签。
- 事件：js已经定义好了（见下图）。
- 事件驱动程序：对样式和html的操作。也就是DOM
代码书写步骤如下：（重要）
- （1）获取事件源：
document.getElementById(“box”); - （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
- （3）书写事件驱动程序：关于DOM的操作
常用事件
2 事件绑定方式
直接绑定匿名函数
var oDiv = document.getElementById("box");
//绑定事件的第一种方式
oDiv.onclick = function () {
alert("我是弹出的内容");
};
先单独定义函数，再绑定
var oDiv = document.getElementById("box");
//绑定事件的第二种方式
oDiv.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
};
行内绑定
<!--行内绑定-->
<div id="box" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
3 onclick&ondblclick
光标点击事件
<div id="box"></div>
<script>
//首先取到节点对象
var oDiv = document.getElementById('box');
//设置事件
var isBlue = true;
function add(){
if (isBlue){
//this 只向当前的元素节点对象
this.style.backgroundColor = 'red';
isBlue = false;
}else {
this.style.backgroundColor = 'blue';
isBlue = true;
}
}
oDiv.onclick = add; //光标单击事件
oDiv.ondblclick = add; //光标双击事件
</script>
4 onm ouse
onmouseover & onm ouseout/onmouseleave 鼠标划过和移开事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//1.找到事件源
var oDiv = document.getElementById('box');
//2.事件（鼠标划过事件）
oDiv.onmouseover = function () {
//3.事件的驱动程序
this.style.backgroundColor = 'green';
}
//2.事件（鼠标移开事件）
oDiv.onmouseleave = function () {
//3.事件的驱动程序
this.style.backgroundColor = 'red';
}
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{width: 300px;}
.content .text{height: 50px;background-color: greenyellow}
.content .c1{height: 50px;background-color: orange}
.content .c2{height: 50px;background-color: rebeccapurple}
.content .c3{height: 50px;background-color: indianred}
.hide{display: none}
</style>
</head>
<body>
<div class="content">
<div class="text">标题</div>
<div class="list hide">
<div class="c1">111</div>
<div class="c2">222</div>
<div class="c3">333</div>
</div>
</div>
<script>
var text = document.querySelector('.text');
var list = document.querySelector('.list');
var content = document.querySelector('.content');
text.onmouseover = function () {
list.classList.remove('hide');
}
content.onmouseleave = function () {
list.classList.add('hide');
}
</script>
</body>
5 onfocus&onblur
光标的聚焦和离焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.text{
color: red;
}
</style>
</head>
<body>
<form>
<p class="name">
<label for="username">用户名：</label>
<input type="text" name="user" id="username">
</p>
<p class="pwd">
<label for="pwd">密码：</label>
<input type="password" name="wpd" id="pwd">
</p>
<input type="submit" name="">
</form>
<script>
var userName = document.getElementById('username');
var newNode = document.createElement('span');
//光标的聚焦
userName.onfocus = function () {
newNode.innerHTML = '请输入用户名'
newNode.setAttribute('class','text')
userName.parentNode.appendChild(newNode);
}
//光标的离焦
userName.onblur = function () {
newNode.innerHTML = '请输入正确的用户名'
newNode.setAttribute('class','text')
userName.parentNode.appendChild(newNode);
}
</script>
</body>
</html>
6 onselect&oninput
内容选中和内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea cols="30" rows="10">个人简介</textarea>
<input type="text" name="" value="lxx">
<script>
var textArea = document.getElementsByTagName('textarea')[0];
var inputObj = document.getElementsByTagName('input')[0];
textArea.onselect = function () {
console.log('内容被选中');
}
inputObj.onselect = function () {
console.log('内容被改变');
}
inputObj.oninput = function () {
console.log('内容被实时改变了');
console.log(this.value); //获取改变的值
}
</script>
</body>
</html>
7 onl oad
窗口加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
setTimeout(function () {
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function () {
this.innerHTML = 'alex';
}
},0)
*/
//等待文档元素加载完后才会调用onload()
window.onload = function () {
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function () {
this.innerHTML = 'alex';
}
}
</script>
</head>
<body>
<div id="box">lxx</div>
</body>
</html>
8 获取标签文本信息
行内式静态
<div ondblclick="foo(this)">lxx</div>
<div id="box">wxx</div>
<script>
/*
//获取DOM标签对象的文本
function foo() {
var oD = document.getElementById('box');
console.log(oD.innerHTML);
}
*/
//获取自己的标签的文本信息
function foo(self) {
console.log(self.innerHTML);
}
</script>
动态（绑定自己时，要用this）
<div id="box">wxx</div>
<ul class="title">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var ele = document.getElementById('box');
ele.onclick = function () {
console.log(this.innerHTML);
}
var uL = document.querySelectorAll('.title li');
for (var i=0; i<uL.length; i++){
uL[i].onclick = function () {
//事件被点击后触发执行
console.log(this.innerHTML);
}
}
</script>
9 onsubmit
提交事件
<body>
<form action="" id="i1">
<input type="text" name="user" class="c1">
<input type="submit">
</form>
<script>
var ele = document.querySelector('#i1');
var user = document.querySelector('.c1');
ele.onsubmit = function (e) {
if (user.value.length<=5){
alert('用户名长度要大于等于5');
user.value = '';
//阻止默认提交事件：方式一
return false;
//阻止默认提交事件：方式二
e.preventDefault();
}
}
</script>
</body>
10 onchange
当文本内容或选中的内容发生变化时，触发事件
<body>
<select name="" id="provice">
<option value="">请选择省份</option>
<option value="hubei">湖北省</option>
<option value="hebei">河北省</option>
<option value="guangdong">广东省</option>
</select>
<select name="" id="city">
<option value="">请选择城市</option>
</select>
<script>
var data = {'hubei':['襄阳','武汉','荆州'],
'hebei':['保定','石家庄','廊坊'],
'guangdong':['广州','深圳','东莞']};
var provice = document.querySelector('#provice');
var city = document.querySelector('#city');
//当文本内容或选中的内容发生变化时，触发事件
provice.onchange = function () {
var cit = data[this.value];
//清空方法
city.options.length = 1;
for (var index in cit){
console.log(cit[index]);
//创建标签
var oP = document.createElement('option');
oP.innerHTML = cit[index];
city.appendChild(oP);
}
}
</script>
</body>
11 onkeys
输入键事件
<input type="text" class="c1">
<script>
var ele = document.getElementsByClassName('c1')[0];
//检测键盘摁下事件
ele.onkeydown = function () {
console.log('ok');
}
//检测键盘摁下后松开事件
ele.onkeyup = function (e) {
console.log(e.keyCode); //输出key的数字
console.log(e.key); //输出key的相应字符
if (e.keyCode === 13){
console.log('enter');
}
}
</script>
12 冒泡事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 300px;
height: 300px;
background-color: #83c44e;
}
.c2{
width: 150px;
height: 150px;
background-color: indianred;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<script>
var ele1 = document.querySelector('.c1');
ele1.onclick = function () {
alert('c1区');
}
var ele2 = document.querySelector('.c2');
ele2.onclick = function (e) {
alert('c2区');
//阻止事件冒泡（只执行自己的代码，不在延续其它事件）
e.stopPropagation();
}
</script>
</body>
这篇关于18 JavaScript DOM事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-23线下车企门店如何实现线上线下融合？
- 2024-12-23鸿蒙Next ArkTS编程规范总结
- 2024-12-23物流团队冬至高效运转，哪款办公软件可助力风险评估？
- 2024-12-23优化库存，提升效率：医药企业如何借助看板软件实现仓库智能化
- 2024-12-23项目管理零负担！轻量化看板工具如何助力团队协作
- 2024-12-23电商活动复盘，为何是团队成长的核心环节？
- 2024-12-23鸿蒙Next ArkTS高性能编程实战
- 2024-12-23数据驱动：电商复盘从基础到进阶！
- 2024-12-23从数据到客户：跨境电商如何通过销售跟踪工具提升营销精准度？
- 2024-12-23汽车4S店运营效率提升的核心工具
