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的一些特性和用法整理小结
Jan 13 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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连接mssql数据库的几种方法
2013/02/21 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript函数详解
2014/11/17 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python将音频进行变速的操作方法
2020/04/08 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
岗位竞聘书范文
2014/03/31 职场文书
致共产党员倡议书
2014/04/16 职场文书
活动倡议书范文
2014/05/13 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
房屋租房协议书范本
2014/12/04 职场文书
单位租房协议书范本
2014/12/04 职场文书
神龙架导游词
2015/02/11 职场文书
2015年中个人总结范文
2015/03/10 职场文书
食品安全责任书范本
2015/05/09 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL