人员可以设定某些事件发生时所执行的函数
时间： 10:49:01
honeyd蜜罐配置和web监听脚本Honeyd的安装和配置&&&&&&&&&& Honeyd软件依赖于以下几个库及arpd工具：&&&&&&&&& （1）Libevent：是一个非同步事件通知的函数库。通过使用 libevent，开发人员可以设定某些事件发生时所执行的函数，可以代替以往程序所使用的循环检查；&&&&&&&&& （2）Libdnet：是一个提供了跨平台的网络相关 API的函数库，包括 arp 缓存，路由表查询，IP 包及物理帧的传输等；&&&&&&&& （3）Libpcap：是一个数据包捕获（Packet Sniffing）的函数库，大多数网络软件都以它为基础；&&&&&&&& （4）Arpd工具：arpd运行在与honeyd相同的系统上，是honeyd众多协作工具中最重要的一个。Arpd工作时监视局域网内的流量，并通过查看honeyd系统的ARP表判断其它系统的活动与否。当一次企图对局域网内系统的连接发生时，Arpd通过查找ARP表得知目的IP地址不存在后，就会尝试对受害者的IP地址进行ARP广播，如果honeyd得到了响应，说明目标系统确实存在，于是把目标系统的IP地址与MAC地址的对应写入honeyd的ARP表，并对这次连接尝试不动作，因为这可能是合法流量。如果Arpd没有从目标接收到Arp响应，那么它就认为目标系统并不存在，假设这是一次攻击行为，于是就尝试充当受害者的IP地址并对攻击者作出回应。由此可见，arpd将对指定的IP地址范围内未使用的IP&&&& 用honeyd主机的MAC地址做出arp应答。这样对指定的IP地址范围内未使用的IP的连接访问都被重定向至honeyd主机。因此这样的设计在局域网中特别能最大化的诱骗蠕虫病毒的攻击，转移攻击流，为下一步检测和捕获蠕虫病毒奠定了基础。&&&&&&&& 启动honeyd前有时必须先启动arpd&&&&&&&& 启动arpd有2种 & &&&&&&&& A.arpd IP&&&&&&&& B. %arpd IP(%表示arpd的路径)因为系统本身有个arpd，有时需要指定自己安装的那个arpd的路径。&&&&&&&& 在对以上几个库进行编译安装之前，因编译安装需要，必须确保gcc已经安装，可通过指令“gcc -v”查看gcc是否已安装，若没有安装可以输入指令：sudo&apt-get&install&g++&gcc进行安装。&&&&注：在装gcc之前需要装build-essential,其作用是提供软件包列表信息。&&&&&&&&& 此次试验我们是在Ubuntu环境下进行，网上下载的全部库的安装包及工具放在honeyd文件夹（存放在主文件目录下）中。&&&&&libevent的安装：&&&&用tar&-zxvf&libevent-1.4.14b-stable.tar.gz解压缩&&&&&&&&用cd&libevent-1.4.14b-stable进入目录&&&&&&&&用./configure检测目标特征&&&&&&&&用make进行编译&&&&&&&&用高权限的 make&install进行安装&&&&&&&&注：最后一步一定要用管理员权限执行，即在指令前加“sudo”,不然会提示权限不够。&&&&余下几个库的安装基本类似，出现的一些小问题都有说明：&&&&&libdnet的安装：&&&&tar&-zxvf&libdnet-1.11.tgz&&&&&cd&libdnet-1.11/&&&&./configure&&&&make&&&&sudo make&install&&&&&libpcap的安装：&&&&tar&-zxvf&libpcap-1.3.0.tar.gz&&&&cd&libpcap-1.3.0&&&&./configure&&&&*提示错误：缺少flex&&&&apt-get&install&flex(安装flex)&&&&./configure&&&&make&&&&*提示错误：未能找到yacc&&&&apt-get&install&bison（安装yacc）&&&&make&&&&sudo make&install&&&&&honeyd的安装：&&&&tar&-zxvf&honeyd-1.5c.tar.gz&&&&cd&honeyd-1.5c&&&&./configure&&&&*提示错误：需安装libedit&或libreadline&&&&apt-get&install&libedit-dev（安装libedit）&&&&./configure&&&&*提示错误：需安装zlib库&&&&cd&&&&&unzip&zlib-1.2.8.zip&（安装zlib）&&&&cd&zlib-1.2.8&&&&./configure&&&&make&&&&make&install&&&&cd&honeyd-1.5c&&&&./configure&&&&*提示错误：无法获取libc&&&&cp&/lib/i386-linux-gnu//libc.so.6&/usr/lib/（获取libc）&&&&./configure&&&&*提示错误：pcap_parse未定义&&&&cd&libpcap-1.3.0（重新编译libpcap-1.3.0）&&&&make clean (必做)&&&&./configure&&&&make&&&&make&install&&&&cd&-&&&(回到honeyd-1.5c)&&&&make&&&&sudo make&install&&&&工具arpd的安装：&&&&tar&arpd-0.2.tar.gz&&&&cd&arpd-0.2/&&&&./configure&&&&编译报错，上网查询得到下面的解决方法：&&&&在arpd/arpd.c文件中添加 #define __FUNCTION__&&&&&&&&make&&&&sudo make&install&&&&虚拟出2台主机&&&&在局域网中选择一个未被使用的IP地址，启动arpd（此处选择的是192.168.1.2和192.168.1.3，便于后面虚拟Windows主机和Linux主机），用192.168.1.150主机的MAC地址作为这两个虚拟主机的MAC地址响应。&&&&&&&&&&&&启动honeyd时出现报错“libdnet.1:&can't&open&sharedobjectfile”，在网上查询的都解决方法如下：&&&&网上介绍若共享库文件安装到了“/usr/local/lib”或其他“非/lib或/usr/lib”目录下，那在执行Idconfig命令之前还要把新共享库目录加载到共享库配置文件/etc/ld.c.conf中，如下所示：&&&&#cat /etc/ld.c.conf&&&&include /etc/ld.c.conf/*.conf&&&&#echo “/usr/local/lib”&&/etc/ld.c.conf&&&&#Idconfig&&&&但是在我们进行如上的修改后任然出现上述的问题，后来在网上查阅后又进行了如下修改：&&&&export一个全局变量LD_LABRARY_PATH，然后运行时就会到这个目录下寻找共享库。（LD_LABRARY_PATH的作用是告诉loader在那些目录中可以找到共享库，可以设置多个搜索目录，在目录之间用逗号分隔开）&&&&exportLD_LABRARY_PATH=/usr/local/lib:$ LD_LABRARY_PATH&&&& &&&&网络拓扑结构：有三台主机和一个网关，一台Windows主机用于访问虚拟服务，IP为192.168.1.115；另一台Windows主机用于提供FTP服务，IP为192.168.1.104；一台Ubuntu主机用于配置蜜罐，IP为192.168.1.150，网关为192.168.1.1。&&&&honeyd成功安装后，利用其虚拟出一台windows主机web server，配置文件取名为：honeyd.conf，文件内容如下：&&&&create windows&&&&set windows personality &MicrosoftWindows NT 4.0 SP3&&&&&set windows default tcp action reset&&&&set windows default udp action reset&&&&add windows tcp port 80 &shhoneyd/honeyd-1.5c/scripts/web.sh&&&&&bind 192.168.1.2 windows&&&&上面的配置文件创建了一个叫做windows的模板，绑定了一个honeypot的IP到这个模板上。上面的这个windows模板告诉honeyd，当一个客户端试图NMap探测honeypot的指纹时，把它自己伪装成Microsoft&Windows&NT&4.0&SP3的系统，用honeyd自带的web脚本虚拟web服务。&&&&最初我们是在虚拟机上运行，可做到这一步是，同网段的主机无法访问到虚拟出来的web服务，我们在网上找了各种解决办法，检查了配置文件honeyd.conf以及虚拟服务器的脚本文件web.sh，发现并没有异样，检查了好几个小时，后来考虑可能是在虚拟机上运行的原因，就重新在ubuntu的系统下把之前的重做了一遍，然后在ubuntu终端输入如下命令，若有主机对192.168.1.2进行访问，那192.168.1.2将对其做出相应：&&&&honeyd -d -fhoneyd.conf 192.168.1.2&&&&这个命令-d代表在终端显示监听蜜罐的情况，-f代表采用honeyd.conf作为配置文件，192.168.1.2代表对IP地址为192.168.1.2的蜜罐进行监听。&&&&当用192.168.1.115主机访问192.168.1.2，页面显示结果如下：&&&&&&&&&&&&&&&&可以看到，成功执行了honeyd自带的web脚本，这是一个简单的web页面，用于测试蜜罐的搭建是否成功。&&&&ubuntu主机响应访问时终端的显示如下：&&&&&&&&&&&&&&&&192.168.1.115的主机成功与蜜罐192.168.1.2建立连接，并执行web脚本。&&&&同理，测试IP地址为192.168.1.3蜜罐的过程类似。&&&&完成实验内容的配置文件内容如下图所示：&&&&&&&&&&&&&&&&通过上图配置文件虚拟出两台主机：一台Windows主机，IP为192.168.1.2，开放80，20，21，22端口，80端口和22端口执行虚拟服务脚本，由于FTP服务比较难模拟，所以21端口设置FTP服务代理为192.168.1.104的主机，20端口待用；一台Linux主机，IP为192.168.1.3，开放端口和虚拟服务与Windows主机相同。&&&&把访问虚拟服务的客户端的按键记录保存在文件中&&&&事先编写好web服务和按键记录的脚本放在web.sh文件中，后文会有对脚本代码的分析。&&&&利用192.168.1.115访问虚拟web服务，输入用户名和密码如下所示：&&&&&&&&&&&&&192.168.1.150控制端得到的结果如下：&&&&&&&&&&&&由结果可知192.168.1.115主机与蜜罐已连接成功且成功执行脚本web.sh文件。&&&&&&&& 点击登陆，控制主机通过python的os库调用OS类的system方法，在终端用tshark -d “ip dst192.168.1.2” -w catchlog将抓到的数据包保存在“catchlog”文件中，其中有包含用户名和密码的数据包：&&&&&& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&&&虚拟web服务脚本如下：&&&&&&&&&&&&&&&&这是一个shell脚本，主要是用于写入图中紫色的html代码，html代码由两部分组成，&body&至&/body&创建一个web界面，包含username和password两个表单；上面为javascript部分，当点击登陆按钮的事件发生时，它会将用户username和password两个表单中的内容提交给192.168.1.2的备用开放端口20。查看: 4270|回复: 6
如何在Grid表格的行单击事件的后台代码里调用前端JS代码
该用户从未签到
本帖最后由 守护、天使 于
22:06 编辑
有两个问题。
主要的是：如何在Grid表格的行单击事件的后台代码里调用前端JS代码
次要的是：如何在content Panel中如何加载百度地图
此图下方是一个表格，表格具有行单击事件，在行单击事件里我需要利用表格主键查询数据库获得经纬度，然后传值给地图。按照我现在的想法是调用前端ＪＳ函数．
关于百度地图api&!DOCTYPE html&
&html&
&head&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&style type=&text/css&&
body, html,#allmap {width: 100%;height: 100%;overflow:margin:0;}
&/style&
&script type=&text/javascript& src=&http://api./api?v=2.0&ak=您的密钥&&&/script&
&title&地图平移&/title&
&/head&
&body&
&div id=&allmap&&&/div&
&/body&
&/html&
&script type=&text/javascript&&
// 百度地图API功能
var map = new BMap.Map(&allmap&); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.),8); //初始化时，即可设置中心点和地图缩放级别。
setTimeout(function(){
map.panTo(new BMap.Point(113..154345)); //两秒后移动到广州
}, 1500);
&/script&
复制代码我的想法就是通过后台事件代码中获得经纬度，传值，调用前台JS函数（类似两秒移动到广州），最终目的是将地图移动到指定位置。
事件代码中该如何操作？
2.次要问题：如何在content Panel中如何加载百度地图
目前使用的是iframe：代码如下：&ext:Region ID=&mainRegion& ShowHeader=&false& Layout=&Fit& Margins=&0 0 0 0& Position=&Center& runat=&server&&
&Toolbars&
&ext:Toolbar ID=&Toolbar1& Position=&Top& runat=&server& Height=&25px& CssClass=&toolbar&&
&Items&
&ext:Label ID=&ToolLabel& Text=&动态管理&基站状况-地图表示& runat=&server& CssClass=&label&&
&/ext:Label&
&/Items&
&/ext:Toolbar&
&/Toolbars&
&Items&
&ext:ContentPanel ID=&ContentPanel2& runat=&server& EnableBackgroundColor=&true&
ShowBorder=&false& ShowHeader=&false& Title=&ContentPanel& BoxConfigPosition=&Center&&
&iframe id=&iframe1& name=&iframe1& enableviewstate=&true& scrolling=&auto& frameborder=&0& src=&map.aspx&&&/iframe&
&%--&div style=&height:700 width:1250 padding:0; margin:0;& id=&allmap&&&/div& --%&
&/ext:ContentPanel&
&/Items&
&/ext:Region&复制代码这段代码我们可以看到，用的是iframe。由于用iframe传值比较麻烦。但是直接用div的话，不写高度和宽度，content panel中无法显示地图。写高度和宽度又不能写定值，为什么呢？框架的缩放。
现在就想类似在百度API里的那般，让地图充满content panel，但是又不用iframe，那么该如何处理。
希望大神给予解答，实在是比较急。谢谢
本帖子中包含更多资源
才可以下载或查看，没有帐号？
签到天数: 15 天[LV.4]偶尔看看III
主要的是：如何在Grid表格的行单击事件的后台代码里调用前端JS代码
在C#代码中直接调用PageContext.RegisterStartupScript 即可执行前端JS代码
次要的是：如何在content Panel中如何加载百度地图
最好放在IFrame中，方便隔离代码，减少问题
该用户从未签到
主要的是：如何在Grid表格的行单击事件的后台代码里调用前端JS代码
在C#代码中直接调用PageContext.Reg ...
关于次要的只能如此了。
那么主要的还是很有问题的。
首先怎么调用iframe中的JS函数呢？
其次如何传值（经纬度）给那个被调用函数？
签到天数: 15 天[LV.4]偶尔看看III
关于次要的只能如此了。
那么主要的还是很有问题的。
首先怎么调用iframe中的JS函数呢？
这个就不属于FineUI的范畴了。
调用IFrame中的函数很简单，只要两个页面属于同一个域名下，先找到IFrame的window对象，网上搜索一下
该用户从未签到
本帖最后由 守护、天使 于
22:09 编辑
这个就属于FineUI的范畴了。
调用IFrame中的函数很简单，只要两个页面属于同一个域名下，先找到IFrame的 ...
这个问题我解决了哦。。。。。
现在有一个新的想法。。。
就是表格绑定了数据源，但是数据库里的数据会改变，能不能做到网页不刷新而让表格的实时更新呢？
简而言之就是类似表格部分局部刷新，并将数据库里的数据在页面实时显示出来呢？（完全没思路啊）
该用户从未签到
这个问题我解决了哦。。。。。
现在有一个新的想法。。。
就是表格绑定了数据源，但是数据库里的数据会改 ...
已解决，谢谢
该用户从未签到
这个就不属于FineUI的范畴了。
调用IFrame中的函数很简单，只要两个页面属于同一个域名下，先找到IFrame ...
你好，我也遇到类似的问题。&&我再后台写的
& & PageContext.RegisterStartupScript(&return resetEditor()&);
但是前台函数没有执行？请问，这是怎么回事？
站长推荐 /2
客户端 JS 库仅 200K；下载流量减少 70%；内存占用减少 50%；速度提升 3 倍以上（无缓存）
现在就打开微信，扫描二维码关注 FineUI 公众号，三石期待您的加入！
扫描二维码，关注 FineUI 微信公众号
Powered byjs事件监听机制(事件捕获)总结
投稿：whsnow
字体：[ ] 类型：转载 时间：
添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题：
1.直接把事件的方法写在页面结构上
function eventfun(){
//console.log(this);
&input type="button" onclick="eventfun()" value="button" /&//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是[object Window],this指向的是window.
要解决this作用域的问题，可以使用为全局函数添加event变量的方法，在页面结构上将this对象作为参数传递到函数内部使用
&input type="button" onclick="eventfun2(this)" value="button2" /&
function eventfun2(eve){//在这里把事件对象作为参数传递到全局方法里
eve.name="alex";
window.name="robin";
console.log(this);//[object Window]
console.log(eve);// [object HTMLInputElement]
console.log(this.name);// robin
console.log(eve.name);// alexvar
console.log(this.name);//robin
console.log(self.name);//alex
alert(window.name);
alert(self.name);
2. 使用给事件属性赋值的方法,是一种为事件绑定的方法，但是这种方法的局限性就是只能为事件绑定一个方法，如果绑定多个就会以后一个方法为准
HTMLElementobject.onclick = fucntion(){//使用这种为事件属性赋值的方法，this的指针会指向window对象，而不是被事件对象，所以这种方法是引用
console.log(this);//window.object
function dosomething(){
HTMLElementobject.onclick =//使用这种为事件对象属性赋值的形式，this指针指向事件执行对象
console.log(this);//htmlElementObject
3.事件传播——冒泡与捕获
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它 遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
现代事件绑定方法
针对如上节课所讨论的，使用传统事件绑定有许多缺陷，比如不能在一个对象的相同事件上注册多个事件处理函数。而浏览器和W3C也并非没有考虑到这一点，因此在现代浏览器中，它们有自己的方法绑定事件。
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添 加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则 在冒泡阶段执行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法
微软IE方法
obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获
obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀
整合两者的方法
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获
obj["on"+evtype]=//事实上这种情况不会存在
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {
obj.removeEventListener(evtype,fn,useCapture);
obj.detachEvent("on"+evtype,fn);
obj["on"+evtype]=
IE的attach方法有个问题，就是使用attachEvent时在事件处理函数内部，this指向了window，而不是obj！当然，这个是有解决方案的！
但IE的attachEvent方法有另外一个问题，同一个函数可以被注册到同一个对象同一个事件上多次，解决方法：抛弃IE的 attachEvent方法吧！IE下的attachEvent方法不支持捕获，和传统事件注册没多大区别(除了能绑定多个事件处理函数)，并且IE的 attachEvent方法存在内存泄漏问题！
addEvent,delEvent现代版
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&js事件监听&/title&
table td{font:12 border-bottom:1px solid #}
&div id="outEle" style="padding:10 border:1px solid #b2b2b2; background:#"&
&input type="button" onclick="eventfun()" id="button" value="button" /&&br /&
&input type="button" onclick="eventfun2(this);" id="button2" value="button2" /&&br /&
&input type="button" id="button3" value="button3" /&&br /&
&input type="button" id="button4" value="button4" /&&br /&
&table id="htmlEleTable" width="100%" border="0" style="border:1px solid #b2b2b2; background:#"&
&tr id="1111"&&td&111111&/td&&/tr&
&tr id="22222"&&td&222222&/td&&/tr&
&tr id="33333"&&td&333333&/td&&/tr&
&tr id="4444"&&td&444444&/td&&/tr&
&tr id="55555"&&td&555555&/td&&/tr&
&script language="javascript" type="text/javascript"&
function eventfun(){//1.直接把js方法写在页面结构上
console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window
alert(this);
function eventfun2(eve){//在这里把事件对象作为参数传递到全局方法里
eve.name="alex";//
window.name="robin";
console.log(this);//[object Window]
console.log(eve);// [object HTMLInputElement]
console.log(this.name);// robin
console.log(eve.name);// alex
console.log(this.name);//robin
console.log(self.name);//alex
alert(window.name);
alert(self.name);
function eventfun3(){//1.直接把js方法写在页面结构上
console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window
console.log(this.id);
alert(this);
alert(this.id);
//var outEleObj = EventUtil.$("outEle");
//removeEvent(outEleObj,"click",eventfun3);
var EventUtil = {};
EventUtil.$ = function(id){
return document.getElementById(id);
EventUtil.openmes = eventfun3;
EventUtil.addEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数
if(eventTarget.attachEvent){
eventTarget.attachEvent("on"+eventtype,eventHandle);
}else if(eventTarget.addEventListener){
eventTarget.addEventListener(eventtype,eventHandle,false)
eventTarget["on" + eventtype] =
EventUtil.deleEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数
if(eventTarget.detachEvent){
alert("on"+eventtype);
alert("on"+eventHandle);
eventTarget.detachEvent("on"+eventtype,eventHandle);
}else if(eventTarget.removeEventListener){
eventTarget.removeEventListener(eventtype,eventHandle,false)
eventTarget["on" + eventtype] =
var EventUtil={
$:function(id){
return document.getElementById(id);
but4fun:function(){
console.log(this);
this.addEventHandle();
eventfun3:function (){
console.log(this);
alert(this);
delEvent(obj,evtype,fn,useCapture);
/***使用addEventListener,attachEvent进行dom事件的监听
function addEvent(obj,evtype,fn,useCapture){
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evtype,function () {
fn.call(obj);
obj["on"+evtype]=//事实上这种情况不会存在
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {
obj.removeEventListener(evtype,fn,useCapture);
} else if(obj.detachEvent){
obj.detachEvent("on"+evtype,fn);
obj["on"+evtype]=
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {//优先考虑W3C事件注册方案
obj.addEventListener(evtype,fn,!!useCapture);
} else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;}
//为每个事件处理函数分配一个唯一的ID
if (!obj.__EventHandles) {obj.__EventHandles={};}
//__EventHandles属性用来保存所有事件处理函数的引用
//按事件类型分类
if (!obj.__EventHandles[evtype]) {//第一次注册某事件时
obj.__EventHandles[evtype]={};
if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到预留的0位
//并且给原来的事件处理函数增加一个ID
obj["on"+evtype]=addEvent.execEventH
//当事件发生时，execEventHandles遍历表obj.__EventHandles[evtype]并执行其中的函数
addEvent.__EventHandlesCounter=1;//计数器,0位预留它用
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {}
evt = evt || window.
var fns = this.__EventHandles[evt.type];
for (var i in fns) {
fns[i].call(this);
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数
obj.removeEventListener(evtype,fn,!!useCapture);
if (obj.__EventHandles) {
var fns = obj.__EventHandles[evtype];
if (fns) {delete fns[fn.__EventID];}
function fixEvent(evt) {//fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最好的方法是把它整合到addEvent函数的execEventHandles里面
if (!evt.target) {
evt.target = evt.srcE
evt.preventDefault = fixEvent.preventD
evt.stopPropagation = fixEvent.stopP
if (evt.type == "mouseover") {
evt.relatedTarget = evt.fromE
} else if (evt.type =="mouseout") {
evt.relatedTarget = evt.toE
evt.charCode = (evt.type=="keypress")?evt.keyCode:0;
evt.eventPhase = 2;//IE仅工作在冒泡阶段
evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间
fixEvent.preventDefault =function () {
this.returnValue =//这里的this指向了某个事件对象，而不是fixEvent
fixEvent.stopPropagation =function () {
this.cancelBubble =
//console.log(EventUtil.$("button3"));//返回EventUtil函数的对象属性
//EventUtil.$("button3").onclick=//2.使用为对象事件属性赋值的方法来实现事件的监听
//EventUtil.$("button3").onclick= eventfun2;//为事件属性添加多个方法时，为后者
//EventUtil.$("button3").onclick=//事件捕获是从事件对象逐层外父级检察一直到window对象
var EventUtil =function(){
function getByid(id){
return document.getElementById(id);
// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
// store the event handler in the hash table
handlers[handler.$$guid] =
// assign a global event handler to do all the work
element["on" + type] = handleE
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
function handleEvent(event) {
var returnValue =
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue =
return returnV
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventD
event.stopPropagation = fixEvent.stopP
fixEvent.preventDefault = function() {
this.returnValue =
fixEvent.stopPropagation = function() {
this.cancelBubble =
function tableAddEvent(){
add:addEvent,
remove:removeEvent,
var outEleObj = EventUtil.$("outEle");
//addEvent.apply(EventUtil,[outEleObj,"click",eventfun3]);
//EventUtil.add(outEleObj,"click",eventfun3);
var inputObj = EventUtil.$("button4");
var tableEle = EventUtil.$("htmlEleTable");
var tabTrEle = tableEle.getElementsByTagName("tr");
EventUtil.add(tableEle,"click",eventfun3);
for (i=0; i&tabTrEle. i++){
EventUtil.add(tabTrEle[i],"click",eventfun3);
EventUtil.remove(tableEle,"click",eventfun3);//事件冒删除方法
EventUtil.add(tableEle,"click",eventfun3);//事件冒泡添加方法
//EventUtil.add(inputObj,"click",eventfun3);
//EventUtil.remove(outEleObj,"click",eventfun3);
//console.log(addEvent);
//addEvent(inputObj,"click",eventfun3,true);
//delEvent(outEleObj,"click",eventfun3,false);
PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具