JS基础知识day12

最新推荐文章于 2024-11-08 14:35:14 发布

是阿竹呀

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量219

点赞数 2

文章标签： javascript linq 前端

本文链接：https://blog.csdn.net/lxz1151184225/article/details/122153319

版权

DOM的增删改查：

增 innerHTML += appendChild() insertBefore()

删除 innerHTML = '' remove() removeChild()

修改 replaceChild()

查询：

认识节点node --- 换行，文本，注释，标签都是节点 NodeList

标签 HTMLCollection

数组 Array

数组2 Arguments

数组3 NodeList

数组4 HTMLCollection

以上每种数组属于不同的类别，所以拥有不同的属性和方法

如何把伪数组转为真数组

        var arr = new Array() ;
        console.log(arr);

        function fn() {  
            console.log(arguments);
        }
        fn()

        var oPs = document.querySelectorAll('p') ;
        console.log(oPs);

        // oPs.push('a')

        var oPs2 = document.getElementsByTagName('p') ;
        console.log(oPs2);

        // oPs2.pop()

        var arr = [] ;
        for(var i = 0 ; i < oPs.length ; i++) {
            arr.push(oPs[i])
        }
        console.log(arr);
        arr.push('a')
        console.log(arr);

事件

事件：事情发生了并得到处理

事件：事件源.事件类型=事件处理函数

事件处理函数是异步的

这个匿名函数是在事件发生以后，由系统调用

一般事件处理函数没有特定的返回值 , 但是也可以使用return

document.onclick = function () {  
            console.log(666);
            return 
            console.log(777);
        }

事件处理函数的第一个参数表示的是事件对象

事件对象是用户记录事情发生的整个过程

document.onclick = function (a , b) {  
            console.log(a);
            // 事件处理函数只有一个参数
            console.log(b);  // undefined
        }

        document.onclick = function (e) {  
            // 大多数浏览器支持事件处理函数的第一个参数做事件对象
            // console.log(e);

            // 低版本浏览器只能使用event来记录事件对象
            // console.log(event);

            e = e || event ;

            // target目标  --- 具体是由哪个标签触发的
            console.log(e.target);
            // this 指向事件源
            console.log(this);


            console.log(e.clientX);

        }

绑定事件的方式

1 行内js οnclick="fn()"

2 事件绑定 oDiv.onclick = function(){}

3 事件监听 oDiv.addEventListener(类型,事件处理函数) --- 不会覆盖

移除事件

行内js和普通事件绑定都可以通过重新赋值的方式，以覆盖的方式进行移除 null

事件监听的方式，需要写成具名函数才能被移除(注意：移除的时候，需要一个一个的移除) removeEventListener()

        // onclick 重新赋值(任意值都可以)  一般建议写null
        oDiv.onclick = null ;

        function fn2() {  
            console.log(999);
        }


        function fn() {  
            console.log(666);
        }


        // 添加事件监听
        function addEvent(ele , type , cb) {  
            if(window.addEventListener) {
                ele.addEventListener(type , cb)
            } else {
                ele.attachEvent('on' + type , cb)
            }
        }

        // 移除事件监听
        function removeEvent(ele , type , cb) {  
            if(window.removeEventListener) {
                ele.removeEventListener(type , cb)
            } else {
                ele.detachEvent('on' + type , cb)
            }
        }

事件流：

事件冒泡：从里向外

事件捕获：从外向内

主要使用事件冒泡

实现事件捕获的方式

addEventListener(type , fn , true) 第三个参数表示是否支持事件捕获

什么是事件流：

事件流描述的是从页面中接受事件的顺序

有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

阻止事件冒泡

利用事件对象

e.stopPropagation()

e.cancelBubble = true

        oP.onclick = function (e) {  
            e = e || event ;
            // 阻止事件冒泡
            // 主流浏览器的写法
            // e.stopPropagation()
            // 低版本IE取消事件冒泡的方法
            // e.cancelBubble = true ;
            if(e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true ;
            }
            console.log('p');
        }