JavaScript零基础入门——（十三）JavaScript的事件

最新推荐文章于 2024-06-21 16:41:46 发布

weixin_33857230

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量70

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/JandenMa/blog/1838464

版权

2019独角兽企业重金招聘Python工程师标准>>>

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）

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

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