其他分享
首页 > 其他分享> > DOM——事件介绍与简单应用

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

作者：互联网

文章目录

事件

事件：触发-响应机制

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