js事件知识整理

事件。当鼠标移动到目标元素时，首先触发mouseover，如果光标继续在元素上移动，则继续触发mousemove。如果鼠标上的设备(左键、右键、滚轮…)被按下，鼠标按下被触发。当设备弹出时，鼠标向上目标元素的滚动条被触发移动(滚轮/拖动滚动条)。)触发滚轮触发mousewheel，不同于滚动鼠标移出元素的瞬间，触发mouseout事件注册。通常，当我们绑定事件时，我们使用dom.onxxxx=function(){}。这种方法是给元素的onxxxx属性赋值，并且只能绑定一个处理句柄。但是，在很多情况下，我们需要将多个处理句柄绑定到一个事件，我们可能需要在一个处理句柄下动态添加或删除事件注册模式来解决这个需求。介绍复制代码的四种方法如下：目标。addeventlistener(类型，侦听器，使用捕获)目标。removeeventlistener(类型，监听器，使用捕获):///IE除外；目标：文档节点、文档、窗口或XMLHttpRequest。类型：字符串、事件名称，不带“on”，如“click”、“mouseover”、“keydown”等。侦听器：在JavaScript中实现事件侦听器接口或函数。UseCapture:是否使用Capture，一般用false。//IE target.attachEvent(类型，侦听器)；target . discouplevent(类型，侦听器)；目标：文档节点、文档、窗口或XMLHttpRequest。类型：字符串、事件名称，包括“on”，如“onclick”、“onmouseover”、“onkeydown”等。侦听器：在JavaScript中实现事件侦听器接口或函数。它们的使用原则：它们有不同的执行优先级。例子如下：ele。attachevent ('onclick '，方法1)；ele.attachEvent('onclick '，method 2)；ele.attachEvent('onclick '，method 3)；执行顺序为method 3-method 2-method 1 le。addeventlistener ('click '，method1，false)；ele.addEventListener('click '，method2，false)；ele.addEventListener('click '，method3，false)；与method1-method2-method3兼容后，执行方法var func=function(){ }；//示例：addevent (window，' load '，func)函数addevent (elem，type，fn) {if (elem。attachevent) {elem。attachevent ('on '类型，fn)；返回；} if(elem . addeventlistener){ elem . addeventlistener(type，fn，false)；} }//示例：remove event (window，' load '，func)函数remove event (elem，type，fn) {if (elem。分离事件){elem。分离事件(' on '类型，fn)；返回；} if(elem . removeeventlistener){ elem . removeeventlistener(type，fn，false)；}}获取事件对象和事件源(触发事件的元素)并复制代码如下：函数event handler(e){//获取事件对象e=e | | window.event//IE和Chrome是window.event FF和e //获取事件源var target=e . target | | e . srcelement；//在//IE和Chrome下，在srcElement FF下，在target下}取消事件的默认行为(例如，点击一个a后，不跳转到页面而是执行一个函数)。复制的代码如下：函数event handler(e){ e=e | | window . event；//防止默认行为if(e . prevent default){ e . prevent default()；//而不是//IE } else { e . return value=false；//IE //注意：这个地方不能用return false代替。//return false只能取消元素}}防止事件冒泡复制的代码如下：函数myparagravithandler(e){ e=e | | window . event；if(e . stopperpagation){ e . stopperpagation()；//而不是//IE } else { e . cancelubble=true；//IE}}事件委托例如，如果您有一个多行的大型表，将click事件绑定到每个tr是一个非常危险的想法，因为性能是一个大问题。流行的做法是使用事件委托。事件委托描述将事件绑定到容器元素，然后通过判断被点击的目标子元素的类型来触发相应的事件。委托依赖于事件冒泡。如果在表之前禁用了事件冒泡，下面的代码将不起作用。

复制代码如下： mytable . onclick=function(){ e=e | | window . event；var target node=e . target | | e . srcelement；//测试TR是否被单击，if(target node . nodename . to lower case()==' TR '){ alert('您单击了一个表行！'。);}}事件知识整理(2)事件流DOM同时支持两种事件模型：捕获事件和冒泡事件，每次事件发生都会经历捕获阶段-处理阶段-冒泡阶段(部分浏览器不支持捕获)。捕获阶段按顺序从上元素到下元素。而冒泡阶段正好相反。下图。

当一个事件被触发时，主体将首先获得事件已经发生的信息，然后依次传递下去，直到到达最详细的元素。这是事件捕获阶段。记住事件注册方法Ele。添加事件侦听器(类型、处理程序、标志)。标志是一个布尔值。true表示执行事件捕获阶段，false表示执行事件冒泡阶段。然后是事件冒泡阶段。自下而上执行事件处理函数(当然，前提是当前元素注册了事件的事件处理程序)。在这个过程中，可以防止事件的冒泡，也就是说，可以停止向上传输。有时有必要防止起泡。例如，复制代码如下： div onclick=funcA()按钮onclick=FucB()/Click/button/div。初衷是在点击div中按钮以外的按钮时执行funca，点击按钮时执行funcb。但是当按钮被实际点击时，funcb和funca会相继执行。如果在按钮的事件句柄中阻止冒泡，div将不会执行事件句柄。