专栏首页cwl_Java前端基础-事件

前端基础-事件

第2章 事件

2.1 什么是事件

一种 触发—响应 的机制; 用户的行为 + 浏览器感知(捕获)到用户的行为 + 事件处理程序

事件三要素:

  • 事件源:(被)触发事件的元素
  • 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
  • 事件处理程序:事件触发后要执行的代码(函数形式)

2.2 事件绑定

  • 行内方式绑定(元素属性)
<body>
    <input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>

<body>
    <input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

onclick 其实就是html元素的一个属性,而属性的值需要是 一段可执行的JS代码

  • 动态绑定 (节点对象属性)
<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert(4);
    }
</script>

获取节点对象,然后 修改 节点对象属性 onclick 的值,值是一个 匿名函数 即可;

以上两种事件绑定方式,需要在事件名称前加 on ;

  • 事件监听(节点对象方法)
<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        alert(5);
    });
</script>

每一个节点对象都提供了 addEventListener 方法,这个方法可以给选中的节点添加指定类型的事件及事件处理程序;

  • 移除事件监听
<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    function f(){
        alert(5);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click',f);
    btn.removeEventListener('click',f);
</script>

注意: removeEventListener方法移除的监听函数, 必须与对应的addEventListener方法的参数完全一致, 而且必须在同一个元素节点,否则无效。

2.3 三种事件绑定比较

this关键字 在JavaScript中,每一个函数的内部都存在一个this关键字,其随着运行环境的不同,其指向也是不同的。

<body>
    <p id="t">ttttt</p>
</body>
<script>
    var d = document.getElementById('t');
    d.onclick = function(){
		//this指代本对象 就是 d 
        console.log(this);
    }
</script>

将上述代码的动态绑定,改为行内绑定:

<body>
    <p id="t" onclick="f()">ttttt</p>
</body>
<script>
    function f(){
        console.log(this); //window对象
    }
</script>

由此可知: 行内绑定,其事件处理程序内部的this指向了全局的window对象。 动态绑定,其事件处理程序内部的this指向了当前正在操作的dom对象。

需求:同一个元素的同一个事件,绑定多个处理函数:

<body>
    <!--行内绑定,谁在前谁执行-->
    <p id="t"  onclick="t()" onclick="f()">ttttt</p>
</body>
<script>
    function f(){
        alert(1);
    }
    function t(){
        alert(2);
    }
</script>
<body>
    <p id="t" >ttttt</p>
</body>
<script>
    //动态绑定,后边的执行函数会将前面的覆盖掉
    var d = document.getElementById('t');
    d.onclick = function(){
        alert(1);
    }
    d.onclick = function (){
        alert(2);
    }
</script>
<body>
    <p id="t" >ttttt</p>
</body>
<script>
    var d = document.getElementById('t');
    function f1() {
        console.log(this);
    }
    d.addEventListener('click', f1, false);
    d.addEventListener('click', function(){console.log('f2');}, false);
</script>

总结: 第一种 “HTML标签的on-属性”,违反了HTML与JavaScript代码相分离的原则;处理函数中 this 指向的window对象; 第二种 “Element节点的事件属性” 的缺点是,同一元素同一个事件只能定义一个监听函数,也就是说,如果定义两次onclick属性,后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象; 第三种:addEventListener方法可以针对同一个元素的同一个事件,添加多个监听处理函数。处理函数中的 this 指向的也是选中的元素;

2.4 事件类型

事件类型一览表:

https://developer.mozilla.org/zh-CN/docs/Web/Events

2.3.1 页面事件(资源事件)

事件名称

何时触发

load

一个资源及其相关资源已完成加载。

<body onload="f1()" >
</body>
<script>
    function f1(){
        alert('f1');
    }
</script>

2.3.2 焦点事件

事件名称

何时触发

focus

元素获得焦点

blur

元素失去焦点

<body>
    <input type="text" id="t" value="请输入用户名" onfocus="f1()" onblur="f2()">
</body>
<script>
    function f1(){
        document.getElementById('t').value = '';
    }
    function f2(){
        var v = document.getElementById('t').value;
        alert(v);
    }
</script>

2.3.3 鼠标事件

事件名称

何时触发

mouseenter

指针移到有事件监听的元素内

mouseover

指针移到有事件监听的元素或者它的子元素内

mousemove

指针在元素内移动时持续触发

mousedown

在元素上按下任意鼠标按钮

mouseup

在元素上释放任意鼠标按键

click

在元素上按下并释放任意鼠标按键

dblclick

在元素上双击鼠标按钮

contextmenu

右键点击 (右键菜单显示前).

mouseleave

指针移出元素范围外(不冒泡)

mouseout

指针移出元素,或者移到它的子元素上

select

文本被选中(input标签、textarea标签)

copy

元素内容被拷贝时

 <body>
    <div id="d" style="width:200px;height:200px;border:1px solid red">
        来啊
    </div>
</body>
<script>
    var d = document.getElementById('d');
    //当鼠标悬浮时触发
    d.onmouseover = function(){
        console.log('来了?');
    }
	//当鼠标离开时触发
    d.onmouseout = function(){
        console.log('不要啊');
    }
	//当鼠标按下时触发
    d.onmousedown = function(){
        console.log('用力啊');            
    }
	//当鼠标弹起时触发
    d.onmouseup = function(){
        console.log('再来');            
    }
	//当鼠标移动时触发
    d.onmousemove = function(){
        console.log('别乱动');            
    }
    
    //当点击右键时
    d.oncontextmenu = function(){
        console.log('你想干什么?');
        return false;
    }
	
    // 当复制内容时
    d.oncopy = function(){
        console.log('你敢复制我?');
        return false;
    }
    
</script>

2.3.4 键盘事件

事件名称

何时触发

keydown

按下任意按键

keypress

除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)

