JavaScript事件机制

最新推荐文章于 2022-11-12 21:52:01 发布

今天晚上一定要早睡

最新推荐文章于 2022-11-12 21:52:01 发布

阅读量201

点赞数

分类专栏： DOM 文章标签：事件处理机制

本文链接：https://blog.csdn.net/qq_48192192/article/details/120282947

版权

DOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件机制

简介
事件三要素
事件流
事件处理程序
dom0级、dom1级、dom2级事件
事件对象event
事件绑定
- 传统方式事件绑定
- 方法监听注册方式
事件解绑
- 传统方式解绑事件
- 事件监听解绑
事件代理（委托）
取消事件冒泡（阻止事件传播）
事件类型

简介

JavaScript与HTML之间的交互是通过事件实现的。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件是可以被JavaScript侦测到的行为。
网页中每个元素都可以产生某些可以触发的JavaScript事件。

为元素添加事件响应函数，当执行相应的操作的时候会执行该函数。

事件三要素

事件目标/事件源：发生的事件被触发的对象（浏览器要去监听的元素）
事件处理程序：处理相应事件的函数（浏览器在事件类型发生的时候去执行处理的函数）
事件对象/类型：与特定事件相关且包含有关事件详细信息的对象（如何触发，触发事件）

<button id='btn' > 唐伯虎 </button>
<script>
	var btn = document.getElementById('btn');
	btn.onclick=function(){
		alert('点秋香');
	}  //btn 为事件源； onclick 为事件类型；function 为事件处理程序
</script>

执行事件的步骤：
1.获取事件源
2.绑定事件
3.添加事件处理程序

事件流

事件流是指：从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

捕获>触发>冒泡

事件捕获：由网景最早提出，不太具体的节点（DOM顶层节点）更早接收事件，逐级向下传播，具体的节点到最后接收事件（从外到内）
事件冒泡：由IE最早提出，事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点（DOM最顶层节点）（从内往外）（IE8以及更早版本只支持事件冒泡。）

“DOM2级事件”规定了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。
事件捕获：document->html->body->div
处理目标：事件处理
事件冒泡：div->body->html->document

注意

