文档章节

JavaScript零基础入门——(十三)JavaScript的事件

JandenMa
 JandenMa
发布于 2018/07/01 17:02
字数 919
阅读 56
收藏 1

JavaScript零基础入门——(十三)JavaScript的事件 

大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了一些JavaScript的事件,这节课,我们一起来认识一下JavaScript的事件。

在JavaScript中,我们通过event对象来获取事件的详细信息,如键盘按键、鼠标位置等。但在部分浏览器上,是不支持event对象的,我们可以通过方法参数接收event来解决,但是这种方法在IE6-8又是不兼容的。不用担心,我们讲过或逻辑,可以用或逻辑解决,如下:

document.onclick=function(e){
    var ev = e||event;
}

在JS基础中,事件主要是指HTML事件、鼠标事件和键盘事件,我们分别来说一说。

HTML事件,我们常用的有以下几种:

  • onload——页面加载后触发
  • onunload——页面释放时触发
  • onfocus——元素获得焦点时触发
  • onblur——元素失去焦点时触发
  • onchange——用户改变文本框或文本域内容时触发
  • onresize——窗口或框架尺寸被改变时触发

鼠标事件,我们常用的是以下几种:

  • onclick——鼠标单击时触发
  • ondblclick——鼠标双击的时候触发
  • onmousedown——鼠标按下的时候触发
  • onmouseup——鼠标松开(弹起)的时候触发
  • onmouseover——鼠标移入时触发
  • onmouseout——鼠标移出时触发
  • onmousemove——鼠标移动的时候触发
  • oncontextmenu——鼠标右键的时候触发

键盘事件,我们常用的有以下几种:

  • onkeydown——键盘按键按下时触发
  • onkeyup——键盘按键松开(弹起)时触发
  • onkeypress——键盘按键按住时触发

除了浏览器的默认行为(如鼠标右键点击)外,我们自定义的事件,是需要做事件绑定的。而事件绑定呢,又是一个有兼容性的问题。在IE6-8上面呢,我们用attachEvent来绑带事件,用detachEvent来解绑事件,而在chrome和Firefox上,我们只能用addEventListener和removeEventListener来绑定和解绑事件。因此,我们还是会用或逻辑来解决这个问题,以绑定为例:

function addEvent(element, event, func) {
    if (document.attachEvent) {
        element.attachEvent('on' + event, func);
    } else {
        element.addEventListener(event, func);
    }
}

而针对默认行为,我们其实是也是可以阻止的,通常给个return false就阻止掉了。

在事件中呢,有一种被称为事件流的现象,事件冒泡就是其中一种最经典的呈现,所谓事件冒泡,就是元素的事件触发后,会传递给其父级直到document。如果要取消冒泡,就得将cancelBabble属性设为true。

以上就是我们这节课的理论知识,请大家移步至公众号看视频,我会通过演示让大家有一个更深的印象。

好了,这节课就讲这么多,下一节课,我们来了解一下JavaScript的BOM,然后我们的JavaScript基础课就基本结束了,后边有时间我们继续推进阶课程,例如动画、面向对象等等。

                                                                                                       

如果想跟着振丹继续学习,可以微信关注【振丹敲代码】(微信号:JandenCoding)

新博文微信同步推送,还附有讲解视频哦~

也可直接扫描下方二维码关注。

© 著作权归作者所有

JandenMa
粉丝 23
博文 29
码字总数 28128
作品 0
汕头
私信 提问
JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa
2018/06/19
0
0
JavaScript零基础入门——(十二)JavaScript的定时器

JavaScript零基础入门——(十二)JavaScript的定时器 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们讲了JavaScript中一些常用的DOM操作,这里要补充一个点,上节课讲的table几...

JandenMa
2018/06/27
0
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0
JavaScript零基础入门——(十四)JavaScript的BOM

JavaScript零基础入门——(十四)JavaScript的BOM 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们了解了JavaScript的事件,这一节课,我们以JavaScript的BOM,来结束JavaScrip...

JandenMa
2018/07/08
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
2018/06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

DLA SQL技巧:行、列转换和JSON数据列展开

1. 简介 在数据库SQL处理中,常常有行转列(Pivot)和列转行(Unpivot)的数据处理需求。本文以示例说明在Data Lake Analytics中,如何使用SQL的一些技巧,达到行转列(Pivot)和列转行(Unp...

阿里云官方博客
29分钟前
2
0
分布式数据库选型——数据水平拆分方案

概述 水平拆分的概念随着分布式数据库的推广已为大部分人熟知。分库分表、异构索引、小表广播、这些功能几乎是产品功能需求标配。然而有些客户使用分布式数据库后的体验不尽如意。 本文尝试从...

阿里云云栖社区
29分钟前
3
0
Swagger2常用注解说明

这里只讲述@Api、@ApiOperation、@ApiImplicitParams、@ApiImplicitParam、@ApiParam、@ApiModel、@ApiModelProperty、ApiResponses、@ApiResponse这几个常用的。 一、@Api 用在请求的类上,...

Ryan-瑞恩
30分钟前
2
0
DM 源码阅读系列文章(八)Online Schema Change 同步支持

作者:lan 本文为 DM 源码阅读系列文章的第八篇,上篇文章 对 DM 中的定制化数据同步功能进行详细的讲解,包括库表路由(Table routing)、黑白名单(Black & white table lists)、列值转化...

TiDB
39分钟前
2
0
使用nginx负载均衡登录后不能跳转的问题

upstream test-server { #ip_hash; server 192.168.0.1:8080 weight=10; server 192.168.0.1:8081 weight=10;} 在测试环境中模拟生产使用nginx做应用负载均衡,登录页面可以...

Jack088
48分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部