首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【如果你要学JS⑧】——[JavaScript-事件]事件三要素,事件处理程序

【如果你要学JS⑧】——[JavaScript-事件]事件三要素,事件处理程序

原创
作者头像
像素人
修改于 2023-12-21 11:22:23
修改于 2023-12-21 11:22:23
80900
代码可运行
举报
文章被收录于专栏:如果你要学JS如果你要学JS
运行总次数:0
代码可运行
xsr
xsr

1.事件三要素

1.事件源:事件被触发的对象

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

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

2.执行事件步骤

1.获取事件源

2.绑定事件(或注册事件)

3.添加事件处理程序

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <button id="butn">像素人是谁?</button>
    <script>
        //1.获取事件源
        var butn = document.getElementById('butn')
        //2.绑定事件(或注册事件)butn.onclick
        //3.添加事件处理程序
        butn.onclick = function () {
            alert('像素人是一名前端')
        }
    </script>
</body>

3.常见的鼠标事件

4.操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。

1.使用element. innerText和element. innerHTML来改变元素

样式区域:

代码语言:html
AI代码解释
复制
    <style>
        //给div一个样式更加好看
        div{
            color: cadetblue;
            width: 120px;
            background-color: rgb(255, 255, 255);
        }
    </style>
 HTML区域:
<body>
    <button> 点击获取当前时间</button>
    <div>00:00:00</div>
</body>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
js区域:
    <script>
        // 获取元素
        var but = document.querySelector('button');
        var div = document.querySelector('div');
        // 注册事件
        but.onclick = function () {
            div.innerText = gettime();
        }
        //封装一个函数用来获取当前时间
        function gettime() {
            var date = new Date();
            var hour = date.getHours();
            hour = hour < 10 ? "0" + hour : hour;
            var min = date.getMinutes();
            min = min < 10 ? "0" + min : min;
            var sc = date.getSeconds();
            sc = sc < 10 ? "0" + sc : sc;
            return '现在是:' + hour + ":" + min + ":" + sc;
        }
    </script>

2.element. innerText和element. innerHTML区别

代码语言:js
AI代码解释
复制
<body>
    <div>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<strong>像素</strong>';// 他并不会给我们进行一个加粗的效果,反而会将加粗标签暴露出来,不进行标签的识别,还会去除空格和换行
        div.innerHTML = '<strong>像素</strong>';// 而innerHTML会对HTML所属的标签进行一个识别,然后就会显示加粗后的效果
        // 当然在实际使用中一般就使用innerHTML
    </script>
</body>

element. innerText和element. innerHTML具有可读性,可以获取元素内容

element. innerText不进行标签的识别,还会去除空格和换行

innerHTML会进行标签的识别

5.修改元素属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
        img {
            width: 142px;
            height: 142px;
        }
    </style>
</head>
 
<body>
    <button id="one">像素</button>
    <button id="two">像素妹</button><br>
    <img src="img/shanyu.jpg" alt="">
    <script>
        var sy = document.getElementById('one');
        var sym = document.getElementById('two');
        var img = document.querySelector('img');
        sym.onclick = function () {
            img.src = 'img/像素妹.jpg';
        }
        sy.onclick = function () {
            img.src = 'img/xiangsu.jpg';
        }
    </script>
</body>

原创✨:还希望各位大佬支持一下

点赞👍:您的赞赏是我前进的动力!

收藏⭐:您的支持我是创作的源泉!

评论✍:您的建议是我改进的良药!

