个人中心
gpt4 book ai didi

JavaScript中自定义事件用法分析

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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中自定义事件用法分析的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
文章推荐： 解决springboot整合druid遇到的坑
文章推荐： 初探Spring Cloud Gateway实战
文章推荐： React实现阿里云OSS上传文件的示例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com