2021-05-30

最新推荐文章于 2024-09-14 18:52:56 发布

qq_50825351

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量61

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/qq_50825351/article/details/117397268

版权

本文详细讲解JavaScript事件的三要素，如点击按钮弹出对话框的案例，以及元素属性（innerText vs innerHTML）、表单元素操作、样式修改等内容，带你理解如何使静态网页动态起来并实现常见交互功能。

摘要由CSDN通过智能技术生成

JavaScript基础学习08（行为层）-事件

不知道你有没有这这样一个疑问：就是一个静态的网页如何让他动态起来呢？
还有像一些轮播图、一些按钮等是如何实现，让他们起作用呢？
其实呀，以上问题都可以通过JavaScript中的事件来实现

事件？什么是事件？有几部分组成呢?

在这里我们以一个案例为大家介绍事件？

点击一个按钮，弹出对话框

button id="btn">按钮</button>
<script>
    //(1)事件源 事件被触发的对象 谁 按钮
    var btn=document.getElementById('btn');
    //（2）事件类型 如何触法发 触发什么事件 比如鼠标点击事件（onclick），还是经过事件，还是键盘按下事件
    //(3)事件处理程序  通过一个函数赋值的方式完成
    btn.onclick=function () {
        alert("唐伯虎点秋香")
    }
</script>

事件由三部分组成：事件源、事件类型、事件处理程序。我们也称事件三要素。

操作元素（改变元素内容）

elenment.innerText//从起始位置到终止位置的内容，同时空格和换行也会去掉。

elenment.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

在这里我们用到了innerText,那么它与另一个相似的innerHTML有什么区别吗？

innerText与innerHTML的区别

举个栗子：

<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    var btn =document.querySelector("div")
    //1.innerText 不识别HTML标签 非标准  去除空格和换行
   // btn.innerText="今天是：2021年"
    //2.innerHTML 识别html标签 W3C标准 保留原有的空格和换行
    btn.innerHTML="<strong>今天是：</strong>2021"
    //这两个元素是可读写的，可以获取里面的内容
    var p=document.querySelector("p");
    console.log(p.innerText);
    console.log(p.innerHTML);
</script>

常用元素的属性操作

我们在逛淘宝的时候，点击相应按钮，显示相应照片

<button id="btn5">图片5</button>
<img src="img/1.jpg" alt="" title="图片1" id="img">
    var btn5=document.getElementById("btn5");
    var img=document.getElementById("img");
btn5.onclick=function () {
        img.src="img/5.jpg";
        img.title="图片5";
    }

7.我们通过一个案例来分析一下分时问候的原理吧！（操作元素）

万事莫慌，先理清思路在下笔：

首先，我们需要根据系统不同时间来判断，所以需要用到日期内置对象
其次，我们需要用一个分支语句来设置不同的图片（根据早中晚来设置对应相符的图片）
对不同时间更换图片，这就用到上面操作元素src属性。
怎么显示出来？我们不妨用一个div元素，显示不同问候语，修改元素内容即可。

现在对这个案例的思路理清了？来咯！！上代码

<img src="img/1.jpg" alt="" title="honey，上午好！加油">
<div></div>
//1.获取元素
    var img=document.querySelector("img");
    var div=document.querySelector("div");
    //2.得到当前的小时数
    var date=new Date();
    var h=date.getHours();
    //3.利用分支来判断小时数，改变图片和文字
    if(h<12) {
        img.src = "img/1.jpg";
        img.title = "honey，上午好！加油哟！"
    }else if(h<18){
        img.src = "img/2.jpg";
        img.title = "honey，下午好！加油哟！坚持学习！"
    }else {
        img.src = "img/3.jpg";
        img.title = "honey，晚上好！加油哟！每天学习一点点"
    }
</script>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

1.input.type 改变类型

2.input.value 改变表单里面的内容

3.事件对象.disabled 如果想要某个表单禁用不能在点击

当然表单中还有checked、selected等属性操作。

读了文字还是不太明白咋办？直接上代码，动动小手操作体验一下应该就能明白了。

代码·：

button>按钮</button>
<input type="text" value="输入内容">
<script>
  //1.获取元素
  var btn=document.querySelector("button") ;
  var ipt=document.querySelector("input")
    // 2.注册事件，进行程序处理
    btn.onclick=function () {
        // input.innerHTML="被点击了";  //innerHTML对普通盒子管用比如div标签里面的内容

        //表单里面的值 文字内容是通过value来修改的
        ipt.value="被点击了";

        //如果想要某个表单禁用 不能在点击  用disable 这里我想要这个button被禁用
         this.disabled=true;
        //这里的this指向的是事件函数调用者btn
    }
</script>

样式属性操作

我们可以通过js修改元素的大小、颜色、位置等样式。

1. element.style	行内样式操作
2. element.className 类名样式操作

这里需要注意两点：

JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高。

举个栗子：

<div></div>
<script>
    //1.获取元素
    var div1=document.querySelector("div");
        div1.onclick=function () {
        this.style.backgroundColor="purple";
        this.style.width="300px";
    }
</script>