您的当前位置:首页javascript中自定义事件

javascript中自定义事件

2023-12-01 来源:热乐宠物网

自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用。

function EventTarget(){ this.handlers={}; } EventTarget.prototype={ constructor:EventTarget, addHandler:function(type,handler){ if(typeof this.handlers[type]=='undefined'){ this.handlers[type]=new Array(); } this.handlers[type].push(handler); }, removeHandler:function(type,handler){ if(this.handlers[type] instanceof Array){ var handlers=this.handlers[type]; for(var i=0,len=handlers.length;i<len;i++){ if(handler[i]==handler){ handlers.splice(i,1); break; } } } }, trigger:function(event){ if(!event.target){ event.target=this; } if(this.handlers[event.type] instanceof Array){ var handlers=this.handlers[event.type]; for(var i=0,len=handlers.length;i<len;i++){ handlers[i](event); } } } }

addHandler方法用于添加事件处理程序,removeHandler方法用于移除事件处理程序,所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件,该方法接收一个至少包含type属性的对象作为参数,触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。

function onClose(event){ alert('message:'+event.message); } var target=new EventTarget(); target.addHandler('close',onClose); //浏览器不能帮我们创建事件对象了,自己创建一个,自定义事件对象的属性 var event={ type:'close', message:'Page Cover closed!' }; target.trigger(event);

小编还为您整理了以下内容,可能对您也有帮助:

js如何监听一个自定义事件js如何监听一个自定义事件

js如何监控学习时间

通过发出指定侦听。在js中,有两个指令用来监控一个程序的运行时间,分别是console.time(name)和console.timeEnd(name)。这样,程序运行结束时会打印出程序的运行时间,参数名可以省略。

javascript怎么操作socket?

可以实现的

//创建一个Socket实例 varsocket=newWebSocket('ws://localhost:8080'); //打开Socket socket.onopen=function(event){ //发送一个初始化消息 socket.send('IamtheclientandI'mlistening!'); //监听消息 socket.onmessage=function(event){ console.log('Clientreceivedamessage',event); }; //监听Socket的关闭 socket.onclose=function(event){ console.log('Clientnotifiedsockethasclosed',event); }; //关闭Socket.... //socket.close() };

参数为URL,ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件,以表示Socket的状态。

JS阻止浏览器默认行为的方法?

阻止浏览器默认行为和防止事件传播主要通过先下面两个方法实现:

event.preventDefault():取消浏览器对当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。

event.stopPropagation():阻止事件在DOM中继续传播,防止再触发定义在别的节点上的监听函数。

请问js怎么添加监听p的长宽变化的事件?

jquery的resize可以实现,当id为p的元素大小发生变化时:

$('#p').resize(function(){

});

谷歌浏览器离开或刷新页面,如何设置提示?

要设置关闭或刷新的提示,如果你是谷歌浏览器用户,可以用Chrome插件,例如小乐图客,自定义JS脚本,来实现关闭网页前的提示如果你是网站开发者,可以在你的网站网页代码中,加入相应JS事件监听功能。

javascript自定义事件和方法的区别

一:首先看一下自定义事件和方法的实现方式

1. Javascript的自定义事件:
通常我们定义自定义事件的方法为:
a. 定义 : this.MyClick = null;
b.触发事件:在需要触发此事件的时候执行
if(this.MyClick ){ //判断是否有定义,是防止其他模块没有注册此事件,导致调用Myclick()的时候出现exception

this.MyClick (); //事件触发

}

b.绑定事件:其他模块可以监听此事件,当此事件发生的时候,可以执行自己模块所要执行的内容;
mymole.MyClick = function(){}; //mymole为触发MyClick事件的模块的实例对象;

2. Javascript方法
定义模块的时候,会定义相应的方法,其他模块可以调用;
模块a定义方式:this.myMethod = function(){};
其他模块使用方式: mymole.myMethod(); //mymole为模块a的实例对象

二:下面看一下他们两者的区别
从调用方式来看代码是一样的。
但是调用的内容以及时机是完全不一样的;
其实,自定义事件在javascript的概念中是没有的,但是javascript有回调的概念,所以,自定义事件实质是回调,在自己的模块注册这样的事件,当事件触发时,执行此事件的内容;自定义事件是一种逻辑的概念,它是回调但是执行方式和事件一样,所以称之为自定义事件;
而且事件执行的内容是注册事件模块的内容;
而方法的执行内容是定义此方法的模块的内容;
方法并不是回调。

