前端学习day17：dom：阻止默认事件，事件的解绑，this指向，改变this指向，实现数组拼接，值类型和引用类型，值传递和引用传递，深浅拷贝，箭头函数，箭头函数中的this指向

已于 2022-08-11 21:38:56 修改
阅读量302 收藏
点赞数
文章标签： 前端 学习 javascript
于 2022-07-05 21:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45926448/article/details/125616793
版权

目录

1.阻止默认事件

2.事件的解绑

3.this指向

4.改变this指向的三种方式

5.实现数组拼接的方式

6.值类型和引用类型

7.值传递和引用传递

8.深浅拷贝--只针对引用类型

9.箭头函数

10.箭头函数中this指向

1.阻止默认事件

        现在页面中一般都直接采用局部刷新，是通过ajax请求来实现局部更新

表单form本身就具备页面刷新的功能，为了不让页面刷新使form发起ajax请求，就要阻止默认事件

 <!-- 使用 百度搜索的接口 -->

    <!-- <form action="http://www.baidu.com/s">

        <input type="text" name="wd">

        <input type="submit" value="提交">

    </form> -->

1.1  event.preventDefault();

1.2   event.returnValue = false;

1.3

<!-- onsubmit  方法 返回值为false  可以阻止默认事件  但无法再发起网络请求了 -->

    <form action="" οnsubmit="return false">

        <input type="text" name="wd">

        <input type="submit" value="提交">

    </form>

1.4

区别 onsubmit中是否包含 return

    不包含return 并不阻止默认事件  因为onsubmit 并没有返回值

    包涵return就类似第3种写法

 <form action="" οnsubmit="return mycommit()">

        <input type="text" name="wd">

        <input type="submit" value="提交">

    </form>

 function mycommit() {

            console.log("必须 显示的返回 false 才可以阻止默认事件");

            return false;

        }

1.5

<!-- type 为 submit 类型 会触发提交事件 -->

    <!-- type 为 button 类型 不会触发提交事件  不会触发 test()-->

    <form action="" οnsubmit="test()">

        <input type="text" name="wd">

        <input type="button" value="提交" οnclick="test1()">

    </form>

1.6  button按钮也会触发 submit事件

  <form action="" οnsubmit="test()">

        <input type="text" name="wd">

        <button>提交按钮</button>

    </form>

2.事件的解绑

1.置空

2.removeEventListener

        添加监听器时的回调函数必须写成具名函数 否则无法进行解绑操作

  <button>点我</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log("hello");
        }
        setTimeout(() => {
            // 1.置空
            btn.onclick = null;
            // 2.removeEventListener
            btn.removeEventListener("click", fn);
        }, 5000);
        var fn = function () {
            console.log("124");
        }
        // 添加监听器时的回调函数必须写成具名函数 否则无法进行解绑操作
        btn.addEventListener("click", fn);

3.this指向

3.1全局作用域下  this指向Windows对象

        // 1. 全局作用域下  this指向window对象
        console.log(this);//window
        // 声明的全局变量 默认做为window的属性
        var a = 10;
        console.log(this.a);//10
        console.log(window.a);//10
        // 在全局作用域下 尽量避免使用name这个名称
        // this window 可以省略
        console.log(this.b);// undefined 没有给该属性赋值 为undefined的
        function test() {
            console.log("测试一下",this);// window
        }

        window.test();//window
        this.test();//window
        test();//window

3.2指向当前方法的调用者

// 指向当前方法的调用者
        var obj = {
            name:"张三",
            age:20,
            play(){
                console.log(this.name + "去打篮球");// this -> obj
            }
        }
        obj.play();//张三去打篮球

3.3指向当前事件的绑定者

  var btn = document.querySelector('button');

        btn.onclick = function () {
            console.log(this);// this -> btn对象
        }

4.改变this指向的三种方式

         函数可以使用的三个方法

        1.call  2.apply  3.bind

 1.call 立即调用 并传递多个参数

        hello.call(btn,12,345);

 2.apply 应用    立即调用 传两个参数 并且第二个参数为数组对象

         hello.apply(btn,[1,2]);