我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Web API - DOM 第二节(操作元素)
​ JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)
meowrain
2021/04/22
4780
Web API - DOM 第二节(操作元素)
Javascript DOM(一)
预解析:js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面
赤蓝紫
2023/01/01
1.2K0
Javascript DOM(一)
JavaScript进阶内容——DOM详解
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
秋落雨微凉
2022/10/25
1.6K0
JavaScript进阶内容——DOM详解
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)
清出于兰
2020/10/26
3.1K0
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等
JavaScript 基本知识
内嵌式:把代码书写在一个script标签对内(这种不需要任何行为会自动执行JS代码)
全栈程序员站长
2022/11/01
2.4K0
JavaScript 基本知识
【JavaScript】JavaScript开篇基础(4)
常用的事件: 鼠标事件: onclick(鼠标点击) onmouseover(鼠标经过), onmouseout(鼠标离开), onfocus(获得鼠标焦点), onblur(失去鼠标焦点), onmousemove(鼠标移动触发), onmouseup(鼠标弹起触发), onmousedown(鼠标按下触发) 事件的组成: 事件源:事件触发的对象,如 按钮 事件类型:如何触发,什么事件,如 鼠标点击(onclick) 事件处理程序: 通过一个函数赋值的方式完成
E绵绵
2024/11/05
1910
【JavaScript】JavaScript开篇基础(4)
操作元素
  JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)
梨涡浅笑
2020/10/27
1.8K0
操作元素
javascript web编程案例干货
1.定时器 <style> span { width: 50px; height: 50px; background-color: black; color: seashell; border: 10px solid #eee; } </style> <body> <span class='hour'></span><span class='
用户8247415
2021/05/06
3670
前端成神之路-WebAPIs01
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。
海仔
2020/12/22
9090
前端成神之路-WebAPIs01
JavaScript之Dom、事件,案例
📦个人主页:楠慧 🏆简介:一个大二的科班出身的,主要研究Java后端开发 ⏰座右铭:成功之前我们要做应该做的事情,成功之后才能做我们喜欢的事 3、JavaScript DOM 3.1、DOM介绍 DOM(Document Object Model):文档对象模型。 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作 具体方法 代码实现 <!DOCTYPE html> <html lang=
楠羽
2022/11/18
1.4K0
JavaScript之Dom、事件,案例
【海贼王航海日志:前端技术探索】一篇文章带你走进JavaScript(三)
API是一个更广义的概念。而WebAPI是一个更具体的概念,特指DOM + BOM。
枫叶丹
2024/08/21
1870
【海贼王航海日志:前端技术探索】一篇文章带你走进JavaScript(三)
事件基础及操作元素
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
星辰_大海
2020/09/30
1.6K0
「Web编程API」- 01
请注意,本文编写于 2096 天前,最后修改于 174 天前,其中某些信息可能已经过时。
曼亚灿
2023/05/17
8220
「Web编程API」- 01
【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )
韩曙亮
2024/06/28
1490
【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )
JS基础第二课(元素篇)
1、用于HTML和XML文档的编辑接口,给文档提供一种结构化的表示方法,可以修改文档的内容和结构
申小兮
2023/04/13
8000
JS基础第二课(元素篇)
【Web APIs】JavaScript 事件基础 ① ( JavaScript 事件简介 | “ 事件 “ 概念 | “ 事件 “ 三要素 - 事件源 / 事件 / 事件处理程序 | 事件类型 )
通过在 HTML 网页中 添加 JavaScript 脚本 , 可以创建 动态页面 ,
韩曙亮
2024/06/24
4170
【Web APIs】JavaScript 事件基础 ① ( JavaScript 事件简介 | “ 事件 “ 概念 | “ 事件 “ 三要素 - 事件源 / 事件 / 事件处理程序 | 事件类型 )
JavaScript
e.stopPropagation(); // stop 停止 Propagation 传播 下列代码为例,当点击父盒子中的son盒子时,不阻止事件冒泡,会发生弹出三个提示框(son、father和document),阻止事件冒泡后,父亲元素不在冒泡弹出框。只弹出son提示框。
roydonGuo
2022/11/02
1.3K0
JavaScript
JavaScript笔记(12)之事件基础
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为
y191024
2022/09/20
7590
JavaScript笔记(12)之事件基础
【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 )
元素对象的 innerHTML 属性可以 获取或设置元素内部的 HTML 标签元素 , 设置这个属性时 , 实际上是在替换元素内部的 HTML 结构 ;
韩曙亮
2024/08/09
7190
【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 )
【JavaEE初阶】JavaScript(WebAPI)
API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM 所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发. 具体可查看: API参考文档
xxxflower
2023/10/16
3870
【JavaEE初阶】JavaScript(WebAPI)
推荐阅读
相关推荐
Web API - DOM 第二节(操作元素)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档