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计算时间差的函数分享
Jul 04 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
微信jssdk用法汇总
Jul 16 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JS实现方形抽奖效果
Aug 27 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python元组知识点总结
2019/02/18 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
我的梦中国梦演讲稿
2014/04/23 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
汇报材料怎么写
2014/12/30 职场文书
社区活动总结
2015/02/04 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Golang 字符串的常见操作
2022/04/19 Golang