javascript自定义事件和方法的区别

一:首先看一下自定义事件和方法的实现方式

1. Javascript的自定义事件:
通常我们定义自定义事件的方法为:
a. 定义 : this.MyClick = null;
b.触发事件:在需要触发此事件的时候执行
if(this.MyClick ){ //判断是否有定义,是防止其他模块没有注册此事件,导致调用Myclick()的时候出现exception

this.MyClick (); //事件触发

}

b.绑定事件:其他模块可以监听此事件,当此事件发生的时候,可以执行自己模块所要执行的内容;
mymole.MyClick = function(){}; //mymole为触发MyClick事件的模块的实例对象;

2. Javascript方法
定义模块的时候,会定义相应的方法,其他模块可以调用;
模块a定义方式:this.myMethod = function(){};
其他模块使用方式: mymole.myMethod(); //mymole为模块a的实例对象

二:下面看一下他们两者的区别
从调用方式来看代码是一样的。
但是调用的内容以及时机是完全不一样的;
其实,自定义事件在javascript的概念中是没有的,但是javascript有回调的概念,所以,自定义事件实质是回调,在自己的模块注册这样的事件,当事件触发时,执行此事件的内容;自定义事件是一种逻辑的概念,它是回调但是执行方式和事件一样,所以称之为自定义事件;
而且事件执行的内容是注册事件模块的内容;
而方法的执行内容是定义此方法的模块的内容;
方法并不是回调。

js如何自适应屏幕高度js如何自适应屏幕高度设置

如何在JavaScript中使用自定义事件

1。JavaScript的事件处理是所有浏览器端程序的基本功。当目标元素的事件被触发时,比如按钮点击、鼠标移动或者表单提交,这些事件可以触发相应的方法。当然,在这个过程中,我们可以通过一些参数来定义过去的很多东西。

需要避免的一点是事件和DOM元素之间的紧密耦合。例如,先看一下下面的代码,并考虑使用一个简单的表单来接受用户输入的信息。

2.我们可以写一个代码在屏幕上显示刚才表单提交的信息。

document.getelementbyid(msgbox提交

varmsg=e.currenttarget.getelementbyid(味精

如果(消息){

警报(消息);

}

},假);

那么,如果我们想对显示的句子做些什么,比如发送一条推文,或者将其存储在服务器中或做其他事情,该怎么办呢?有两种选择:

1.向现有事件处理方法添加代码。

这种方案的缺点是,无论何时想要测试或更新后来添加的事件处理方法,它都变得非常不灵活。每当一些功能被更改或删除时,总会有一大段代码需要修改。

2.为每个函数创建事件处理方法。

第二种方法很好的解决了前一种方法的问题,虽然这种方法一开始可能比较麻烦。毕竟,所有方法代码都必须处理重复的消息提取和验证步骤。

想象一下能够触发自定义的“新消息”事件不需要验证是否有消息提交,或者如果可以监控整个HTML文档或者body之类的标签而不仅仅是一个表单的节点,可以做到吗?这是自定义事件要解决的问题。

自己触发一个自定义事件非常简单;以下代码用于向新创建的CustomEvent对象传递名称、详细信息和选项:

