首页 > 其他分享> 文章详细

DOM——事件介绍与简单应用

2021-06-10 22:02:55 阅读：377 来源： 互联网

标签：DOM value 点击事件应用按钮 dv my

文章目录

事件
- 事件三要素
- 事件的基本使用
案例
其他案例

事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例

1.点击按钮修改多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn">

<div>
    <p>我是一个p</p>
    <p>我是一个p</p>
    <p>我是一个p</p>
    <p>我是一个p</p>
    <p>我是一个p</p>
</div>

<script>
    document.getElementById("btn").onclick=function () {
        var pObjs=document.getElementsByTagName("p");
        for (var i=0;i<pObjs.length;i++)
            pObjs[i].innerText="我们不是p，我们是你们的爸爸";

    }
</script>
</body>
</html>

2.排他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排他</title>

</head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>

    //获取所有的按钮,分别注册点击事件
    var btnObjs = document.getElementsByTagName("input");
    //循环遍历所有的按钮
    for (var i = 0; i < btnObjs.length; i++) {
        //为每个按钮都要注册点击事件
        btnObjs[i].onclick = function () {
            //把所有的按钮的value值设置为默认的值:没怀孕
            for (var j = 0; j < btnObjs.length; j++) {
                btnObjs[j].value = "没怀孕";
            }
            //当前被点击的按钮设置为:怀孕了
            this.value = "怀孕了";
        };

    }

    //for循环是在页面加载的时候,执行完毕了
    //  for(var k=0;k<5;k++){
    //
    //  }
    //  console.log(k);//
    //事件是在触发的时候,执行的
</script>
</body>
</html>

3.点击按钮改变div的属性设置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有压力</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: darkmagenta;
    }
  </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<input type="button" value="变身后显示" id="btn2"/>

<input type="button" value="第二种隐藏" id="btn3"/>
<div id="dv">

</div>
<script src="common.js"></script>
<script>
  //根据id获取按钮,注册点击事件,添加事件处理函数
  my$("btn").onclick=function () {
    my$("dv").style.display="none";
  };
  my$("btn2").onclick=function () {
    my$("dv").style.width = "300px";
    my$("dv").style.height = "200px";
    my$("dv").style.backgroundColor = "pink";
    my$("dv").style.display="block";
  };
  my$("btn3").onclick=function() {
    if(this.value=="第二种隐藏"){
      my$("dv").style.display="none";//隐藏
      this.value="显示";
    }else if(this.value=="显示"){
      my$("dv").style.display="block";//显示
      this.value="第二种隐藏";}
  };
</script>
</body>
</html>

4.隐藏于显示的另一种方法（改变类名）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ddd</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }

    .cls {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,通过类样式的方式设置div的显示和隐藏
  my$("btn").onclick = function () {
    // console.log(my$("dv").className);

    //判断的是div是否应用了类样式
    if (my$("dv").className != "cls") {
      //现在是显示的,应该隐藏
      my$("dv").className = "cls";
      this.value = "显示";
    } else {
      //隐藏的状态----立刻显示
      my$("dv").className = "";
      this.value = "隐藏";
    }
  };
</script>

</body>
</html>

其他案例

https://blog.csdn.net/weixin_45525272/article/details/108097295

标签：DOM,value,点击,事件,应用,按钮,dv,my
来源： https://blog.51cto.com/u_15265965/2894291

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9