事件

作者: 樊小勇 | 来源:发表于2019-03-25 10:10 被阅读0次

JavaScript事件01——事件流
事件对象，事件监听，事件冒泡，事件代理
事件总结
Javascript事件系统
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
【事件】事件流
【事件】事件对象
【事件】事件类型
2018-09-10JQuery高级应用
JS事件

js里有许多事件下面简单介绍一下

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button onclick="clickFun1();">
        点击1
    </button><br>
    <button id="btn">
        点击2
    </button><br>
    <input type="text">


    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
    <div id="id4"></div>
</body>
<script>
    function clickFun1(){
        console.log('点击1');
        console.log(this);
        // 这个时候this为window
    }



    var btn = document.querySelector('#btn');
    btn.onclick = function(){
        console.log('点击2')
        console.log(this);
        // 这个时候this为btn
    }


    // 标签事件
    var $input = document.querySelector('input');
    // 获得焦点事件 onfocus
    $input.onfocus=function(){
        console.log('输入框获得焦点')
    }
    // 失去焦点 onblur
    $input.onblur=function(){
        console.log('输入框失去焦点')
    } 

    document.querySelector('#id1').onmouseout=function(){
        console.log('第一个');
    }
    document.querySelector('#id2').onmouseover = function () {
        console.log('第二个');
    }

    /*  前缀加上 on
        keydown - 按下键盘
        keypress -  按键
        keyup - 松开键
        input - 输入事件
        change 输入框内容发生改变
        scroll 滚动事件
        load 一个页面或一幅画完成加载
        mouseout 鼠标移入
        mouseover 鼠标移出
    */
</script>
</html>

事件对象event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件对象</title>
</head>
<body>
    <button id="btn"> 点击</button>
    <input type="text" id="inp">
    <input type="text" name="" id="inp1">
</body>
<script>
    var btn = document.querySelector('#btn');
    btn.onclick=function(){
        console.log(event);
    }
    // 项目里一般用ev简写来代表 event 事件对象
    /* 添加event后可以在控制台看到这个事件的对象具体的内容
        比如在页面什么位置点的等等
        这个事件对象里面表示了事件的详细情况
        由于对象里面有很多详细信息,可以根据详细信息来进行判断
        通过判断可以执行想要达到的效果
    */
    var inp = document.querySelector('#inp'); 
    inp.onchange = function(ev){
        console.log(ev);
    }

    var inp2 = document.querySelector('#inp1');
    inp2.onkeydown = function(ev){
        console.log(ev);
        if (ev.key == 'Enter'){
            alert('提交');
        }
    }

</script>
</html>

事件对象扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件对象的扩展</title>
    <style>
        #out{
            width: 200px;
            height: 200px;
            background: gray;
        }
        #in{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="out">
        <div id="in"></div>
    </div>
</body>
<script>
    document.querySelector('#out').onclick=function(ev){
        console.log(ev);
        console.log('绑定的元素是',ev.currentTarget);// 表示绑定的元素
        console.log('点击的元素是',ev.target);//表示点击的元素
    }
    // 点击大的时候小的也把事件对象打印到控制台了

</script>
</html>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡事件</title>
    <style>
        .ste{
            width: 200px;
            height: 200px;
            background: gray;
        }
        .box{
            width: 100px;
            height: 100px;
            background: green
        }
    </style>
</head>
<body>
    <div class="ste">
        <div class="box">

        </div>
    </div>
</body>
<script>

    $ste=document.querySelector('.ste');
    $ste.addEventListener('click',function(ev){
        alert('点击了ste');
    },false)

    /*  
        冒泡事件触发的条件，父级和子级绑定一样的事件
        点击ste的时候弹出一个'点击了ste'
        但是当点击box的时候,除了弹出'点击了box'外,还会弹出'点击了ste'
        这个现象称为事件冒泡
        从里往外,从子级往父级,以此类推

        事件冒泡：
            1.Dom树
            2.事件流(事件传播)
            3.事件流传播方式
            4.阻止方式even.stop 或 return false
            
    */

    $box=document.querySelector('.box');
    $box.addEventListener('click',function(ev){
        alert('点击了box');
    },false)
</script>
</html>

监听器事件冒泡的阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监听器</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: gray;
        }
        #btn{
            margin: 30px; 
        }
    </style>
