} 上面的这段代码有问题的(见上面注释) 给你一段为对象添加,删除事件的方法: function AddEventHandler(oTarget,sEventType,fnHandler) { if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false)} else if(oTarget.attachEvent){oTarget.attachEvent("on"+sEventType,fnHandler)} else{oTarget["on"+sEventType]=fnHandler} } function RemoveEventHandler(oTarget,sEventType,fnHandler) { if(oTarget.removeEventListener){oTarget.removeEventListener(sEventType,fnHandler,false)} else if(oTarget.detachEvent){oTarget.detachEvent("on"+sEventType,fnHandler)} else{oTarget["on"+sEventType]=null} } 参数中oTarget为要添加事件的对象(如一个tr),sEventType为要添加的事件类型(如onclick事件的类型为click--用字符串传入),fnHandler为响应改事件的方法(如onclick响应的方法为function1,则传入function1) 增个方法的调用例如: var td1=document.getElementById("td1"); var clickFunction=function(){...} function AddEventHandler(td1,"click",clickFunction);这段代码是兼容IE和FF,如果不需要就利用对象本身的attachEvent和detachEvent方法添加和删除事件,不过只有IE中有这两个方法。
不要直接用object.onclick为对象添加事件。
Javascript中一个事件怎样同时调用两个函数
这里分析Javascript 同时调用同一网页内的多个函数的实现方法,点击按钮后执行多次函数,比如连续弹出多次窗口。具体代码如下:?123456789101112131415161718 运行该程序可弹出alert窗口,关闭后可弹出第二个窗口。
Javascript 对于一个事件,用监听绑定控件还是将事件写到html好呢?
无论是不是事件监听,JS都应该写在外部JS文件中,而不是写到HTML标签中。原因有很多:
JS负责行为层,而HTML负责结构层,功能不同,按系统架构的思想应该分离;
写在外部JS文件中更利于维护,而且可以多次迭代开发;
太多的JS代码写在HTML文件中会阻碍DOM树的加载,影响用户体验;
外部JS可以进行压缩,减少带宽占用。
而相比之下JS写在外部JS文件中的弊端,仅仅是需要多建立一次HTTP连接,在合并JS文件后利还是远远大于弊。
针对你问的这个问题,又有其他原因:
当需要将同个事件绑定在多个元素上时,无论是事件委托,抑或是类选择器迭代绑定,都远远好过于在HTML中为单一节点绑定事件。同样的道理,当需要取消绑定时,外部JS的处理也更为方便(HTML中解除绑定需要不断删代码)。
我不清楚你用的是哪种控件,但控件一般都追求简单易行性,因此这个控件一般也是用的事件绑定,而不是事件委托。除非是使用生成的HTML代码,否则一般是将事件绑定写在外部JS中,也好过写在HTML标签内。
综上所述,我建议如果力所能及,一般是手写代码,多使用事件委托而不是事件绑定;如果没这能力,就楼主提供的这两种选择,还是使用监听绑定控件比较好。总之,尽量避免在HTML中掺杂JS。
汇总js事件相关及事件处理模型
js事件是为了实现用户交互,比如当用户鼠标点击或者键盘输入时,浏览器会监听截获并且通知js做出反馈执行相应的函数,实现交互。 js的事件类型有很多,我们先来大概总结一下常用的JS事件 click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件 contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件 可通过事件对象的button属性来区分是左键\滚轮\右键,分别对应值 0 / 1 / 2 DOM3规定:click事件只能监听左键;只能通过mousedown和mouseup来判断鼠标键 keydown某键被按下时、keyup被松开时、keypress按下并且松开时 触发顺序:先 keydown,然后keypress,最后keyup keydown和keypress的区别: input:文本变化时触发 change:聚焦或失去焦点时判断状态是否改变,发生改变是触发change事件 focus:聚焦时触发 blur:失去焦点时触发 利用focus和blur可模拟placeholder scroll:滚动条滚动时 load:页面加载完触发 abort:图像的加载失败 dblclick:双击事件 error:当加载图像和文档时发生错误 resize:窗口或者框架被重新调整大小 select:文本被选中时 reset:点击重置按钮时 submit:点击提交按钮时 接着看如何给DOM元素绑定事件处理函数 兼容性很好 但是根据js的特点,这种赋值的方式肯定会被后面的值覆盖。
因此这种方式绑定事件处理函数规则是:同一个元素同一个事件只能绑定一个处理函数。
等同于第一种写在行间。 IE8及以下不兼容 通过addEventListener绑定的方式,同个元素的同一个事件可以绑定多个处理函数,不会被覆盖。 attachEvent跟addEventListener 基本一致,也是同一个元素的同一个事件可以绑定多个处理函数,不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的,即即使绑定同一个函数都不会不覆盖。
以上几种事件绑定方式里面的this指向有点区别: 也比较好理解,IE独有的特殊一点指向window,其他都指向dom元素本身 封装一个兼容性的方法,用于绑定事件: 有的时候我们希望解除事件处理函数,那怎么办呢? 其实解除事件处理函数也对应有办法方法: 1. ele.Onxxx= false / ' ' / null 2. ele.removeEventListener(type,fnName,false) 3. ele.attachEvent('on' + type,fnName) 值得注意的是:若干绑定的事件处理函数是匿名函数,则无法解除绑定! 不知道有没有发现,在上面绑定事件处理函数的时候,处理函数有个参数e或者叫event,其实是一个事件对象 事件对象就是处理函数里面的一个参数,说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。 为了兼容IE一般这么写: e = e || window.event 事件对象会有个属性target,这个target叫事件源对象,记录可事件具体在谁身上触发的那个源头 同样IE上事件源对象是e.srcElement,谷歌两个都有 所以为了兼容IE一般获取事件源对象是这么来写: 当浏览器发展到第四代时(IE4及Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?想象画在一张纸上的一组同心圆。如果把手指放在圆心上,那么手指指向的不是一个圆,而是纸上的所有圆 两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。
如果单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上,甚至也单击了整个页面 但有意思的是,IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型 IE的事件流叫做事件冒泡(event bubbling), 事件冒泡是结构上(非视觉上)嵌套的函数存在事件冒泡功能,即同一事件自子元素冒泡向父元素(自底向上) [注意]所有现代浏览器都支持事件冒泡 但在具体实现在还是有一些差别。
IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象 而事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它 即事件捕获是指: 结构上(非视觉上)嵌套的元素存在事件捕获功能,即同一事件自父元素冒泡向子元素(自顶向下) 注意IE上没有事件捕获,Chrome和新版本的Firefox等都实现了 一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型,要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时,最后一个参数默认是false表示的是,事件冒泡模型。
如果改成true,立即变成事件捕获模型 如果一个dom元素的一个事件类型绑定了两个处理函数,两个函数的事件处理模型一个是事件冒泡一个是事件捕获,触发顺序是先捕获,后冒泡。 focus、blur、change、submit、reset、select等事件类型不冒泡 可以 利用事件冒泡和事件源对象可以叫事件委托给父元素 利用事件冒泡和事件源对象进行处理 优点: 性能好,不需要循环所有元素一个个绑定事件 灵活,当有其他新的子元素时,不需要重新绑定事件。