点击传参，字符串拼接

常用字符串拼接传参

初始化变量时，js 不允许左边是表达式

 function  auto(num){
     // var一个变量
      var name = "test"+num;   //生成函数名
      window[name] = 100;
      window['name'] = 200;   //注意看中括号里的内容加引号和不加引号的区别
 }

• window用中括号的方式定义 变量时，中括号里的内容应该是字符串。
• 如果是一个变量的话，他就会解析这个变量找到具体的值。

*拼接参数案例

声明变量
var str_a = '你好';
var str_b = 'hello';
function test(s){
    return window['str_' + s];
}
//调用方法并传入参数
console.log(test('a')); //你好
console.log(test('b')); //hello

'<a οnclick="editCsRole(roleId)" class="openNewTab">编辑</a>';
其中 roleId 是变量，为实现数据的有效传递对 roleId 嵌套拼接如下，
var param="'"+roleId+"'";
var a = '<a οnclick="editCsRole('+ param +')" class="openNewTab">编辑</a>';
上述，单引号和双引号是交替实用的，因此，可以简化为如下形式：
var a = '<a οnclick="editCsRole('+"'"+roleId+"'"+')" class="openNewTab">编辑</a>';

js 拼接字符的两种语法

//可以这样引入变量作为字符串形式：**“+变量+”**；
//如果外面有引号**，则如下：**‘”+变量+”’或\”“+变量+”\”**
//可以这样引入变量作为字符串形式："+变量+"
//这是语法，不要纠结
/如果外面有引号，则如下：'"+变量+"'  或    \""+变量+"\"
str = str + "<a href='#' title='详情' class='qq' οnclick='auto(\""+data.id+"\")'></a>";

1.拼接的时候采用内双外单或相反的格式,保证引号是一对一对的
2 超过两层关系 就要用转义

//js代码
str +='<a href="#" οnclick=test("' + p1+ '","'+ p2+ '",' + p3+ ');>'+链接+'</a>';
//或者
str+="<a href='javascript:void(0);' οnclick=\"test('" + p1 + "','" + p2 + "'," + p3 +");\">链接</a>";
页面显示效果如下:

 <a href="javascript:void(0);" οnclick="test('p1','p2',p3);">链接</a>

js 拼接传参 点击事件

 <div id="box">
 </div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
    function show(a,b) {
        //console.log(a.name);
        //console.log(a.age);
        console.log(a);
        console.log(b);
    }
 
    function show2(a) {
        console.log(a);
        alert(a);
        console.log(a.name);
        console.log(a.age);
 
    }
 
    var arr = [
        {
            name:'wangwu',
            age:23,
            hight:[180,180,180]
        },
        {
            name:'zhangsan',
            age:22,
            hight:[180,160,180]
        },
        {
            name:'lisi',
            age:21,
            hight:[180,170,180]
        }
    ] 
    var ht=''
    for(var i=0 ; i< arr.length ; i++){       
        //错误，点击事件不触发程序已执行
        //ht = ht + '<div><button οnclick="show(arr[i].name,arr[i].age)">我是按钮'+i+'</button></div><br>'
 
        //错误,点击事件在页面加载时候就已执行
        //ht = ht + '<div><button οnclick="'+show(arr[i].name,arr[i].age)+'">我是按钮'+i+'</button></div><br>'
 
        //错误点击事件不触发
        //ht = ht + '<div><button οnclick="show('+arr[i].name+','+ arr[i].age +')">我是按钮'+i+'</button></div><br>'
 
        //错误
        //ht = ht + '<div><button οnclick=show2("'+arr[i]+'")>我是按钮'+i+'</button></div><br>'
        //使用转义字符
        // ht="<a href='#' onclick = 'show(\""+ arr[2].name +"\")'> 转义</a > "
         //使用转义字符传递两个参数
    // ht= "<a href='#' οnclick=\"show2('" + arr[2].name + "','" + arr[2].age + "')\">a标签</a>"
         //正确传递一个参数
         // var ht = '<button οnclick=show("' + arr[0].name + '")>我是按钮</button>'  
        
        //正确 传递两个参数
        //ht = ht + '<div><button οnclick=show("'+arr[i].name+'","'+ arr[i].age +'")>我是按钮'+i+'</button></div><br>'
        
        //正确案例 传递json数据
        ht = ht + '<div><button οnclick=show2('+JSON.stringify(arr[i])+')>我是按钮'+i+'</button></div><br>'
 
    }
    $('#box').append(ht)
</script>

绑定事件的两种方式

在属性上绑定事件案例

<div onclick=“ck('hello')” id=“div”></div>
<script>
    function ck(str){
        console.info(str);
    }
</script>123456

注意：在属性上绑定事件，是方法的调用，因此需要加（）表示调用此方法，如果需要传入参数则写入准确的参数。此方法可以传参数

动态绑定

直接把方法名赋给属性。

这种方式一般绑定不带参数的方法。如果给属性绑定带参数的方法，会默认传递事件对象。

<script>
    var odiv = document.getElementById(“div”);
    odiv.onclick = auto;//此处不能带（）
    function auto(){
        console.info("hello");
    }
</script>

给属性定义匿名方法。这种方法不能传参数。

<script>
    var odiv = document.getElementById(“div”);
    匿名点击事件方法
    odiv.onclick = function (){
        console.info("hello");
    }
</script>

可以的传参事件

//定义一个传入参数的函数
function method(str){
    console.info(str);
}
//在匿名函数里面调用method函数，并传入参数
div.onclick = function(){
   调用函数方法，并传入方法
    method("hello");
}

绑定到元素上的事件不能直接传参

要想实现点击传参，可以调用其他函数

        错误案例  在此处点击事件不能传递参数
        //$("#btnsure").on('click', function (e,obj) {
       //   console.log(obj)
      //    a(obj)
     // })
    // 正确案例
      $("#btnsure").on('click', function (e) {
        // console.log(obj)
          调用函数，并携带参数
         a(obj)
      })
    
    var obj = [
           {
               name:'wangwu',
               age:23,
               hight:[180,180,180]
           },
    
           {
               name:'zhangsan',
               age:22,
               hight:[180,160,180]
           },
           {
               name:'lisi',
               age:21,
               hight:[180,170,180]
           }
       ]
    function a( obj) {
      console.log(obj);
    }