JavaScript中自定义事件用法分析
本文实例讲述了JavaScript中自定义事件用法。分享给大家供大家参考。具体分析如下：
在web前端开发中，很多人可能不会用到js的自定义事件，但如果是做一个相对来说比较大的项目，尤其是多人协同开发的时候，自定义事件就显得很重要了。那么，什么是js中的自定义事件呢？我们先来看一个例子：
前端开发员A封装了一个函数：
function move(){
alert(a); //以此来代表N行代码
}
过段时间，前端开发员B要在A的基础上丰富这个函数，于是，他会这样写：
function move(){
alert(a); //以此来代表N行代码
alert(b); //以此来代表N行代码
}
是不是发现了问题，B要注意和A的变量、函数等等的命名和冲突问题，又过段时间，前端开发员C也要丰富这个函数，于是：
function move(){
alert(a); //以此来代表N行代码
alert(b); //以此来代表N行代码
alert(c); //以此来代表N行代码
}
这时候会很令人抓狂了，C写起代码来我敢肯定不会很轻松。解决这个问题的方法就是通过自定义事件，我们知道一个元素身上可以添加相同的事件而不会各自影响，如：
window.addEventListener('click',function(){
alert(1);
} ,false);
window.addEventListener('click',function(){
alert(2);
} ,false);
点击页面的时候，1和2都会弹出，那么我们就可以用这种方法来定义我们的函数：
window.addEventListener('move',function(){
alert(3);
} ,false);
window.addEventListener('move',function(){
alert(4);
} ,false);
这样，我们执行move();的时候就会弹出3和4，这里的move就是自定义事件，它其实就是一个函数
下面看看如何给事件处理程序传递参数：
//将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; //定义args 用于存储传递给事件处理程序的参数
if (!obj) obj = window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function() {
this.onShow();
},
onShow: function() { }
}
function objOnShow(userName) {
alert("hello," + userName);
}
function test() {
var obj = new class1();
var userName = "test";
obj.onShow = createFunction(null, "objOnShow", userName);
obj.show();
}
"因为事件机制仅传递一个函数的名称，不带有任何参数的信息，所以无法传递参数进去",这是后话了，“要解决这个问题，可以从相反的思路去考虑，不考虑怎么把参数传进去，而是考虑如何构建一个无需参数的事件处理程序，该程序是根据有参数的事件处理程序创建的，是一个外层的封装。”，这里的“该程序”就是createFunction函数，它巧妙地利用apply函数将带参数的函数封装为无参数函数。最后我们看看如何实现自定义事件的多绑定：
// 使自定义事件支持多绑定
//将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; //定义args 用于存储传递给事件处理程序的参数
if (!obj) obj = window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function() {
if (this.onShow) {
for (var i = 0; i < this.onShow.length; i++) {
this.onShow[i]();
}
}
},
attachOnShow: function(_eHandler) {
if (!this.onShow) { this.onShow = []; }
this.onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert("hello," + userName);
}
function objOnShow2(testName) {
alert("show:" + testName);
}
function test() {
var obj = new class1();
var userName = "your name";
obj.attachOnShow(createFunction(null, "objOnShow", userName));
obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
obj.show();
}
我们看到，attachOnShow方法实现的基本思想是对数组的push操作，其实我们还可以在事件执行完成之后，移除事件处理函数，下面单独实现：
//将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; //定义args 用于存储传递给事件处理程序的参数
if (!obj) obj = window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function() {
if (this.onShow) {
for (var i = 0; i < this.onShow.length; i++) {
this.onShow[i]();
}
}
},
attachOnShow: function(_eHandler) { // 附加事件
if (!this.onShow) { this.onShow = []; }
this.onShow.push(_eHandler);
},
detachOnShow: function(_eHandler) { // 移除事件
if (!this.onShow) { this.onShow = []; }
this.onShow.pop(_eHandler);
}
}
function objOnShow(userName) {
alert("hello," + userName);
}
function objOnShow2(testName) {
alert("show:" + testName);
}
function test() {
var obj = new class1();
var userName = "your name";
obj.attachOnShow(createFunction(null, "objOnShow", userName));
obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
obj.show();
obj.detachOnShow(createFunction(null, "objOnShow", userName));
obj.show(); // 移除一个，显示剩余的一个
obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
obj.show(); // 两个都移除，一个也不显示
}
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍Javascript自定义事件详解，包括了Javascript自定义事件详解的使用技巧和注意事项，需要的朋友参考一下 Javascript自定义事件，其本质就是观察者模式（又称订阅/发布模式），它的好处就是将绑定事件和触发事件相互隔离开，并且可以动态的添加、删除事件。 下面通过实例，一步一步构建一个具体的Javascript自定义事件对象。 如：我有一个action1函数，我想每次在
-
问题内容： 我想知道是否有人可以帮助我理解如何准确地创建不同的自定义事件侦听器。 我没有事件的具体案例，但我想大致了解它是如何完成的，因此可以将其应用于需要的地方。 我想做的是，以防万一有些人可能需要知道的是： 问题答案： var evt = document.createEvent(“Event”); evt.initEvent(“myEvent”,true,true);
-
在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。 仅能在5+ App及流应用中使用
-
自定义事件主要会被用于框架、组件设计与实现中。 自定义的事件有许多的创建方式，但实际的业务场景中几乎不会被用到，网络上的文献记载其具体的使用场景也相对较少。 1. 使用 Event 构造函数 使用 Event 构造函数就可以创建一个自定义事件。 案例演示 预览 复制 复制成功！ <style> .btn { border: 1px solid #4caf50; padding: 8px 12p
-
我是测微计新手。我想记录诸如用户注册、用户登录等事件。我可以用测微计和Spring靴来完成这项工作，并在普罗米修斯/格拉法纳中显示数据吗？
-
本文向大家介绍详解javascript实现自定义事件，包括了详解javascript实现自定义事件的使用技巧和注意事项，需要的朋友参考一下 我们平时在操作dom时候经常会用到onclick，onmouseover等一系列浏览器特定行为的事件， 那么自定义事件，顾名思义，就是自己定义事件类型，自己定义事件处理函数，在合适的时候需要哪个事件类型，就去调用哪个处理程序 1.js所支持的浏览器默认事件 浏