前端学习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();

拾歡
关注
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
在阻止默认行为和事件冒泡的示例中，展示了`return false`可以同时阻止事件冒泡和取消默认行为。这在处理表单提交或链接点击时很有用，因为它可以防止页面跳转或者表单提交等默认操作。 综上所述，jQuery事件处理...
Js阻止事件冒泡与阻止默认事件
weixin_44562686的博客
12-15 2261
1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped()方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联
【JavaScript】阻止事件冒泡和默认行为
小秀的博客
05-12 1837
在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素 的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。
JS阻止事件默认行为的三种方法
最新发布
m0_74577714的博客
06-24 616
大家有没有为默认行为感到烦恼呢？我这有三个方法可以为大家解决。好上才艺。
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2394
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
react 函数的监听与移除 及函数中this的指向问题
我的博客
10-14 553
// 方式一 componentDidMount() { window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize) } handleResize = () => { console.log('事.
jQuery移除元素自动解绑事件实现思路及代码
10-25
总的来说，通过扩展jQuery的内置方法和记录事件绑定信息，我们可以实现元素移除时的自动事件解绑，从而提高应用程序在各种浏览器环境下的性能，特别是对于那些不支持自动解绑事件的老版本浏览器。这种方法既简单又...
vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）
01-08
Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中，有时我们需要监听用户是否点击了组件外部，例如关闭弹窗或菜单时。基于 Element UI，我们可以方便地实现这一功能，Element UI 提供了一个名为 `...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
在Web前端开发中，JavaScript与HTML DOM...通过学习本教程，你将能够更加自如地使用JavaScript动态地改变网页内容，实现丰富的交互效果。这不仅提升了用户体验，也为网页应用的扩展性和可维护性打下坚实基础。
为什么要阻止表单的默认处理？
xiaogangblog的博客
08-21 1317
用户单击提交按钮或图像按钮时，就会提交表单。 使用<input>或<button>都可以定已义提交按钮，只要将其type特性的值设置为"submit"即可. 而图像按钮则是通过将<input>的type特性值设型力image*来定义的。 因此，只要我们单击以下代码生成的按钮，就可以提交表单<!--通用提交按钮-><inputtyp...
事件监听清除&箭头函数&传参
hello_helloworld的博客
08-16 912
事件监听清除&箭头函数&传参 addEventListener如何传参，想要清除事件监听的情况下怎么传参，removeEventListener的大坑，匿名函数不能用，使用onkeydown来进行传参并避免事件的重复监听，react中的事件监听，onmousemove、onmouseup，event传参，不仅仅是event，event与其他参数一起传递
阻止事件默认行为
Ghmin的博客
12-03 622
如何阻止默认事件？方法一：全支持 event.preventDefault();// 方法二：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 event.returnValue = false;// 方法三：不建议滥用，jQuery 中可以同时阻止冒泡和默认事件 return false;
Vue3前端开发自学demo,事件修饰符-阻止默认事件和冒泡事件
yrldjsbk的博客
01-06 904
下面演示的代码是，vue3前端开发技术里面经常遇到的，阻止默认事件，例如，阻止a标签的href属性，跳转到一个别的地址去。这是传统的方式，阻止默认事件的发生。但是在vue3开发里面，为了节省程序员的开发时间，提升办事效率，植入了很多修饰符。同理，如果你想阻止冒泡事件，只需要写成【@click.stop】即可实现了。直接在事件后面使用.prevent即可实现，阻止默认事件的效果。如图片指向的位置，就是，vue3的事件修饰符，效果案例展示。Vue3前端开发自学demo,事件修饰符-阻止默认事件。
阻止事件的冒泡与默认行为
qq_38431738的博客
04-20 903
return false; 阻止元素事件的默认行为HTML 特性指定事件处理程序不使用函数使用函数JavaScript 指定事件处理程序传统方式（DOM0 级）addEventListener()（DOM2 级）attachEvent()（IE8及更早版本专有）总结 HTML 特性指定事件处理程序 某个元素支持的某种事件，都可以使用一个与相应时间处理程序同名的 HTML 特性来指定，这个特性的...
DOM事件对象 -- dom事件流 -- 阻止默认事件 -- 阻止冒泡 -- 事件委托
LQlove1的博客
06-20 397
DOM事件对象 -- dom事件流 -- 阻止默认事件 -- 阻止冒泡 -- 事件委托
JavaScript阻止默认事件
weixin_47306019的博客
11-16 4110
阻止默认事件： 标准浏览器：事件对象.preventDefault(); 低版本IE浏览器：事件对象.returnValue= false;常见默认事件： 若a标签在html中href写有URL默认的跳转地址 则在js中添加a的点击事件，并用event.preventDefault();阻止默认事件发生 实际项目中 a标签在html中写 让a标签执行js程序， 然后在js中用
前端js-----DOM事件高级(阻止默认行为&&事件冒泡)
weixin_47339511的博客
01-03 487
有时候我们不需要一些默认行为，这时我们需要阻止默认行为：代码如下 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
JS的DOM操作——阻止事件冒泡和阻止默认事件
m0_59345890的博客
07-21 1239
在学习阻止事件冒泡时，我们思考一个问题addEventListener的第三个参数为true是阻止事件传递还是false?都不会阻止事件传递,因为true捕获阶段触发false冒泡阶段触发；要阻止事件传递唯一的方式就是阻止事件冒泡事件对象调用stopPropagation()运行结果点击box3,可以看到只有box3触发了，因为box1,box2是在冒泡阶段触发，然而在box3事件对象中调用了stopPropagation()，阻止了事件冒泡，所以box1,box2的事件不再触发。...
理解DOM事件：从DOM0到DOM3级事件处理
"这篇文章主要介绍了DOM事件的三个级别——DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。DOM0级事件处理是最早的事件处理方式，通过在HTML元素上直接设置属性来触发函数。DOM2级事件处理引入了事件监听器的概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值