3.bind  返回一个新函数 必须调用才会执行

        hello.bind(btn,1,2)();

5.实现数组拼接的方式

 var a1 = [1,2,3];

var a2 = [4,5,6];

        // 1.展开运算符

        // var a3 = [...a1,...a2];

        // console.log("a3 = ",a3);

        // 2.for 遍历

        // for (const key in a2) {

        //     a1.push(a2[key]);

        // }

        // console.log("a1 =",a1);

        // 3.concat 连接

        // var a3 = a1.concat(a2);

        // console.log(a3);

        // 4.apply

        a1.push.apply(a1,a2);

        console.log(a1);

6.值类型和引用类型

        数据结构  栈和堆

        https://blog.csdn.net/qq_44799466/article/details/106074212

        1.值类型 存储在栈的数据结构中的   速度快 效率高

        string number bool null undefined

        var a = 10;

        var b = "string";

        var c = true;

        2.引用类型 Array  Function Object

        obj 称为对象的引用(指针)    引用是存放在栈中的  而对象本身是存放在堆中

        如果需要修改对象的值  通过指针找到对象的内容地址  进行修改其值

        var obj = {

            name: "张三",

            age: 20

        }

        var arr = [1, 2, 3];

7.值传递和引用传递

在赋值 或 传参时 把实参赋予形参的过程  称为值传递 引用传递

值传递  把值copy一份赋值新的变量    a改变时  不影响b变量

        var a = 10;

        var b = a;

        a = 11;

        console.log(" b = ", b);// 10

        function test(num) {

            num = 100;

        }

        test(a);

        console.log("a  === ",a);// 11

引用传递

        新老指针指向同一个对象   修改任何一个 两者的都时相同的

        只拷贝指针  不拷贝对象的值

        var obj = {

            name:"lili",

            age:18

        }

        var obj2 = obj;

        obj.name = '莎莎';

        console.log("obj2 == ",obj2.name);//莎莎

8.深浅拷贝--只针对引用类型

1.浅拷贝  只拷贝指针 不拷贝对象的地址

      var obj1 = {

            name: "张三",

            age: 20

        }

        var obj2 = obj1;

        obj1.name = "李四";

        console.log("obj2 .name = ", obj2.name);//obj2 .name =  李四

        console.log(obj1 === obj2);//true

2.深拷贝

        把对象的地址（值）拷贝一份新的 赋予一个新的变量

        var obj = {

            name: "张三",

            age: 20,

            gf: {

                name: "小绿"

            }

        }

1.JSON中的方法

   可以实现多层的深拷贝

        var jsonobj = JSON.stringify(obj);

        var obj2 = JSON.parse(jsonobj);

        console.log(obj === obj2);//false

        console.log(obj.gf === obj2.gf);//false

2.自定义函数来实现深拷贝 (只拷贝一层)

        function deepObj(obj) {

            var nObj = {};

            for (const key in obj) {

                nObj[key] = obj[key];

            }

            return nObj;

        }

        var obj1 = {

            name: "张三",

            age: 20

        }

        var newObj1 = deepObj(obj1)

        console.log("--------------");

        console.log(newObj1 === obj1);//false

        //   拷贝数组

        function deepArray(arr) {

            var nArr = [];

            for (const value of arr) {

                nArr.push(value);

            }

            return nArr;

        }

        var array = [1, 2, 3, 4, 5];

        var newArray = deepArray(array);

        console.log("============");

        console.log(newArray === array);//false

9.箭头函数

结构：（参数列表）=>{函数体}

   // 1.无参

        var test = () => {

            console.log(123)

        }

        test();

        // 2.多参

        var test1 = (a, b) => {

            console.log(a, b);

        }

        test1(10, 20);

        // 3.有返回值 多个参数

        var test2 = (a, b) => {

            return a + b;

        }

        console.log(test2(10, 20));

        // 4.单个参数 有返回值

        var test3 = (a) => {

            return a + 100;

        }

        console.log(test3(100));

        // 可以简写

        // 一个参数 可以省略 括号

        // 如果有返回值 并且业务逻辑简单 可以省略{} 和 return 关键字

        var test4 = a => a + 100;

        console.log(test4(19));