varevent=新客户事件(

在这种情况下,newMessagemsgbox

网页设计:如何让页面宽度自适应,并且最宽值不大于1600px,最低不小于800px?求高手答?

1.你可以用js去计算在不同的宽度情况下,调用哪一个css,用if去判断;2.或者也可以设置min-width:800px和max-width:1600px;

如何使p中的图片自适应宽度和高度,图片不变形,可以超出p,超出部分隐藏?

像你这么说,貌似只有用js来判断了,首先给图片上下左右居中,给父级元素设置overflow:hidden;然后用过js来获取当前图片的宽高,如果宽度大于高度,那么就高度为100%,宽度自适应,反之宽度100%,高度自适应;

如何在JavaScript中使用自定义事件

在javascript中  ,document.createEvent()的函数来专门创建自定义事件。
自定义事件到激发这个事件,需要document.createEvent(),event.initEvent(),element.dispatchEvent()这三步,分别是创建事件对象,初始化事件对象,触发事件。

        function foo1(){
console.log("foo1 is execute");
}
function foo2(){
console.log("foo2 is execute");
}
var ev=document.createEvent('HTMLEvents');
ev.initEvent('fakeEvent',false,false);
document.addEventListener("fakeEvent",foo1,false);
document.addEventListener("fakeEvent",foo2,false);

如何在JavaScript中使用自定义事件

在javascript中  ,document.createEvent()的函数来专门创建自定义事件。
自定义事件到激发这个事件,需要document.createEvent(),event.initEvent(),element.dispatchEvent()这三步,分别是创建事件对象,初始化事件对象,触发事件。

        function foo1(){
console.log("foo1 is execute");
}
function foo2(){
console.log("foo2 is execute");
}
var ev=document.createEvent('HTMLEvents');
ev.initEvent('fakeEvent',false,false);
document.addEventListener("fakeEvent",foo1,false);
document.addEventListener("fakeEvent",foo2,false);

如何在JavaScript中使用自定义事件

在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:

function EventTarget(){

this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组

}

EventTarget.prototype = {

constructor:EventTarget,

//添加事件

addHandler:function(type,handler){

if(typeof this.handlers[type] == "undefined"){

this.handlers[type] = [];

}

this.handlers[type].push(handler);

},

//触发事件

fire:function(event){

if(!event.target){

event.target = this;

}

if(this.handlers[event.type] instanceof Array){

var handlers = this.handlers[event.type];

for(var i=0,len=handlers.length;i < len;i++){

//将event传递给事件处理程序,event.target代表对象本身,

event.type代表事件名,你可以根据情况为添加event属性

handlers[i](event);

}

}

},

//移除事件

removeHandler:function(type,handler){

if(this.handlers[type] instanceof Array){

var handlers=this.handlers[type];

for(var i=0,len=handlers.length;i < len; i++){

if(handlers[i] == handler){

break;

}

}

handlers.splice(i,1);

}

}

};

首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,

然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.

addHander是向handlers中添加事件处理程序

fire是触发handlers中的事件处理程序

removeHandler是向handlers中移除事件处理程序

注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.

如何在JavaScript中使用自定义事件

JavaScript 的事件处理是所有浏览器端程序的基本必备技巧。当目标元素的事件被触发时,比如按钮被点击,鼠标移动,或者是表单提交,这些事件触发时都可以触发对应的方法。当然这个过程中我们可以传递一些参数过去来自定义很多事情。

一个要注意避免的就是事件与DOM元素的紧耦合。比如先看看下面这个代码,考虑到用一个简单表单来接受用户输入的信息。

<form id="msgbox" action="#" method="get">

<label for="msg">your message</label>

<input id="msg" value="" />

<button>SEND</button>

</form>

我们能写一段代码让屏幕上显示刚才表单提交的信息

document.getElementById("msgbox").addEventListener("submit", function(e) {

e.preventDefault();

var msg = e.currentTarget.getElementById("msg").value.trim();

if (msg) {

alert(msg);

}

}, false);

那么如果我们想对显示出来的这句话做一些操作,比如发一条tweet,或存储在服务器或者干些其他什么?则有两个选择:

1,对已有的事件处理方法添加代码

这个方案的缺陷就是每当打算测试或者更新后来添加的事件处理方法时变得非常不弹性化,每当更改或者删除一些功能的时候,总会有一大段代码要跟着去修改。

2,为每一个功能都创建事件处理方法

第二个方法很好的解决了前面方法的问题,虽然这个方法可能会一开始麻烦点。毕竟所有的方法代码都要处理重复的消息提取以及验证步骤。

设想假如能够自行触发自定义的"newMessage"事件而无需验证是否有message提交,或假如能监控整个HTML文档或者body这样的标签而不仅仅只是某个表单的节点,能否做到呢?这就是自定义事件要解决的问题了。

自行触发一个自定义事件是很简单的;如下代码就是传递一个name,details以及options到新建的 CustomEvent对象中:

var event = new CustomEvent(

"newMessage",

{

detail: {

message: "Hello World!",

time: new Date(),

},

bubbles: true,

cancelable: true

}

);

这个案例中,"newMessage"是一个自定义事件类型。而第二个参数包含了此对象的三个属性(detail,bubbles,cancelable)。

detail: 包含了自定义事件的具体信息,这里仅仅就包括了一个message与一个time

bubbles: 如果是true,则事件会一直传递给自身的父对象元素,接着父对象也会触发此类事件

cancelable: 如果是true, 事件可以被事件触发元素的 stopPropagation( ) 方法停止

现在,我们需要针对某个特定元素来触发此类事件。

document.getElementById("msgbox").dispatchEvent(event);

可以用以下代码订阅这个事件的处理。

document.addEventListener("newMessage", newMessageHandler, false);

热乐宠物网还为您提供以下相关内容希望对您有帮助:

js如何自适应屏幕高度js如何自适应屏幕高度设置

1。JavaScript的事件处理是所有浏览器端程序的基本功。当目标元素的事件被触发时,比如按钮点击、鼠标移动或者表单提交,这些事件可以触发相应的方法。当然,在这个过程中,我们可以通过一些参数来定义过去的很多东西。需要避免的一点是事件和DOM元素之间的紧密耦合。例如,先看一下下面的代码,并考虑使用一个...

javascript自定义事件和方法的区别

其实,自定义事件在javascript的概念中是没有的,但是javascript有回调的概念,所以,自定义事件实质是回调,在自己的模块注册这样的事件,当事件触发时,执行此事件的内容;自定义事件是一种逻辑的概念,它是回调但是执行方式和事件一样,所以称之为自定义事件;而且事件执行的内容是注册事件模块的内容;而...

使用Javascript如何实现自定义事件机制

我们是自定义事件,不需要像原生事件一样指定是冒泡阶段触发还是捕获阶段触发,也不需要像jQuery里一样可以额外指定那些元素触发。而事件函数里面this一般都是当前实例,这个在某些情况下可能不适用,我们需要重新指定事件处理函数运行时的上下文环境。因此确定事件绑定时三个参数分别为:事件类型、事件处理函数、事件处理函数执行...

如何在JavaScript中使用自定义事件

在javascript中 ,document.createEvent()的函数来专门创建自定义事件。自定义事件到激发这个事件,需要document.createEvent(),event.initEvent(),element.dispatchEvent()这三步,分别是创建事件对象,初始化事件对象,触发事件。function foo1(){console.log("foo1 is execute");}function foo2(){cons...

javascript中自定义事件和声明调用函数有什么区别?

实际上事件机制就是从回调函数转化而来的。实际上事件模式算是订阅/发布模式的一种,它的好处在于绑定事件和触发事件是互相隔离的,并且可以动态的添加和删除。

js 里自定义事件_events:{} this._events[type]是什么意思??_百度知...

_events的type属性,或者_events的type方法的返回值。在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法)很简单,即:对象名.属性(方法)名 --- 除此之外,还可以用方括号的形式来引用:对象名["属性(方法)名"]注意,这里的方法名和属性名是一个字符串,而非原先...

js如何监听一个自定义事件js如何监听一个自定义事件

请问js怎么添加监听p的长宽变化的事件?jquery的resize可以实现,当id为p的元素大小发生变化时:('#p').resize(function(){ });谷歌浏览器离开或刷新页面,如何设置提示?要设置关闭或刷新的提示,如果你是谷歌浏览器用户,可以用Chrome插件,例如小乐图客,自定义JS脚本,来实现关闭网页前的提示如果你...

如何给树的父节点添加双击展开事件

1. 首先,需要获取到树的父节点元素,可以通过 DOM 操作或者使用相关的 JavaScript 框架来获取。2. 然后,给父节点元素绑定一个双击事件的监听器,可以使用 addEventListener() 方法或者相关框架提供的事件绑定方法。3. 在双击事件的监听器中,通过操作树的展开或折叠方法来实现节点的展开或折叠功能。具体...

javascript 自定义事件

我建议使用浏览器的开发者功能, F12在 javascript 语句中打断点,很方便的

javascript,jquery select控件的下拉触发事件是什么?不是change那个,有...

可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。[param1,param2,...] 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。实例:触发 select元素的change事件:("button").click(function(){ ("select").trigger("change");});...

Top