html onclick传递多个参数,js onclick事件传参数的方法分析

本节内容：

js中的onclick事件传参

1、在页面中给方法传参数，有如下的两种方法：

方法1，οnclick=cancel(id，patientId);在js文件中定义cancel方法

如果要把当前对象传过去用οnclick="cancel(this,id,patientId)"

js中cancel(obj，id，patientId)

方法2，在js中用

复制代码 代码示例:

jquery$(function(){

var patientId=$("a").attr("patientId");

}),在页面中

2、onclick事件

一)js修改onclick动作的四种方式

第一种：

复制代码 代码示例:

button.onclick = Function("alert('hello');");

第二种：

复制代码 代码示例:

button.onclick = function(){alert("hello"); };

第三种：

复制代码 代码示例:

button.onclick = myAlert;

function myAlert(){

alert("hello");

}

第四种：

这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)。

复制代码 代码示例:

if(window.addEventListener){ // Mozilla, Netscape, Firefox

//element.addEventListener(type,listener,useCapture);

button.addEventListener('click', alert('11'), false);

button.addEventListener('click', alert('12'), false);//执行顺序11 -> 12

} else { // IE

button.attachEvent('onclick', function(){alert('21');});

button.attachEvent('onclick', function(){alert('22');});执行顺序22 -> 21

}

实例讲解：

复制代码 代码示例:

button.onclick = Function("alert('31');");

button.onclick = Function("alert('32');");

button.onclick = Function("alert('33');"); //如果这样写,那么将会只有最后一个方法被执行

button.attachEvent("onclick", function(){alert('41');});

button.attachEvent("onclick", function(){alert('42');});

button.attachEvent("onclick", function(){alert('43');}); //如果这样写,三个方法都会被执行

//当然，也可以这样写

button.onclick = Function("alert('51');");

button.attachEvent("onclick", function(){alert('52');});

//对应移除事件  www.jquerycn.cn

detachEvent('onclick',func);//ie下使用删除事件func

removeEventListener('click',func);//Mozilla下，删除事件func

二)JS动态设置标签的onclick属性

使用JS动态设置标签的onclick属性对应方法，不能直接使用=“方法名” 的方式

如：

复制代码 代码示例:

document.getElementById("id").onclick =“methodName();”//错误

正确应使用=funciton(){methodsName}

document.getElementById("id").onclick = function() {//正确

submitHobby();

}

补充，设置传参的onclick函数，可以用jquery的click方法，如下：

复制代码 代码示例:

$(qtyObj).next().next().click(function(){

auVillusUsed(id0,id1,id2);

});

$(qtyObj).next().next().click(function(e){

var obj=e.target;

//再通过e.target去获取需要的变量参数。

});