JavaScript基础学习 事件

注册事件

    
    
    
    Document





    传统注册事件
    方法监听注册事件
    
        //  使用传统方法注册事件  后面的事件会覆盖前面的事件
        var btn = document.querySelectorAll('button');
        btn[0].onclick = function() {
            alert('hi~');
        }
        btn[0].onclick = function() {
            alert('hello~');
        }

        // 使方法监听注册事件   addEventListener()
        //  里面的事件类型是字符串  需要加引号，而且不带on
        //  同一个元素 同一个事件可以添加多个监听器(事件处理程序)
        btn[1].addEventListener('click', function() {
            alert(22);
        })
        btn[1].addEventListener('click', function() {
            alert(33);
        })
    

删除事件

    
    
    
    Document

    
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    



    
1
    
2
    
3
    
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(1111);
            // 传统方法移除事件
            divs[0].onclick = null;
        }


        divs[1].addEventListener('click', fn);

        function fn() {
            alert(2222);
            //  removeEventListener  删除事件
            divs[1].removeEventListener('click', fn);
        }
    

事件对象

    
    
    
    Document

    
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    



    
123
    
        var div = document.querySelector('div');
        // div.onclick = function(event) {
        //     console.log(event);
        // }


        //官方解释: event对象代表事件的状态,比如键盘按键的状态鼠标的位置、鼠标按钮的状态。
        // 事件发生后, 跟事件相关的一系列信息数据的集合都放到这个对象里面, 这个对象就是事件对象 event, 它有很多属性和方法。

        div.addEventListener('click', function(e) {
            console.log(e);
        });
    

e.target与this的区别

    
    
    
    Document

    
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
        }
    




    

        123
    


    

        
1
        
2
        
3
    

    
        // e.target 返回的是触发事件的对象   this返回的是绑定事件的对象
        // e.target 点击哪个就返回哪个    this 哪个元素绑定了事件就返回谁

        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target); //
 123
            console.log(this); //
 123
        })


        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            console.log(e.target); //

            console.log(this); //

        })
    

阻止默认行为(事件)

    
    
    
    Document
    
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
        }
    






    
123
    百度
    
        // e.type返回事件的类型
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.type);
        })
        div.addEventListener('mouseover', function(e) {
            console.log(e.type);
        })
        div.addEventListener('mouseout', function(e) {
            console.log(e.type);
        })

        // e.preventDefault();  阻止默认事件(例如下图的跳转事件)  或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault();
        })
    

阻止事件冒泡

    
    
    
    Document
    
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    



    

        
son儿子
    
    
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            //  这里有停止冒泡的方法，就不会弹出father和document的对话框
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    

事件委托

    
    
    
    Document





    

        
JavaScript学习中
        
JavaScript学习中
        
JavaScript学习中
        
JavaScript学习中
        
JavaScript学习中
    
    
        // 之前学习如果想要完成点击每个li都能进行弹出对话框，是需要for循环给每个li绑定事件

        //  但我们通过事件委托给父节点就可以完成要求的功能

        //事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert(2233);
            e.target.style.backgroundColor = 'pink';
        })