JS 类型转换+JS 事件冒泡与事件捕获

精选原创

柠檬汽水9536 2024-05-31 16:48:37 ©著作权

文章标签 JS强制类型转换 JS隐式类型转换 JS事件冒泡 JS事件捕获阻止默认操作 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者柠檬汽水9536的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、JavaScript 中有：

基本数据类型： String、Number、Boolean、Function、Symbol；

对象类型： Object、Date、Array；

特殊类型： Null、Undefined。

不同的类型之间运算需要先对数据的类型进行转换。

在 JavaScript 有两种类型转换的方式，分别是隐式类型转换和强制类型转换（也叫显式类型转换）。

（1）JS 隐式类型转换：

隐式转换就是自动转换，通常发生在数学运算中。

var str = "https://www.csdn.net/";

var num = 123;

var res = str + num;

document.write(typeof res);  // 输出：string

document.write(res);         // 输出：https://www.csdn.net/123
//在运算之前 JavaScript 解释器会将上面的 num 变量隐式的转换为字符串类型，之后再进行运算。

JavaScript 中，表达式中包含以下运算符时，会发生隐式类型转换：

算术运算符：加（+）、减（-）、乘（*）、除（/）、取模（%）；
逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）；
字符串运算符：+、+=。
字符串加数字，数字会转换为字符串；
数字减字符串、字符串减数字、乘、除运算时，会先将字符串会转换为数字，
如果字符串无法转换为数字（例如"abc"、“JavaScript”），则会转换为 NaN；

（2） JS 强制类型转换：

强制类型转换需要手动进行，在 JavaScript 中，强制类型转换主要是通过调用全局函数来实现的。

1）使用Number（）函数：

document.write(Number("10.5"));  // 输出：10.5

document.write(Number(true));    // 输出：1

document.write(Number(false));   // 输出：0

document.write(Number(null));    // 输出：0

1.1 如果参数中只包含数字，将转换为十进制数字，忽略前导 0 以及前导空格，有效浮点数规则相同；

1.2 数字前面有负（-）号，那么-会保留在转换结果中，如果数字前面有加（+）号，转换后会删掉+号；

1.3 参数中包含有效的十六进制数字，将转换为对应大小的十进制数字；

1.4 参数为空字符串，将转换为 0；参数为布尔值，则将 true 转换为 1，将 false 转换为 0；参数为 null，将转换为 0；参数为 undefined，将转换为 NaN；

1.5 参数为 Date 对象，将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数；

1.6 参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象，将转换为 NaN；

1.7 在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符，或在参数中间包含了包括空格、+和-的特殊符号或非数字字符，将转换为 NaN。

2）使用parselnt()函数：

parseInt(string, radix);
// string 为要转换的值，如果参数不是一个字符串，则会先将其转换为字符串
//radix 为一个可选参数，表示字符串的基数，取值范围在 2 到 36 之间
//例如将 radix 参数设置为 16，则表示将 string 转换为一个十六进制数

2.1 解析字符串时，会忽略字符串前后的空格，如果字符串第一个字符为负号（-），那么负号会保留在转换结果中，如果字符串第一个字符为正号（+），那么转换后将忽略正号；

2.2 字符串前面为除空格、正号（+）、负号（-）以外的特殊符号或者除 a～f（或 A～F）之外的非数字字符，那么字符串将不会被解析，返回结果为 NaN;

2.3 字符串中包含空格、小数点（.）等特殊符号或非数字的字符时，解析将在遇到这些字符时停止，并返回已解析的结果；

2.4 字符串是空字符串，返回结果为 NaN。

3）使用parseFloat()函数

parseFloat(string);
//string 为要被转换为浮点数的值，如果转换失败，则会返回 NaN

3.1 在解析的过程中遇到了正号（+）、负号（-）、数字（0-9）、小数点（.）、或科学计数法中的指数（e 或 E）以外的字符，则会忽略该字符以及之后的所有字符，并返回解析到的浮点数；

3.2 解析过程中若遇到多个小数点，则会在解析到第二个小数点时停止，并返回第二个小数点之前的解析结果；

3.3 解析过程中会忽略参数开头或末尾的空白字符;

3.4 参数的第一个字符不能被解析为数字，则会返回 NaN.

2、JS事件冒泡与事件捕获：

（1）事件捕获：文档根节点流向目标节点（触发事件的节点）；

（2）事件冒泡：目标节点（触发事件的节点）流向文档根节点；

（3）整合后：先捕获后冒泡：

JS 类型转换+JS 事件冒泡与事件捕获_JS事件冒泡

3、阻止事件捕获和冒泡：

event.stopPropagation();
//stopPropagation() 会阻止事件捕获和事件冒泡，但是无法阻止标签的默认行为，例如点击链接任然可以打开对应网页。

event.stopImmediatePropagation();
//也可以使用 stopImmediatePropagation() 方法来阻止同一节点的同一事件的其它事件处理程序
//例如为某个节点定义了多个点击事件，当事件触发时，这些事件会按定义顺序依次执行
//如果其中一个事件处理程序中使用了 stopImmediatePropagation() 方法，那么剩下的事件处理程序将不再执行。

4、阻止默认操作：

当单击某个链接时，会自动跳转到指定的页面；当单击提交按钮时，会将数据提交到服务器等，如果不想这样的默认操作发生，可以使用 preventDefault() 方法来阻止：

event.preventDefault();

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript</title>

</head>

<body>

    <a href="http://c.biancheng.net/" id="link">链接</a>

    <script>

        var link = document.getElementById("link");

        link.addEventListener('click', function(event){

            event.preventDefault(); // 阻止链接跳转
            //对于 IE9 及以下的浏览器您可以使用 event.returnValue = false;

        });

    </script>

</body>

</html>

暂时记录到这里，明天继续学习。

学习文章链接： https://blog.csdn.net/m0_62617719/article/details/127564745

------------------------------------------------

原文链接：https://blog.csdn.net/m0_62617719/article/details/127564745