10.箭头函数中this指向

        在箭头函数中，this永远指向其父作用域的对象

var btn = document.querySelector('button');
        btn.onclick = () => {
            console.log("this ,", this);// window
        }
        var obj = {
            name: "zhagnsan",
            age: 20,
            play: function () {
                setTimeout(() => {
                    console.log("第一个this = ", this); // obj
                }, 1000);

                setTimeout(function () {
                    console.log("第二个this = ", this); // window
                }, 1000);
            }
        }
        obj.play();

        var obj1 = {
            name: "zhagnsan",
            age: 20,
            play: () => {
                setTimeout(() => {
                    console.log("第一个this = ", this); // window
                }, 1000);

                setTimeout(function () {
                    console.log("第二个this = ", this); // window
                }, 1000);
            }
        }
        obj1.play();

改变this指向

        var obj2 = {

            name: "zhagnsan",

            age: 20,

            play: function () {

                // 改变this指向

                // 1.箭头函数

                setTimeout(() => {

                    console.log("改变后的 = ", this); // obj

                }, 1000);

                //    2. 定义临时变量 that

                var that = this;

                setTimeout(function () {

                    console.log("改变后的that = ", that);// obj

                }, 1000);

                // 3. bind  call  apply

                setTimeout(function(){

                    console.log("bind后 = ",this);

                }.bind(this),1000);//obj

                // 演变过程

                // 1.

                // var fn = function() {

                //     console.log(1111111111111111111111)

                // }

                // setTimeout(fn,100);

                // 2.

                // var fn = function() {

                //     console.log(1111111111111111111111)

                // }

                // var newFn = fn.bind();

                // setTimeout(newFn,100);

                // 3.

                // var newFn = function () {

                //     console.log(1111111111111111111111)

                // }.bind();

                // setTimeout(newFn, 100);

                // 4.

                // setTimeout(function () {

                //     console.log(1111111111111111111111)

                // }.bind(this), 100);

            }

        }

        obj2.play();