JS代码只能执行捕获或者冒泡其中一个阶段；
onclick和attachEvent只能得到冒泡阶段；
addEventListtener(type,listener[,useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认为false）,表示在实际冒泡阶段调用事件处理程序。
实际开发中很少使用事件捕获，更关注事件冒泡

有些事件没有冒泡，如onblur ,onfocus ,onmouseenter ,onmouseleave

 <div class="father">
         <div class="son">son盒子</div>
     </div>
     <script>
         // dom 事件流 三个阶段
         // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
         // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
         // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
         // var son = document.querySelector('.son');
         // son.addEventListener('click', function() {
         //     alert('son');
         // }, true);
         // var father = document.querySelector('.father');
         // father.addEventListener('click', function() {
         //     alert('father');
         // }, true);
         // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 
          son -> father ->body -> html -> document
         var son = document.querySelector('.son');
         son.addEventListener('click', function() {
             alert('son');
         }, false);
         var father = document.querySelector('.father');
         father.addEventListener('click', function() {
             alert('father');
         }, false);
         document.addEventListener('click', function() {
             alert('document');
         })
     </script>

事件处理程序

事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序；
事件处理程序以’on’开头的（onclick）

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。

缺点：1)时差问题，用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行的条件。2)这种扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。3)HTML与JavaScript代码紧密耦合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a1{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        #a2 {
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="a1">
        <div id="a2"></div>
    </div>
    <! -- onclick可以当做属性，值与相应处理事件的程序同名-->
    <button onclick='test()'>按钮1</button>   
    <button id='btn2'>按钮2</button>
    <! -- 当事件函数非常简短时，可以直接写在HTML代码中  -->
    <button onclick='alert(333)'>按钮3</button> 

    <script>
        function test(){   // onclick可以当做属性,这里写同名函数
            console.log('btn1');  
        }
        var btn2=document.getElementById('btn2')
        btn2.onclick=function(){
            console.log('btn2')
        }
        var a1=document.getElementById('a1'); 
        var a2=document.getElementById('a2');
        a1.onclick=function(){
            console.log(111);
        }
        a2.onclick=function(){
            console.log(222); // 当里层触发时，外层也会触发(先触发里层，再触发外层)
        } 
    </script>
</body>
</html>

dom0级、dom1级、dom2级事件

这里所指的DOM为针对HTML文档的一个API，0-2级为对应的版本。
1998年10月W3C指定了DOM1规范，之前的IE规范被称为DOM0，后来W3C把DOM1升级为DOM2，DOM2级将属性升级为队列，更符合我们编程的逻辑。
区别：主要体现在事件处理方面
在DOM0级绑定事件中，this指向currentTarget(当前目标)【都是】
在DOM2级非IE9以下绑定事件中，this指向currentTarget(当前目标)
在DOM2级IE9以下绑定事件中，this指向window

DOM0中不允许重复定义2个相同的事件，而DOM2中可以通过addEventListener ()来实现

DOM0中，一个元素的同一个事件不能重复触发，后者的函数操作会覆盖前者；
可以通过引用外部函数实现一次触发时进行多种操作

<script>
		var a1=document.getElementById('a1'); 
			a1.onclick=function(){
            console.log(111);
        }
        a1.onclick=function(){
            console.log(1111);  //事件不会重复触发，后者会覆盖前者
        }
        //实现同一元素在事件触发时执行多种操作
        a1.onclick=function(){
            f1();
            f11(); //引用已经定义好的函数，在事件一次触发时执行
        }
        function f1(){
            console.log(111);
        }
        function f11(){
            console.log(1111);
        }
</script>

需要注意的是IE8以前也有DOM2,比如上面的addEventListener ()方法在IE中则是attachEvent()，IE8以后也可以使用addEventListener ()
所以在项目中，我们可能做一些需要兼容，当然如果你不关心可以不做：

if(typeof btn.addEventListener ==='function'){
btn.addEventListener('click',fn);
}elseif(typeof btn.attachEvent ==='function'){   btn.attachEvent('onclick',fn)
}else{   
btn.onclick=function(){// do something}
}

dom0级方法制定的事件处理程序被认为是元素的方法，因此这个时候事件处理程序是在元素的作用域中运行，this指向当前元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="myul">
        <li>《听妈妈的话》</li>
        <li>《喜羊羊与灰太狼》</li>
        <li>《猪猪侠》</li>
    </ul>
    <script>
        //ul元素中有三个Li元素，点击li元素，该背景元素变为黄色
        var lis=document.getElementsByTagName('li');
        var lis_length=lis.length;
        for(var i=0;i<lis_length;i++){
             lis[i].onclick=function(){
                 this.style.backgroundColor='yellow';
             }
         }
         //this指代当前元素li，需要设置的是li的样式，可以直接使用this指代
         
        //在ul中增添新元素
        var ul=document.getElementById('myul');
        var t=document.createTextNode('《巴啦啦小魔仙》') //新添加的元素没有之前元素的触发操作
        var li =document.createElement('li');
        li.appendChild(t);
        ul.appendChild(li);
        //新增的元素没有原子元素的触发效果，可以通过给父元素添加使所有子元素有同样的触发效果
        ul.onclick=function(e){  //给父元素添加触发，则所有子元素（包括新添加的元素）都有触发操作
            e.target.style.backgroundColor='yellow';
            //此时this指代的是ul，不可以直接使用this来改变样式
        }
    </script>
</body>
</html>

事件对象event

event对象代表事件的状态，写到监听函数的小括号中，当做形参看
事件对象只有有了事件才会存在，是系统自动创建的，不需要我们传递参数
事件对象是事件一系列相关数据的集合，有很多属性和方法
事件对象可以自己命名，比如event，evt，e
事件对象也有兼容性问题：ie678 通过window.event

<script>
		//也可以不使用this，使用event对象进行事件代理         
        for(var i=0;i<lis_length;i++){
            lis[i].onclick=function(e){
                e.target.style.backgroundColor='yellow';
            }
        }
</script>

常见属性和方法：
e.target 返回触发事件的对象
e.type 返回事件的类型
e.preventDefault() 阻止默认事件（默认行为），不让链接跳转或不让按钮提交
e.cancelable 是否取消事件的默认行为
e.currentTarget 返回绑定事件的对象
e.stopPropagation() 阻止事件冒泡

<script>
		//在ul中增添新元素
        var ul=document.getElementById('myul');
        var t=document.createTextNode('《巴啦啦小魔仙》') //新添加的元素没有之前元素的触发操作
        var li =document.createElement('li');
        li.appendChild(t);
        ul.appendChild(li);
        //新增的元素没有原子元素的触发效果，可以通过给父元素添加使所有子元素有同样的触发效果(事件代理）
        ul.onclick=function(e){  //给父元素添加触发，则所有子元素（包括新添加的元素）都有触发操作
            e.target.style.backgroundColor='yellow';
            //此时this指代的是ul，不可以直接使用this来改变样式
            e.preventDefault(); //取消事件默认行为,使链接不跳转，使按钮不提交
            e.stopPropagation();//阻止冒泡
            
		    console.log(e); //<li></li>
		    console.log(e.bubbles);//是否冒泡
		    console.log(e.cancelable);//是否取消事件的默认行为
		    console.log(e.currentTarget);//绑定事件的那个元素（和this相似），有兼容性 ul
		    console.log(e.eventPhase);//事件的阶段
		    console.log(e.target);//实际触发事件的元素 li
		    console.log(e.type);//事件的类型 click

        }
</script>

e-target 和 this :
e-target返回的是触发事件的对象（元素）；this返回的是绑定事件的对象（元素）

 <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget); //绑定事件的对象（相当于this）
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
        })