</head>
<body>
    <div id="box">
        <button id="btn">
            点击
        </button>
    </div>
    
</body>
<script>
    $btn=document.querySelector('#btn');
    // 三个参数 1.事件名称 2.函数(监听器) 3.事件监听阶段-捕获阶段 冒泡阶段
    // $btn.addEventListener('click',clickFun,false);
    // function clickFun(ev) {
    //         console.log(ev);
    //     }
    /*
        添加点击事件,之前前面有on意思是绑定的意思,而现在add就是绑定的意思,所以不需要加on
        false为冒泡,true为捕获
        冒泡从里往外,比如儿子点击事件发生了,父级元素点击也可以发生
        捕获从外往内,
    */
    $btn.addEventListener('click',function(ev){
        // 阻止事件冒泡  stopPropagation()
        ev.stopPropagation();
        alert('点击了btn');
    },false);

    $box=document.querySelector('#box');
    $box.addEventListener('click',function(ev){
        alert('点击了box');
    },false);
    // 这里会弹出两次,点击按钮的时候.这种现象就叫事件冒泡

</script>
</html>

默认事件的阻止方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阻止默认事件</title>
    <!-- 默认事件,比如a有默认跳转的效果,称为默认事件 -->
</head>
<body>  
    <a href="http://www.baidu.com">百度</a>
</body>
<script>
    var $a = document.querySelector('a');
    $a.addEventListener('click',function(ev){
        // 阻止默认事件  
        ev.preventDefault();
        alert('点击了');
    },false)
</script>
</html>

默认事件和冒泡事件阻止方法总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阻止两个事件</title>
    <style>
        #box{
    width: 200px;
    height: 200px;
    background: gray;
    }
    #btn{
    margin: 30px;
    }
    </style>
</head>
<body>
    <div id="box">
        <button id="btn">
            点击
        </button>
    </div>
    <a href="http://www.baidu.com">百度</a>
</body>
<script>
    /* 
        通过监听器添加事件 
        节点名.addEventListener('事件名称',function(ev){执行语句},false)
        false表示模式为冒泡
        true表示模式为捕获
        ev为事件对象,执行代码里也可以通过事件对象来进行想要的判断
        其中function(){}可以写为 函数名() 然后在外部进行函数名里面的编辑
    */

    // 阻止默认事件a preventDefault()
    $a = document.querySelector('a');
    $a.addEventListener('click',function(ev){
        ev.preventDefault();
        alert('点击了a');
    },false)
    
    // 阻止冒泡事件,在子级里面加 stopPropagation()
    $btn=document.querySelector('#btn');
    $btn.addEventListener('click',function(ev){
        alert('点击了btn');
    },false)
    

    $box=document.querySelector('#box');
    $box.addEventListener('click',function(ev){
        ev.stopPropagation();
        alert('点击了box');
    },false);
</script>
</html>

JavaScript事件01——事件流
大纲：概念（事件、事件流）事件流模型（事件冒泡、事件捕获、DOM事件流）一、概念： 1、事件：事件就是用户或浏览...
事件对象，事件监听，事件冒泡，事件代理
一、事件对象二、冒泡事件：（事件从子元素往父级元素向上触发事件）处理兼容问题：主流浏览器：e.stopPropa...
事件总结
DOM事件主要内容事件流事件注册事件对象事件分类事件代理什么是DOM事件? 事件是某个行为或者触发，比...
Javascript事件系统
本文内容事件基础事件监听方式事件默认行为事件冒泡与事件捕获事件绑定与事件委托事件基础注意：本文不会深...
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
事件处理机制（一）DOM事件流 DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML...
【事件】事件流
1、JavaScript和HTML之间的交互通过事件实现的。2、事件流描述的是从页面中接收事件的顺序。3、IE 和...
【事件】事件对象
触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的额信息。（包括导致事件的元...
【事件】事件类型
DOM3 级事件规定了以下几类事件： UI（User Interface，用户界面）事件，当用户与页面上的元素交互...
2018-09-10JQuery高级应用
JQuery事件 window事件鼠标事件键盘事件表单事件事件注册语法$(对象).type(fn)type...
JS事件
?事件的相关术语事件类型：鼠标事件、键盘事件事件名称： click、dbclick等事件目标：表示与发生事件...