微客导航 » 文章资讯 » js DOM的事件常见操作实例详解

js DOM的事件常见操作实例详解

2023-08-04 11:45:11 202

本文实例讲述了jsDOM的事件常见操作。分享给大家供大家参考，具体如下：

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

事件的三要素

事件的三要素：事件源、事件、事件驱动程序

总结如下：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById("box");//类似与ios语言的UIButton*adBtn=[UIButtonbuttonWithType:UIButtonTypeCustom];
（2）绑定事件：事件源box.事件onclick=function(){事件驱动程序};
（3）书写事件驱动程序：关于DOM的操作

举例：

//1、获取事件源 vardiv=document.getElementById("box1"); //2、绑定事件 div.onclick=function(){ //3、书写事件驱动程序 alert("我是弹出的内容"); } //点击123将弹出要显示的内容

常用事件：

1、获取事件源的方式（DOM节点的获取）

vardiv1=document.getElementById("box1");//方式一：通过id获取单个标签
vararr1=document.getElementsByTagName("div1");//方式二：通过标签名获得标签数组，所以有s
vararr2=document.getElementsByClassName("hehe");//方式三：通过类名获得标签数组，所以有s

2、绑定事件的方式

方式一：直接绑定匿名函数

vardiv1=document.getElementById("box1"); //绑定事件的第一种方式 div1.onclick=function(){ alert("我是弹出的内容"); }

方式二：先单独定义函数，再绑定

vardiv1=document.getElementById("box1"); //绑定事件的第二种方式 div1.onclick=fn;//注意，这里是fn，不是fn()。fn()指的是返回值。 //单独定义函数 functionfn(){ alert("我是弹出的内容"); }

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

方式三：行内绑定


//注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

functionfn(){ alert("我是弹出的内容"); }

3、事件驱动程序

varoDiv=document.getElementById("box"); //点击鼠标时，原本粉色的div变大了，背景变红了 oDiv.onclick=function(){ oDiv.style.width="200px";//属性值要写引号 oDiv.style.height="200px"; oDiv.style.backgroundColor="red";//属性名是backgroundColor，不是background-Color }

上方代码的注意事项：

在js里写属性值时，要用引号
在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

鼠标点击变化颜色：







.box{/*class*/
width:100px;
height:100px;
background-color:green;
}



alex


varoDiv=document.getElementById('box');
varisGreen=true;
oDiv.onclick=function(){
console.log(oDiv.style);
if(isGreen){
oDiv.style.backgroundColor='red';
isGreen=false;//通过改变isGreen的值来控制鼠标点击的效果
}else{
oDiv.style.backgroundColor='green';
isGreen=true;
}
}


/*一个鼠标点击就是一个事件*/

onload事件

当页面加载（文本和图片）完毕的时候，触发onload事件。


window.onload=function(){
console.log("完毕");//等页面加载完毕时，打印字符串
}

效果：鼠标悬停发生事件，将鼠标放在图片1上面变成了图片2

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js DOM的事件常见操作实例详解

热门推荐

随机推荐