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)
新博文微信同步推送,还附有讲解视频哦~
也可直接扫描下方二维码关注。