事件知识整理，本文由网上资料整理而成，有需要的朋友可以参考。
鼠标事件
当鼠标移动到目标元素的瞬间，首先触发mouseover，然后如果光标继续在该元素上移动，就会连续触发mousemove。如果鼠标上的设备(左键、右键、滚轮、)被按下，mousedown将被触发。当设备弹出时，mouseup目标元素的滚动条会被触发移动(滚轮/拖动滚动条。)触发滚轮触发鼠标滚轮，不同于滚动鼠标移出元素的瞬间，触发mouseout。
事件注册 通常情况下，我们绑定事件时，使用的形式是dom.onxxxx=function(){}。这样，我们给元素的onxxxx属性赋值，只能绑定一个句柄。但在很多情况下，我们需要将多个处理句柄绑定到一个事件，我们可能还需要在一个处理句柄下动态添加或删除事件注册方法来解决这个需求。
先介绍一下四个方法复制代码代码如下：//target.addeventlistener (type，listener，use capture)target . removeevent listener(type，listener，use capture)除//IE外；目标：文档节点、文档、窗口或XMLHttpRequest。类型：字符串、事件名称，不带“on”，如“click”、“mouseover”、“keydown”。Listener:实现EventListener接口或JavaScript中的函数。UseCapture:是否使用捕获，通常为false。//IE target.attachEvent(类型，侦听器)；target.detachEvent(类型，侦听器)；目标：文档节点、文档、窗口或XMLHttpRequest。类型：字符串，事件名称，带“on”，如“onclick”、“onmouseover”、“onkeydown”。Listener:实现EventListener接口或JavaScript中的函数。两种方法的原理：可执行的优先级不同。例子如下：ele.attachevent ('onclick '，方法1)；ele.attachEvent('onclick '，method 2)；ele.attachEvent('onclick '，method 3)；执行顺序为method 3-method 2-method1 ele . addevent listener(' click '，method 1，false)；ele.addEventListener('click '，method2，false)；ele.addEventListener('click '，method3，false)；方法var func=func(){ }在方法1-方法2-方法3兼容后执行；//示例：addevent (window，' load '，func)函数addevent (elem，type，fn){ if(elem . attach event){ elem . attach event(' on ' type，fn)；返回；} if(elem . addevent listener){ elem . addevent listener(type，fn，false)；} }//示例：removeevent (window，' load '，func)函数removeevent (elem，type，fn){ if(elem . detachevent){ elem . detachevent(' on ' type，fn)；返回；} if(elem . removeeventlistener){ elem . removeeventlistener(type，fn，false)；}}获取事件对象和事件源(触发事件的元素) 复制代码如下：函数eventHandler(e){ //获取事件对象e=e | | window.event//IE和Chrome下的window.event FF，e //获取事件源var target=e . target | | e . srcelement；//在//IE和Chrome下是srcElement FF，Chrome下是target}取消事件默认行为(例如点击一个a后不跳转页面而是执行一个函数) 。复制代码如下：函数EventHandler(e){ e=e | | window . event；//防止默认行为if(e . Prevent default){ e . Prevent default()；//而不是//IE } else { e . return value=false；//IE //注意：这个地方不能用return false代替。//返回false只能取消元素}}阻止事件冒泡 复制代码如下：函数MyParagraphEventHandler(e){ e=e | | window . event；if(e . stop propagation){ e . stop propagation()；//而不是//IE } else { e . cancel bubble=true；//IE } }
事件委托
例如，如果您有一个包含许多行的大表，将点击事件绑定到每个tr是一个非常危险的想法，因为性能是一个大问题。流行的做法是使用事件委托。
事件委托描述了将一个事件绑定到一个容器元素，然后通过判断被点击的目标子元素的类型来触发相应的事件。事件委托取决于事件气泡。如果在表之前禁用了事件气泡，下面的代码将不起作用。
复制代码如下：my table . onclick=function(){ e=e | | window . event；var target node=e . target | | e . srcelement；//测试是否点击TR，触发if(target node . nodename . to lower case()==' TR '){ alert('您点击了一个表格行！');} }
事件知识整理(二)
事件流
DOM同时支持两种事件模型：捕获事件和冒泡事件，每次事件发生都会经历捕获阶段-处理阶段-冒泡阶段(部分浏览器不支持捕获)。
捕获阶段是从上层元素到下层元素的顺序。泡沫阶段则相反。
如下图
当事件被触发时，主体会先获取事件的信息，然后依次向下传递，直到到达最细节的元素。这是事件捕获阶段。记住事件注册方法Ele。AddEventListener(类型、处理程序、标志)。标志是一个布尔值，true表示事件捕获阶段的执行，false表示事件冒泡阶段的执行。然后就是事件的冒泡阶段。事件处理函数是自下而上执行的(当然，前提是当前元素为该事件注册了一个事件句柄)。在这个过程中，可以防止事件的冒泡，也就是可以停止向上的传递。例如，有时有必要防止冒泡
复制代码如下：divonclick=funca()button onclick=funcb()click/button/div
原意是点击div以外的按钮时执行funcA，点击按钮时执行funcB。但实际点击按钮时，funcb和funca会相继执行。如果在按钮的事件句柄中阻止冒泡，div将不会执行事件句柄。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。