JavaScript-day15------＞主要内容包含有伪数组；事件等相关内容。_var p = document.getelementsbytagname('p'); consol-CSDN博客

本文链接：https://blog.csdn.net/qq_52429998/article/details/122134528

本文详细介绍了JavaScript中的伪数组类型，如Array、Arguments、NodeList和HTMLCollection，并探讨了如何将它们转换为真正的数组。接着，深入讨论了事件处理，包括事件处理函数的异步性质、事件对象、事件绑定和移除方式，以及事件冒泡和捕获的概念。此外，还提到了阻止事件冒泡的方法和事件委托技术，以优化性能。

摘要由CSDN通过智能技术生成

1.伪数组

数组         Array

数组2          Arguments

数组3          NodeList

数组4          HTMLCollection

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

如何把伪数组转真数组

    <p></p>
    <p></p>
    <p></p>

    <script>
        var arr = new Array() ;
        consloe.log(arr) ;

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

        }
        fn()

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

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

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

        console.log(arr) ;

        arr.push('a') ;
        console.log(arr);
    </script>

2.事件

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

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

事件处理函数是异步的

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

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

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

    return
    console.log(777);
}

3.事件处理函数的参数-事件对象

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

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

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.cilentX) ;

}

4.绑定事件的方法

        绑定事件的方式

        行内js οnclick="fn()"

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

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

<div class="a" onclick="fn(6)">aaaaaaaa</div>

<script>

    var oDiv = document.querySelector('.a') ;

    oDiv.onclick = function () {
        console.log(1) ;
    }
    //后面的时间覆盖前面的
    oDiv.onclick = funcction () {
        console.log(2);
    }

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

//不会覆盖
oDiv.addEventListener('click' , function () {
    console.log(4);
})

oDiv.addEventListener('click' , function () {
    console.log(5);
})

//在IE中
oDiv.attachEvent('onclick' , function () {
    console.log(6);
})

    fn(oDiv , 'click' , function) {
        console.log(4);
    }
    
    function fn(ele , type , cb) {
        //先判断window对象下是否存在这个方法
        if(window.addEventListener) {
            ele.addEventListener(type , cb);
        }else{
            ele.attachEvent('on' + type , cb);
        }
    
    }