/**
检查该元素obj在数组中的位置
*/
Array.prototype.indexOf=function(obj){
var length=this.length,i=length-1;
for(;i>=0;i--){
if(this[i]==obj){
return i;
}
}
return -1;
}
/**
判断该元素obj在数组中是否存在
*/
Array.prototype.contains=function(obj){
return (this.indexOf(obj)>=0);
}
/**
在数组中添加元素,如果包含该元素将不添加
*/
Array.prototype.append=function(obj){
if(!(true&&this.contains(obj))){
this[this.length]=obj;
}
}
/**
删除该元素obj,并返回删除元素
*/
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if(index<0){
return;
}else{
return this.splice(index,1);
}
}
var EasyJs={};
EasyJs.event={
add:function(element,type,fun){
//判断是否是空白节点和注释
if(element.nodeType==3||element.nodeType==8){
return;
}
//ie不能传入window对象,需要复制一下
//if("isIE"&&target.setInterval){
// target=window;
//}
if(!element.events){
element.events={};
}
var handlers=element.events[type];
if(!handlers){
handlers=element.events[type]=[];
if(element['on'+type]){
handlers[0]=element['on'+type];
}
}
handlers.append(fun);
element['on'+type]=this.handleEvent;
},
handleEvent:function(){
return function(event){
event=event||EasyJs.event.fixEvent(window.event);
var handlers=this.events[event.type],length=handlers.length;
for(var i=0;i<length;i++){
if(handlers[i].call(this,event)===false){
return false;
}
}
return true;
}
}(),
fixEvent:function(event){
event.preventDefault=this.fixEvent.preventDefault=function(){this.returnValue=false};
event.stopPropagation=this.fixEvent.stopPropagation=function(){this.cancelBubble=true};
return event;
},
remove:function(element,type,fun){
if(element.events&&element.events[type]){
element.events[type].remove(fun);
}
},
fire:function(){
return function(element,type,args){
if(element.events){
var handlers=element.events[type];
if(handlers){
var length=handlers.length;
if(!args){
args=[];
}
for(var i=0;i<length;i++){
if(handlers[i].apply(element,args)===false){
return false;
}
}
}
}
return true;
}
}()
};
如何调用
<div id="ceshi" style="height:40px; width:40px; background-color:#000">hheheh</div>
<script>
EasyJs.event.add(document.getElementById("ceshi"),"cccc",function(r,c){alert(this.innerHTML+r+c)});
EasyJs.event.add(document.getElementById("ceshi"),"cccc",function(r){alert(123+r)});
EasyJs.event.fire(document.getElementById("ceshi"),"cccc",["cccc","bbbb"]);
EasyJs.Event.add(document.getElementById("ceshi"),"click",function(){alert(this.innerHTML)});
</script>
分享到:
相关推荐
JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件...
实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...
JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理 JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理...
第6章 JavaScript中的事件与事件处理
JavaScript事件处理是网页交互的核心,它允许开发者在用户与页面元素交互时执行特定的代码。事件可以是用户的行为,如点击、鼠标移动或键盘输入,也可以是浏览器内部的状态变化,如页面加载完成或窗口尺寸调整。事件...
JavaScript事件处理是编程中至关重要的一个部分,它赋予了网页动态性和交互性。在JavaScript中,事件处理涉及到了用户与网页元素之间的互动,比如点击按钮、输入数据等。当一个事件发生时,JavaScript会执行相应的...
JavaScript事件是浏览器或Node.js环境中发生的特定行为,如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一,通过监听和处理这些事件,我们可以创建响应式的用户体验。 二...
以下是关于JavaScript事件处理程序的详细解释: 1. **HTML事件处理程序**: 这种方式是最早的事件处理方式,即将JavaScript代码直接内联于HTML元素中,或者通过元素的属性引用外部脚本中的函数。例如,`onclick=...
JavaScript(简称JS)...总的来说,JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念,开发者能够创建出更加丰富、响应迅速的Web应用程序。
传统的JavaScript事件处理机制存在一些限制,尤其是在处理多个事件处理器绑定时。标题提到的"js的一个事件路由"旨在解决这些问题,提供一个更加灵活和兼容的事件管理方案。让我们深入探讨这个话题。 首先,我们来...
Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解
JS大全是指JavaScript语言的详细介绍,包括基础语法、数据类型、操作符、控制结构、函数、事件处理等方面的知识点。 JS基础语法 在HTML文档中,JS代码可以使用 `<script>` 标签来包含,例如: `...
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中,我们可以理解这是一个JavaScript实现的事件派发器,可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统(Issue)报告任何发现的错误...
总之,Vuemit是针对Vue.js事件系统的一种精简实现,为JavaScript开发者提供了轻量级、独立的事件处理方案,无论是否使用Vue.js,都能方便地集成到项目中,提升代码的可读性和可维护性。在处理跨组件通信或者在非Vue....
通过自定义右键菜单,我们可以提升网页的用户体验,同时这也是一个很好的实践JavaScript事件处理和DOM操作的机会。记得在实际应用中考虑兼容性问题,确保你的代码能在不同的浏览器和设备上正常工作。