文档章节

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

JandenMa
 JandenMa
发布于 07/01 17:02
字数 919
阅读 37
收藏 0

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
粉丝 10
博文 28
码字总数 27794
作品 0
汕头
JavaScript零基础入门——(十二)JavaScript的定时器

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

JandenMa
06/27
0
0
JavaScript零基础入门——(八)JavaScript的数组

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

JandenMa
06/19
0
0
JavaScript零基础入门——(十四)JavaScript的BOM

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

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

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

阿小庆
06/14
0
0
jQuery零基础入门——(七)事件

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 我们在《零基础入门JavaScript》...

JandenMa
07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
44分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
1
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部