事件绑定

给元素添加事件成为注册事件或绑定事件
注册事件有两种方式：传统方式和方法监听注册方式

传统方式事件绑定

使用以on开头的事件

<button onclick="alert('hi')"></button>
或
<button></button>
button.onclick=function(){}

特点：注册事件的唯一性
（同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数）

方法监听注册方式

W3C推荐方式
addEventListener(要绑定的事件名，作为事件处理的函数，false/true) ;
事件前不用加on，
事件发生时会调用该监听函数，
false(默认)为冒泡阶段调用事件处理程序，true为捕获阶段调用事件处理函数

addEventListener对任何DOM都是有效的，而onclick仅限于HTML

IE8之前不支持此方法，可以使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器（按注册的顺序依次执行）
DOM2可以通过事件监听器addEventListener（）同时触发一种事件的多种函数;

事件绑定：

<script>
		a1.addEventListener('click',function(){   //DOM2 事件监听器，可以同时触发多种函数,事件监听器事件不用加on
            console.log(111);  
        },false);  //冒泡阶段，从里到外 （默认为false，冒泡阶段触发）
        a1.addEventListener('click',function(){
        	console.log(1111);
        	},false);
        function f3(){
            console.log(11111);
        }
        a1.addEventListener('click',f3(),false);  
        
</script>

事件解绑

传统方式解绑事件

element.on事件=null;

事件监听解绑

removeEventListener（要删除的事件名，作为事件处理的函数，false/true）；
若添加事件时如果使用匿名函数将无法删除。

<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var div=document.querySelectorAll('div');
        divs[0].onclick=function(){
            alert(11);
            //传统方式解绑
            divs[0].onclick=null;
        }
        divs[1].addEventListener('click',fn);
        function fn(){
            alert(22);
            //移除事件监听，将click事件从fn函数中移除
            divs[1].removeEventListener('click',fn);
        }
    </script>

<script>
		function f2(){
            console.log(1111);
        }
        a1.addEventListener('click',f2(),false);  
        a1.removeEventListener('click',f2(),false);  
        //事件监听器解绑，可能无法识别匿名函数
</script>

