Event的概念,Event handler和事件对象的使用介绍.
[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event
事件
事件(Event)是用来通知代码,一些有趣的事情发生了.
每一个Event都会被一个Event对象所表示,这个对象可能还会有一些自定义的字段或者方法,来获取发生什么事情的更多信息.
Event对象实现了Event接口(https://developer.mozilla.org/en-US/docs/Web/API/Event).
事件可以是任何事情,从最基本的用户交互,到rendering model中自动发生的一些事情.
有一些官方规范中的标准事件,也有一些特定浏览器使用的内部事件.
各种事件可以参考: https://developer.mozilla.org/en-US/docs/Web/Events
事件处理器
要在某个对象发生某个事件(比如一个a标签被点击)的时候得到通知,可以为这个对象的这个事件指定一个event handler.
指定方法:
1.用元素名为on{eventtype}的HTML属性, 比如:
<button onclick="return handleClick(event);"> 2.用JavaScript选取元素,设置对应的onXXX属性,比如:
document.getElementById("mybutton").onclick = function(event) { ... }. 更现代的浏览器可以用addEventListener()方法: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
但是这个方法不兼容IE9之前的浏览器.
如果用jQuery来注册监听,框架会帮我们处理浏览器的兼容性问题.
具体的各种注册监听的方式, 上一篇博文中有总结:http://www.cnblogs.com/mengdd/p/4354339.html
Event handler可以设置在HTML元素上,也可以设置在其他产生事件的对象上,比如window, document, XMLHttpRequest等.
因为历史原因,一些<body>和<frameset>上的属性实际是在它们的Window对象上设置event handler.
比如:onblur, onerror, onfocus, onload, onscroll.
事件对象
在时间被触发的时候,回调方法接收一个事件对象作为参数.
这样你在处理的时候,可以知道当前是什么事件(type), 它的target, 以及相关的事件参数.
Event是一个接口, 它有一些公共的属性和方法.
各种具体的事件接口(比如MouseEvent, KeyboardEvent)都是Event的子类.
事件属性列表: https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties
事件对象的方法中:
event.stopPropagation() 会阻止当前事件的进一步传播.
event.preventDefault() 会取消可以取消的事件, 但是不阻止事件的进一步传播.
preventDefault()用来阻止一些默认的行为发生.
参考资料:
W3C Doc: https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html
Event Developer Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/Events
learn jQuery Events: http://learn.jquery.com/events/
Mozilla Event reference: https://developer.mozilla.org/en-US/docs/Web/Events
Event Handler: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
博客文章:http://chajn.org/project/javascript-events-responding-user/
作者: 圣骑士Wind
出处: 博客园: 圣骑士Wind
Github: https://github.com/mengdd
微信公众号: 圣骑士Wind
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)