keyup

释放任意按键

<body>
    <input type="text"  value="" id="t">
</body>
<script>
    var d = document.getElementById('t');
    //当键盘按下时触发
    d.onkeydown = function(){
        console.log('推到?');
    }
    //当键盘按下时触发
    d.onkeypress = function(){
        console.log('撩起2?');
    }
    //当键盘弹起时触发
    d.onkeyup = function(){
        console.log('撩起?');
    }
</script>

2.3.5 form表单事件

Event Name

Fired When

reset

点击重置按钮时 (<input type=’reset’ value=’重置’ />)

submit

点击提交按钮

<body>
    <form id="f" action="1.2.5.php">
        姓名:<input type="text" name="" value=""> <br>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </form>
</body>
<script>
    var d = document.getElementById('f');
	//当表单提交时触发
    d.onsubmit = function(){
        alert('t');
    }
	//当表单重置时触发
    d.onreset = function(){
        alert('re');
    }
</script>

2.3.6 内容变化事件

change: 当内容改变且失去焦点时触发 (存储事件) input : 当内容改变时触发 (值变化事件)

<body>
    <input type="text" id="t" value="">
</body>
<script>
    var d = document.getElementById('t');
    //当内容改变且失去焦点时触发
    d.onchange = function(){
        console.log('t');
    }
    //当内容改变时触发
    d.oninput = function(){
        console.log('in');
    }
</script>

2.4 事件的传播

三个包裹着的DIV,都绑定了点击事件,问: 当点击 div1 时,会发生什么现象?

<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        div{padding: 40px}
        #div3{width: 300px;height: 300px;background-color: red}
        #div2{width: 200px;height: 200px;background-color: yellow}
        #div1{width: 100px;height: 100px;background-color: blue}
    </style>
</head>
<body>
    <div id="div3">3
        <div id="div2">2
            <div id="div1">1</div>
        </div>
    </div>
</body>
<script>
    var d1 = document.getElementById('div1');
    var d2 = document.getElementById('div2');
    var d3 = document.getElementById('div3');

    d1.onclick = function(){
        alert('1');
    }
    d2.onclick = function(){
        alert('2');
    }
    d3.onclick = function(){
        alert('3');
    }
</script>

当点击div1时,触发 事件1,但是,紧跟着,事件2和事件3也被触发了;

这种现象,我们称为 事件冒泡

在JS中当一个事件发生以后,它会在不同的DOM节点之间传播。 这种传播分成三个阶段: 第一阶段:从window对象传导到目标节点,称为 捕获阶段。 第二阶段:在目标节点上触发,称为 目标阶段。 第三阶段:从目标节点传导回window对象,称为 冒泡阶段