<script>
		a1.addEventListener('click',function(){   
		//DOM2 事件监听器，可以同时触发多种函数,事件监听器事件不用加on
            console.log(111);
        },false);
        a2.addEventListener('click',function(){   
        //DOM2 事件监听器，可以同时触发多种函数,事件监听器事件不用加on
            console.log(222);  //冒泡阶段，从里到外，默认为false，冒泡阶段触发
            e.stopPropagation(); //阻止冒泡
        },false);  
        // 222   111
        //a2为a1的子元素，触发a2后也会触发a1，由于是在冒泡阶段触发的，则从内到外，先触发a2后触发a1;
        
</script>

<script>
		a1.addEventListener('click',function(){   
		//DOM2 事件监听器，可以同时触发多种函数,事件监听器事件不用加on
            console.log(111);
        },true);
        a2.addEventListener('click',function(){   
        //DOM2 事件监听器，可以同时触发多种函数,事件监听器事件不用加on
            console.log(222);  //捕获阶段，从外到里，true时为捕获阶段触发
        },true);
        // 111   222
        //a2为a1的子元素，触发a2后也会触发a1，由于是在捕获阶段触发的，则从外到内，先触发a1后触发a2;
</script>

事件代理（委托）

事件冒泡中
不用给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子元素。
作用：只操作一次DOM，提高了程序的性能。

将事件处理函数绑定在当前元素的父元素上，当点击当前元素的时候，父元素上绑定的事件处理函数就可以执行。
可以通过event.target来获取触发事件的对象：当前元素；
通过event.currentTarget（或者this）获取事件处理函数绑定的对象：父元素。

<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

取消事件冒泡（阻止事件传播）

e.stopPropagation() 阻止事件冒泡
有兼容性问题

//标准写法
e = e || window.event;
if(e.stopPropagation) {
	e.stopPropagation();
} else {
	e.cancelBubble = true;//（兼容IE）
}

事件类型

load 元素加载完毕后触发，适用于window或者文件加载
unload 当页面完全卸载后在window上触发，当所有框架都卸载后在框架集中触发
select 当用户选择文本框（,）中的一个或多个字符时
change 当控件的值发生更改时触发
resize 当浏览器窗口被调整到一个新的高度或宽度时触发
scroll 当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单
blur 元素失去焦点时触发
focus 元素获得焦点的时候触发，不支持冒泡
focusin 与focus等价，支持冒泡
focusout 与blur等价，支持冒泡
click 点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown.mouseup事件时才会触发click事件
dbclick 双击主鼠标按钮时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var a1=document.getElementById('a1'); 
            console.log(a1);
        }
        window.onunload=function(){
            console.log(1111);
        }
        window.onresize=function(){
            console.log('我被改变l');
        }
        window.onscroll=function(){
            console.log('我被拖动了')
        }
    </script>
</head>
<body>
    <div id="a1" style="height:20000px" ></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="s1">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">西安</option>
    </select>
    <input type="text" value="hello" id="t1">
    <div style="height: 100px;width: 100px;background-color: red;" id="d1">
        <div id="d2" style="background-color: green;width: 50px;height: 50px;"></div>
    </div>

    <script>
        var s1=document.getElementById('s1');
        s1.onchange=function(e){
            console.log(e.target.value)
        }
        var t1=document.getElementById('t1');
        t1.onselect=function(e){
            console.log(e.target.value)
        }
        t1.onblur=function(e){
            console.log('失去了焦点')
        }
        t1.focus();  //自动获取焦点
        t1.onfocus=function(e){
            console.log('获取了焦点')
        }
        var d1=document.getElementById('d1');
        d1.onmousedown=function(){
            console.log('鼠标按下了')
        }
        d1.onmousemove=function(){
            console.log('鼠标在移动')
        }
        d1.onmousemove=function(e){
            console.log(e.pageX,e.pageY)
        }
        d1.onmouseenter=function(){
            console.log('移入')
        }
        d1.onmouseleave=function(){
            console.log('移出')
        }
        d1.onmouseover=function(){
            console.log('移入')    //冒泡
        }
        d1.onmouseout=function(){
            console.log('移出')   //冒泡 （当有子元素时移入子元素也会触发）
        }
    </script>
</body>
</html>

常用的鼠标事件

