JavaScript笔记(12)之事件基础

y191024

发布于 2022-09-20 20:10:09

75100

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

终于要有点交互效果了,好激动!

事件基础

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为

简单理解: 触发--响应机制

网页中的每个元素都可以产生某种可以触发的JavaScript事件,例如:我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作.

现在我们分析一个事件:点击一个按钮,弹出对话框

1.事件是由三部分组成: 事件源事件类型事件处理程序我们也称之为事件三要素

(1) 事件源: 事件被触发的对象 (按钮)

(2) 事件类型: 如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

(3) 事件处理程序: 通过一个函数赋值的方式完成

执行事件的步骤

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值形式)

操作元素

JavaScript的DOM操作可以改变网页元素,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等.注意以下都是属性.

改变元素内容

element.innerText

从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的内容,包括html标签,同时也保留空格和换行

但是这里的日期是死的,还记得我们之前封装过的函数吧,现在可以拿来调用了

现在这个就是动态的日期了!

我们现在试试看:

innerText的效果:

innerHTML的效果:

这两个属性也是可读写的,可以获取元素里面的内容.

修改元素属性

做一个小案例:

跟着老师做的:

早上的时候:(老师的图真是把我笑死了)

上午:(哎呀发现字打错了...)

晚上:

修改表单属性

表单属性,如value.是要采用其他方式设置的,假如我们现在想要按下按钮就让输入框中的文字发生变化,我们使用input.innerText是不生效的.

正确的办法:

禁用按钮: disabled = true

也可以写成

一定要注意this指向的是事件函数的调用者(btn)

做个输入密码明文密文变化的案例,就是当我们在登录某些网站时,点击小眼睛的时候,就能看到密码,再点击就又能够隐藏:

主要是让input的type属性发生变化,顺便将图片做个更换:

看看效果吧:

样式属性操作

先来学习行内样式操作

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

又做了一个关闭淘宝二维码的案例:

就是让用户在点击×按钮时,将元素display:none,修改了这个属性罢了

做法很简单,就不展示css部分了:

循环精灵图

现在我们学习非常重要的循环精灵图,以往我们都要一个一个自己写,现在可以利用JS循环写出来啦.

啊啊啊有点难!!!

也可以写成这样,我觉得更好理解一些,也更好记一点.

继续做案例:

这里我们要学习两个新事件:

onfocus: 获得焦点 onblur: 失去焦点

现在我们已经学习了行内样式操作,但是只使用于样式比较少的情况,如果样式多的话就会非常的麻烦,我们还可以使用类名样式操作.(本大学狗要去上课了...回来继续写)

我们可以将样式都写在一个类里面,然后再我们点击了元素以后,将这个类名加上去.

如果样式修改比较多,可以采取操作类名方式更改元素样式
class因为是个保留字,因此使用className来操作元素类名属性
className 会直接更改元素的类名,会覆盖原先的类名
但是我们想要在保留原来的类名基础上再新增我们的类名也是可以的,假如我们的盒子原先为class = 'box', 现在我们要加一个class = 'change', 我们可以this.className = 'box change' (多类名选择器)

最后做一个验证密码的案例本章就收尾啦,代码比较长截不下只能复制粘贴进来了:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .register {
            width: 600px;
            margin: 100 auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .check-right {
            background: url(./images/right.png) no-repeat;
            color: green;

        }

        .check-wrong {
            background: url(./images/wrong.png) no-repeat;
            color: red;
        }
</style>
</head>

<body>
    <div class="register">
        <input type="password" class='ipt'>
        <p class="message">请输入6~12位密码</p>
    </div>
    <script>
        // 获取事件     
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');

        ipt.onblur = function () {
            if (ipt.value.length < 6 || ipt.value.length > 12) { //  判断的是长度啊!!!要.length一下!
                message.className = 'message check-wrong'
                message.innerText = '密码需要大于6位且小于12位!'
            } else {
                message.className = 'message check-right'
                message.innerText = '该密码可用'                      
            }
        }
</script>
</body>

</html>

先去复习啦,明天继续学

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-10-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript