文档章节

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

JandenMa
 JandenMa
发布于 07/01 17:02
字数 919
阅读 45
收藏 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
粉丝 14
博文 28
码字总数 27794
作品 0
汕头
私信 提问
JavaScript零基础入门——(八)JavaScript的数组

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

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

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

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

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

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

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

阿小庆
06/14
0
0
JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

当S8遇上边缘计算:谈阿里云ENS对直播业务场景的支撑

摘要: 类似S8赛事这样的大型活动直播的特点和技术挑战是什么?为什么业务要下沉到边缘?自建边缘节点和与云服务厂商合作到底该如何选择?边缘节点服务(ENS)又是如何进行技术支撑?提供的针...

阿里云官方博客
22分钟前
5
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
33分钟前
1
0
laravel定时器

民间高手: https://blog.csdn.net/zhezhebie/article/details/79205414 官方文档: https://laravel-china.org/docs/laravel/5.5/scheduling/1325...

vio小黑
55分钟前
0
0
Apache Zeppelin安装及使用

Apache Zeppelin官网:http://zeppelin.apache.org/ Apache Zeppelin介绍:A web-based notebook that enables interactive data analytics. You can make beautiful data-driven, interacti......

GordonNemo
56分钟前
5
0
关于python开发多个项目环境配置Anaconda

关于Anaconda用来管理Python的包和环境 下载并安装Anaconda 创建项目:windows键+R ==> 进入CMD => 输入conda create -n 项目名称 python=3 conda info -e 查看项目以及项目所在的位置,默认...

上官清偌
58分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部