mousedown 任意鼠标按钮按下时触发
mouseup 释放鼠标按钮触发
mousemove 鼠标在元素内部移动的时候触发
mousewheel 滚轮事件
mouseenter 鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素）
mouseleave 在位于元素上方的鼠标光标移动到范围外时触发，不冒泡（不支持子元素）
mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发（支持子元素）
mouseout 位于元素上方的鼠标光标移入另外一个元素中时触发（支持子元素）

禁止鼠标右键菜单

document.addEventListener('contextmenu', function(e) {
       e.preventDefault();
})

禁止选中文字

document.addEventListener('selectstart', function(e) {
            e.preventDefault();
 })

鼠标事件对象

MouseEvent

可视区坐标位置

clientX,clientY 事件发生时，鼠标指针在可视区中的水平和垂直坐标位置
页面坐标位置

pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标（页面滚动后值发生改变，相对于页面文档最上方）
页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等

屏幕位置

screenX,screenY

 <style>
 body {
     height: 3000px;
 }
 </style>
 <script>
         // 鼠标事件对象 MouseEvent
         document.addEventListener('click', function(e) {
             // 1. client 鼠标在可视区的x和y坐标
             console.log(e.clientX);
             console.log(e.clientY);
             console.log('---------------------');
 
             // 2. page 鼠标在页面文档的x和y坐标
             console.log(e.pageX);
             console.log(e.pageY);
             console.log('---------------------');
 
             // 3. screen 鼠标在电脑屏幕的x和y坐标
             console.log(e.screenX);
             console.log(e.screenY);
 
         })
     </script>

跟随鼠标的天使

    <style>
        img{
            position: absolute;
        }
    </style>
    <img src="images/angel.gif" alt="">
    <script>
        var img=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            //鼠标没移动1px，就触发事件
            //鼠标的位置
            var x=e.pageX;
            var y=e.pageY;
            console.log(x,y);
            //top和left必须加单位
            //将鼠标的位置赋给图片
            img.style.left=x-50+'px';
            img.style.top=y-40+'px';
        })
    </script>

常见的键盘事件

keydown 按下键盘任意键时触发，按住不放会重复触发此事件
keypress 按下键盘字符键时触发，按住不放会重复触发此事件，不能识别功能键
keyup 释放键盘上键时触发

三个事件的执行顺序：keydown ，keypress ，keyup

键盘事件对象

keyCode 触发键盘事件的键对应的ASCII值（1-> 49 a ->65）
keyup和keydown事件不区分大小写，因此触发事件对象为大写和小写字母对应ASCII相同
keypress事件区分字母大小写 a ->97 A ->65
可以利用ASCII判断用户按下了哪个键

按键后定位到输入框

<input type="text">
    <script>
        //按下s键光标自动定义到搜索栏中
        var search=document.querySelector('input');
        document.addEventListener('keyup',function(e){
            if(e.keyCode===83){
                search.focus();
            }
        })
    </script>

输入时输入框放大显示

* {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
<div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
    		// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con=document.querySelector('.con');
        var input=document.querySelector('input');
        //不能使用keypress和keydown
        input.addEventListener('keydown',function(){
            if(this.value==''){
                con.style.display='none';
            }else{
                con.style.display='block';
                con.innerHTML=this.value;
            }
        })
        //失去焦点，隐藏盒子
        input.addEventListener('blur',function(){
            con.style.display='none';
        })
        //获得焦点，有内容时显示盒子
        input.addEventListener('focus',function(){
            if(this.value!==''){
                con.style.display='block'
            }
        })
    </script>

今天晚上一定要早睡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件机制

事件机制简介事件流事件处理程序dom0级、dom1级、dom2级事件event对象事件绑定事件解绑简介JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。为元素添加事件响应函数，当执行相应的操作的时候会执行该函数。事件三要素：事件目标/事件源：发生的时间与之相关联或与之相关的对象（浏览器要去监听的元素）时间处理程序：处理相应事件的函数（浏览器在事件类型发生的时候去执行处理的函数）事件对象：与特定事件相关且包含有关事件详细信息的对象事件
复制链接

扫一扫