事件传播的最上层对象是window; 事件的传播顺序,在捕获阶段依次为window、document、html、body、div; 在冒泡阶段依次为div、body、html、document、window。

注意: 三种事件绑定方式全部 默认 监听冒泡阶段事件;

2.5 改变事件触发的阶段

想让事件监听在捕获阶段,只能通过 addEventListener 方法的进行设置:

<script>
    var d1 = document.getElementById('div1');
    var d2 = document.getElementById('div2');
    var d3 = document.getElementById('div3');
    d1.addEventListener('click',function(){
        alert('m1');
    });//目标阶段触发

    d2.addEventListener('click',function(){
        alert('b2');
    },true);//捕获阶段触发

    d3.addEventListener('click',function(){
        alert('b3');
    },true);//捕获阶段触发


    d1.addEventListener('click',function(){
        alert('mm1');
    });//目标阶段触发

    d2.addEventListener('click',function(){
        alert('p2');
    });//冒泡阶段触发
	d3.addEventListener('click',function(){
        alert('p3');
    },false);//冒泡阶段触发
</script>

2.6 案例

为选中的的元素绑定事件

<body>
<input type="button" value="按钮" id="btn" />
<script>
  //根据id获取元素
  document.getElementById("btn").onclick=function () {
      alert("哈哈,我又变帅了");
  };
</script>
</body>

一次性事件案例(下载按钮点一次则失效)

<body>
    <input type="button" id="btn" value="下载">
</body>
<script>
    var btn = document.getElementById('btn');
    function f(){
        alert(123);
        btn.removeEventListener('click',f);
    }
    
    btn.addEventListener('click',f);
</script>

点击每个图片弹出对话框

<body>
<img src="images/1-small.jpg" alt="" />
<img src="images/2-small.jpg" alt="" />
<img src="images/3-small.jpg" alt="" />
<script>
  //点击每个图片都可以弹出对话框
  //根据标签名字获取元素,分别注册点击事件,分别添加事件处理函数
  var imgObjs=document.getElementsByTagName("img");
  //遍历
  for(var i=0;i<imgObjs.length;i++){
    //为每个图片元素注册点击事件,添加事件处理函数
    imgObjs[i].onclick=function () {
      alert("啊,我被点击了");
    };

  }
</script>

</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JDK1.9-数据结构

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • 快速学习-Mybatis 的参数深入

    我们在上一章节中已经介绍了 SQL 语句传参,使用标签的 parameterType 属性来设定。该属性的取值可以是基本类型,引用类型(例如:String 类型...

    cwl_java
  • 速读原著-TCP/IP(SMTP: 简单邮件传送协议)

    电子邮件(e - m a i l)无疑是最流行的应用程序。 [Caceres et al.1991]说明,所有T C P连接中大约一半是用于简单邮件传送协议 S...

    cwl_java
  • 分析midea0978的《一个C#算法分析求解》(二)

    一、准备工作 首先处理以下Calc函数,以方便查看。其实就是变量重命名工作,此时多亏了VS2005的帮忙。 输入字符串str,输入是字节数组引用; i...

    大石头
  • js判断方法是否存在

    似水的流年
  • VR开发-分享平台的建设(涉及第三方登陆)

    1、跳转APP,例如我们在一些应用上通过分享至朋友圈或者分享至微博等。 2、二维码扫描分享,二维码中带有分享的信息。 但是怎么在Unity中进行分享呢?

    雷潮
  • 【C语言编程锦囊·连载42】scanf函数的返回值是什么?

    问题阐述 scanf函数是用于数据输入的,输入变量的值被改变,那么scanf函数本身是否有返回值,返回值是什么意义呢? 专家解答 scanf函数的返回值很少有人...

    企鹅号小编
  • JQuery事件处理

    Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

    苦咖啡
  • 【Bengio一人署名论文】提出“意识RNN”,用4页纸进军通用AI

    【新智元导读】深度学习三巨头之一的Yoshua Bengio昨天在arXiv上传论文,署名只有他一人。Bengio在文中提出了一种“意识先验”,认为在现有模型和...

    新智元
  • react入门(四):组件生命周期

    componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDid...

    柴小智

扫码关注云+社区

领取腾讯云代金券