拾歡
关注
DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
u013194113的博客
07-25 7763
Dom默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式
JavaScript之DOM总结笔记
DDxuexi的博客
12-11 621
1. DOM 简介 1.1 什么是 DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、
DOM事件对象 -- dom事件流 -- 阻止默认事件 -- 阻止冒泡 -- 事件委托
LQlove1的博客
06-20 397
DOM事件对象 -- dom事件流 -- 阻止默认事件 -- 阻止冒泡 -- 事件委托
前端js-----DOM事件高级(阻止默认行为&&事件冒泡)
weixin_47339511的博客
01-03 489
有时候我们不需要一些默认行为，这时我们需要阻止默认行为：代码如下 a.onclick = function(e){ //e.preventDefault();//适用普通浏览器 //e.returnValue;//ie 6 , 7, 8 return false;//无兼容，（仅限于传统注册方式，但return后面的代码将不会执行；但是在二级事件中没用） } !!!阻止冒泡（事件） (1)e.stopPropagation(); (2)e.cancelBubble = true; // ie 6,7，8
阻止事件默认行为
小前端
09-28 487
第一种方式event.preventDefault();第二种方式return false;
JavaScript基础学习、复习笔记
weixin_60896381的博客
06-08 1822
本文包含JavaScript基础大致内容，参考于pink老师所讲解视频通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用笔记，JavaScript高级知识以后也会更新。 如有做的不好地方，敬请谅解，欢迎指出，持续更新改正。......
WEB前端--Day9(动画）
wx_yiyi_xixi的博客
12-07 2109
一、动画 5.自定义动画 animate():   用于实现自定义动画 调用方式：$(selector).animate({parmas},speed,callback) parmas:定义动画的css属性，以key：value的方式传值 speed：动画持续的时间  （毫秒) callback：动画执行完毕之后需要执行的操作 代码演示： &lt;!DOCTYPE html&g...
前端非框架类知识点汇总
weixin_46044936的博客
07-26 2487
html单词库 <link rel="stylesheet" href="css文件路径">css引入 <iframe src="danghang.html" width="100%" height="310px" frameborder="0"></iframe> 图片标签： img src="" title="" alt="" src属性 是指图像文件路径 alt属性 是在图片加载不出来时替换成文本 title属性 是在鼠标悬停的时候显示 srcset属性 是在不
JavaScript基础学习笔记
qq_42436532的博客
04-10 911
JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 console.log(f); // 22 1.2 逻辑运算符 1.2.1 逻辑与 有假必假，两边都是true才返回true 对于数值和表达式： 语法： 表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso
DOM-9 【事件处理函数-冒泡捕获-阻止冒泡默认事件】
小管打天下的博客
05-25 382
一、事件处理函数 （1）事件处理函数的定义 通过某一个事件而产生某一个效果，就叫做绑定事件处理程序/函数 元素是本身就具备事件的，绑定事件不是绑定事件本身，而是绑定事件的处理函数，也叫事件的反馈 事件 + 事件的反馈 = 前端交互/交互体验（前端核心） 交互是用户通过某一个事件操作而得到了一个什么样的效果反馈 （2）事件绑定的方法 句柄绑定 为某一个元素指定了一个事件句柄，某一个句柄等于一个处理函数，就是这个元素的句柄 句柄：就是事件 事件句柄：事件发生时要进行的操作 事件源：事件作用在哪个元素身上，哪个
【前端学习】JavaScript阻止冒泡 阻止默认事件
Dog Sun的博客
02-04 141
文章目录·阻止冒泡·阻止默认事件 ·阻止冒泡 ·阻止默认事件
js阻止默认事件
yr123456654321的博客
04-26 290
阻止事件的冒泡与默认行为
qq_38431738的博客
04-20 904
return false; 阻止元素事件的默认行为HTML 特性指定事件处理程序不使用函数使用函数JavaScript 指定事件处理程序传统方式（DOM0 级）addEventListener()（DOM2 级）attachEvent()（IE8及更早版本专有）总结 HTML 特性指定事件处理程序 某个元素支持的某种事件，都可以使用一个与相应时间处理程序同名的 HTML 特性来指定，这个特性的...
【JavaScript】阻止事件冒泡和默认行为
最新发布
小秀的博客
05-12 1932
在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素 的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2401
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
【Javascript】【事件】阻止元素默认的事件行为
天天向上 Up Up Up (*^▽^*)
05-23 948
如图所示，这是一个p标签，正常双击鼠标会选中文本，这是因为p标签有自己的默认事件处理 我们可以通过以下代码，来阻止默认的事件处理行为 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=""> </head&gt...
前端阻止事件冒泡和默认事件
诗安的博客
09-01 553
首先了解什么是事件冒泡什么是事件捕获 注：图片来自博客http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html 实例代码如下 事件流 #content{width: 150px;height: 150px;background-color: red;} #bt
阻止事件冒泡和浏览器默认事件
m0_46680765的博客
07-28 132
阻止事件冒泡和浏览器默认事件 阻止事件冒泡 window.event ? window.event.cancelBubble = true：e.stopPropagation(); 阻止默认行为 window.event ? window.event.returnValue = false ： e.preventDefault(); 原生js阻止中 return false； 只阻止默认行为，不阻止冒泡； jQuery中的return false；既阻止默认行为，又阻止事件冒泡。 //阻.
理解DOM事件：从DOM0到DOM3级事件处理
"这篇文章主要介绍了DOM事件的三个级别——DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。DOM0级事件处理是最早的事件处理方式，通过在HTML元素上直接设置属性来触发函数。DOM2级事件处理引入了事件监听器的概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值