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 相关文章推荐
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
分类解析jQuery选择器
Nov 23 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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入门速成(2)
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python实现人工蜂群算法
2020/09/18 Python
python Tornado框架的使用示例
2020/10/19 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Django实现简单的分页功能
2021/02/22 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
vue+django实现下载文件的示例
2021/03/24 Vue.js
CNC数控操作工岗位职责
2013/11/19 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
apache ftpserver搭建ftp服务器
2022/05/20 Servers