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


Posted in Javascript onDecember 16, 2019

本文实例讲述了js DOM的事件常见操作。分享给大家供大家参考,具体如下:

一、JavaScript的组成

JavaScript基础分为三个部分:

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

二、事件

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

事件的三要素

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

总结如下:

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

代码书写步骤如下:(重要)

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

举例:

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

常用事件:

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

1、获取事件源的方式(DOM节点的获取)

var div1 = document.getElementById("box1");   //方式一:通过id获取单个标签
var arr1 = document.getElementsByTagName("div1");   //方式二:通过 标签名 获得 标签数组,所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s

2、绑定事件的方式

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

<div id="box1" >123</div>
<script type="text/javascript">
  var div1 = document.getElementById("box1");
  //绑定事件的第一种方式
  div1.onclick = function () {
    alert("我是弹出的内容");
  }
</script>

方式二:先单独定义函数,再绑定

<div id="box1" ></div>
<script type="text/javascript">
  var div1 = document.getElementById("box1");
  //绑定事件的第二种方式
  div1.onclick = fn;  //注意,这里是fn,不是fn()。fn()指的是返回值。
  //单独定义函数
  function fn() {
    alert("我是弹出的内容");
  }
</script>

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

方式三:行内绑定

<!--行内绑定-->
//注意第一行代码,绑定时,是写的"fn()",不是写的"fn"。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
  function fn() {
    alert("我是弹出的内容");
  }
</script>

3、事件驱动程序

<style>
    #box {
      width: 100px;
      height: 100px;
      background-color: pink;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
  var oDiv = document.getElementById("box");
  //点击鼠标时,原本粉色的div变大了,背景变红了
  oDiv.onclick = function () {
    oDiv.style.width = "200px";  //属性值要写引号
    oDiv.style.height = "200px";
    oDiv.style.backgroundColor = "red";  //属性名是backgroundColor,不是background-Color
  }
</script>

上方代码的注意事项:

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

鼠标点击变化颜色:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .box{         /*class*/
        width:100px;
        height:100px;
        background-color:green;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">alex</div>
  </body>
  <script type="text/javascript">
    var oDiv = document.getElementById('box');
    var isGreen =true;
    oDiv.onclick=function(){
      console.log(oDiv.style);
    if (isGreen){
      oDiv.style.backgroundColor='red';
      isGreen=false; //通过改变isGreen的值来控制鼠标点击的效果
    }else{
      oDiv.style.backgroundColor='green';
      isGreen=true;
    }
    }
  </script>
</html>
/*一个鼠标点击就是一个事件*/

onload事件

当页面加载(文本和图片)完毕的时候,触发onload事件。

<script type="text/javascript">
  window.onload = function () {
    console.log("完毕"); //等页面加载完毕时,打印字符串
  }
</script>

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script>
    //window.onload页面加载完毕以后再执行此代码
    window.onload = function () {
      //需求:鼠标放到img上,更换为另一张图片,也就是修改路径(src的值)。
      //步骤:
      //1.获取事件源
      //2.绑定事件
      //3.书写事件驱动程序
      //1.获取事件源
      var img = document.getElementById("box");
      //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
      img.onmouseover = function () {
        //3.书写事件驱动程序(修改src)
        img.src = "2.jpg";
//        this.src = "image/jd2.png";
      };
    }
  </script>
</head>
<body>
  <img id="box" src="1.jpg" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>

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

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

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 #Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 #Javascript
javascript自定义右键菜单插件
Dec 16 #Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 #Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
You might like
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
降低PHP Redis内存占用
2017/03/23 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python实现求特征选择的信息增益
2018/12/18 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python实现GIF图倒放
2020/07/16 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
2014年挂职干部工作总结
2014/12/06 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
公司借条范本
2015/05/25 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
python 中的@运算符使用
2021/05/26 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python