JavaScript事件三要素

最新推荐文章于 2022-11-17 23:09:11 发布

躲不过️动

最新推荐文章于 2022-11-17 23:09:11 发布

阅读量1k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_52083255/article/details/122496784

版权

笔记专栏收录该内容

69 篇文章 1 订阅

订阅专栏

JavaScript 事件三要素

事件源：哪个元素触发的
事件类型：点击、选中、修改
事件处理程序：进一步如何处理，往往是一个回调函数

 <input type="button" value="点我试试" onclick="alert('试试就试试')">

该行代码中：

事件源：按钮
事件类型：绑定点击事件 onclick为回调函数
事件处理程序：这里为回调函数内部代码"alert('试试就试试')"

因此，js代码中，主要流程有：

如何选择页面元素（也称为DOM元素）（找事件源）

获取元素的两种方式：

方式1:

querySelector：

格式：

var element = document.querySelector(selectors);

其中：

selectors 包含一个或多个要匹配的选择器（id选择器，类选择器，标签选择器）的字符串；
如果需要与指定选择器匹配的所有元素的列表，应该使用 querySelectorAll()；

代码如下：

<!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>
</head>

<body>
    <div>
        <span>测试一下</span>
    </div>
</body>
<script>
    // 选择div元素
    var div = document.querySelector("div");
    console.log(div);
    // 获取div元素下的span元素
    var span = div.querySelector("span");
    console.log(span);
</script>

</html>

方式2:

querySelectorAll：选择器返回多个元素，返回一个数组；

代码如下：

<!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>
</head>

<body>
    <p>张三喜欢打羽毛球</p>
    <p>李四喜欢打乒乓球</p>
    <p>王五喜欢打篮球</p>
</body>
<script>
    var arr = document.querySelectorAll("p");
    // 数组的遍历
    // 方式一：下标的方式
    for(let i=0; i<arr.length; i++){
        console.log(arr[i]);
    }
    // 方式二：of的方式
    for(let e of arr){
        console.log(e);
    }
</script>

</html>

打印结果：

在这里插入图片描述

事件处理程序（做什么事情 ）

（1）设置属性（如：style属性设置样式，on开头设置事件属性）
（2）设置标签内容（如：设置普通文本以及复杂的dom内容）

设置/修改元素内容

innerText

innerText 无法获取到标签内部的 html 结构, 只能得到文本内容；

代码如下：

<!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>
</head>
<body>
    <div></div>
    <p>初始化时p标签的内容</p>
</body>
<script>
    //给div设置一些内容
    //获取div元素：
    var div = document.querySelector("div");
    div.innerText = "js中innerText设置的内容";
    //innerText设置的字符串，如果包含html标签，不会渲染为html元素
    div.innerText = "<span>js中innerText设置的内容</span>";
    //也可以获取标签内容
    var p = document.querySelector("p");
    console.log(p.innerText);
</script>
</html>

在这里插入图片描述

innerHTML

innerHTML 不仅能获取到页面的 html 结构, 同时也能修改结构，并且获取到的内容保留的空格和换行；

代码如下：

<!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>
</head>
<body>
    <div></div>
</body> 
<script>
var div = document.querySelector("div");
//innerHTML，设置的内容中，如果包含html标签，会渲染为html中的元素
div.innerHTML = "<span>js中innerHTML设置的内容</span>";
</script>
</html>

在这里插入图片描述

示例：鼠标点击图片来使得两张图片进行切换；

代码如下

<!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>图片切换</title>
</head>
<body>
    <img src="rose.jpg" alt="" style="width: 100px; height: 100px;">
</body>
<script>
     //获取img元素
     var img = document.querySelector("img");
    //console.dir将一个对象中的属性、方法打印出来
    console.dir(img);
    //点击图片，切换为另一张: 绑定点击事件
    img.onclick = function(){
        //对象src属性保持的是绝对路径，我们用包含来判断
        if(img.src.lastIndexOf("rose.jpg") != -1){
            img.src = "花花.jpg";
        }else{
            img.src = "rose.jpg";
        }
    }
</script>
</html>

效果可以自己试

躲不过️动

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript事件三要素

JavaScript 事件三要素事件源：哪个元素触发的事件类型：点击、选中、修改事件处理程序：进一步如何处理，往往是一个回调函数 <input type="button" value="点我试试" onclick="alert('试试就试试')">该行代码中：事件源：按钮事件类型：绑定点击事件 onclick为回调函数事件处理程序：这里为回调函数内部代码"alert('试试就试试')"因此，js代码中，主要流程有：如何选择页面元素（也称为DOM元素）（找事件源）
复制链接

扫一扫