事件的定义:
事件就是用户或浏览器自身执行的某种动作。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比如说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件类型 UI事件 焦点事件,当元素获得或失去焦点时触发 鼠标事件, 滚轮事件,使用鼠标滚轮时触发 文本事件,在文档中输入文本时触发 键盘事件DOM事件的级别DOM 0级事件(分为两个):1、在html标签内写onclick事件;// <input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >2、在JS写onlicke=function(){}函数;// document.getElementById("myButton").onclick = function () { }DOM 2级事件:只有一个:监听事件。用来添加和移除事件处理程序:addEventListener()和removeEventListener()。DOM 3级事件:和DOM 2级事件类似,DOM 3中定义了自定义事件。事件流定义:从页面中接受事件的顺序。DOM事件流包括三个阶段:事件捕获阶段,处于目标事件和事件冒泡阶段。事件捕获比如单机<div>元素会触发click事件。事件捕获的过程是从上到下。--图片待上冒泡事件反之。事件机制,如何绑定事件处理函数?事件处理:
IE方式
1、attachEvent(事件名称, 函数),绑定事件处理函数:var btn=document.getElementById("btn");btn.attachEvent("onclick",function(){ alert("Clicked"); });
用onclick
2、detachEvent(事件名称, 函数),解除绑定DOM方式addEventListener(事件名称,函数, 捕获)removeEventListener(事件名称, 函数, 捕获)接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段。后面无论接多少函数,因为后面任何设置的属性都会尝试覆盖较早的属性.怎么移除事件和绑定事件解除事件: 对象.事件=null (此方法就是函数的覆盖)
DOM中的事件对象(event对象常见应用)
详情见高程P355自定义事件(进阶)event = new CustomEvent(type [, eventInitDict])事件委托事件委托(事件代理)是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。优点:在页面中设置事件处理程序所需的时间更少。整个页面占用的内存更少,能够提升整体性能。缺点:有些事件不能冒泡,blur、focus、load和unload不能像其它事件一样冒泡。如何实现事件委托?----文中还有一些小问题待总结,望大佬投稿