js常用拼接DOM写法+点击事件函数传值(简单数据类型和引用数据类型二)

范儿斯

已于 2022-12-06 09:41:12 修改

阅读量1.1k

点赞数 1

分类专栏： # js常用拼接方法和问题文章标签： javascript 前端开发语言

于 2022-12-05 12:17:53 首次发布

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/128180858

版权

js常用拼接方法和问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目场景：

提示：这里简述项目相关背景：

结上一节,现在需要在动态生成的DOM元素上绑定点击事件并且通过事件函数传值(简单数据类型和引用数据类型)

示例代码如下:


<body>

    <button id="btn">点击生成按钮</button>

</body>

<script>

 function getPrams1(params) {
        console.log("String类型传值:" + params)
    }
    function getPrams2(params) {
        console.log("ArrayString类型传值:" + params)
    }
    function getPrams3(params) {
        //console.log(JSON.parse(params))
        console.log("ArrayObj类型事件函数传值:" + params)
        
    }
    function getPrams4(that) {
        //console.log(that.getAttribute("data-a"))
        console.log("ArrayObj类型自定义属性传值:" + that.getAttribute("data-a"))

    }
    function getPrams5(params) {
        console.log("全局变量传值:" + params)

    }



	var abc="全局变量abc";
    $("#btn").click(function () {

        var strParams = "abc";
        var arrParams = [1, 5, 'a', 'b'];
        var objParams = [{ a: 8 }, { c: 6 }, { t: 89 }];
        var objParamsJson = JSON.stringify(objParams);

        //这里直接使用反引号``(模板字符串)拼接getPrams("")的方法
        //String类型传值直接拼接到getPrams("")引号中	
        var btn1 = `<br><button οnclick='getPrams1("${strParams}")'>String类型传值按钮</button>`;
        $("body").append(btn1);
        //ArrayString类型传值直接拼接到getPrams("")引号中,打印出来是 1,5,a,b 自动转为String带,号分割符
        var btn2 = `<br><button οnclick='getPrams2("${arrParams}")'>ArrayString类型传值按钮</button>`;
        $("body").append(btn2);
        //ArrayObj类型事件函数传值 JSON.stringify()转成JSON字符串直接拼接到事件函数getPrams("")引号中会造成双引号冲突,
        //这时候可以去掉getPrams("")中的引号用JSON.stringify()再转一次就不会冲突
        var btn3 = `<br><button οnclick='getPrams3(${JSON.stringify(objParamsJson)})'>ArrayObj类型函数传值按钮</button>`;
        $("body").append(btn3);
        //ArrayObj类型自定义属性传值 JSON.stringify()转成JSON字符串直接拼接到自定义属性中,获取的时候用
        //that.getAttribute("data-a")直接获取						         
        var btn4 = `<br><button data-a='${objParamsJson}' οnclick='getPrams4(this)'>ArrayObj类型属性传值按钮</button>`;
        $("body").append(btn4);

        //强调一下无论什么方法拼接,事件函数括号中一定要带有引号不然渲染到页面会当做变量解析
        //这里试一下不带引号getPrams5()会发生什么,html里面会直接把strParams的值abc当做全局变量解析会报undefined
        var btn5 = `<br><button οnclick='getPrams5(${strParams})'>全局变量传值按钮</button>`;
        $("body").append(btn5);



    })

</script>

打印展示:

在这里插入图片描述

重点分析：

1,String类型传值直接拼接到getPrams("")引号中.

2,ArrayString类型传值直接拼接到getPrams(“”)引号中,打印出来是 1,5,a,b 自动转为String带,号分割符.

3,ArrayObj类型事件函数传值 JSON.stringify()转成JSON字符串直接拼接到事件函数getPrams(“”)引号中会造成双引号冲突,这时候可以去掉getPrams("")中的引号用JSON.stringify()再转一次就不会冲突,使用时再用JSON.parse(params)转回来.

4,ArrayObj类型自定义属性传值 JSON.stringify()转成JSON字符串直接拼接到自定义属性中,获取的时候用that.getAttribute("data-a")直接获取,使用时再用JSON.parse(params)转回来.

5,强调一下无论什么方法拼接,事件函数括号中一定要带有引号不然渲染到页面会当做变量解析,
这里试一下不带引号getPrams5()会发生什么,html里面会直接把strParams的值abc当做全局变量解析会报undefined.

范儿斯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js常用拼接DOM写法+点击事件函数传值(简单数据类型和引用数据类型二)

结上一节,现在需要在动态生成的DOM元素上绑定点击事件并且通过事件函数传值(简单数据类型和引用数据类型)示例代码如下:重点分析：1,String类型传值直接拼接到2,ArrayString类型传值直接拼接到getPrams(“”)引号中,打印出来是 1,5,a,b 自动转为String带,号分割符.3,ArrayObj类型事件函数传值 JSON.stringify()转成JSON字符串直接拼接到事件函数getPrams(“”)引号中会造成双引号冲突,这时候可以就不会冲突,使用时再用转回来.4,Arra
复制链接

扫一扫