网上很多关于用js和jquery设置html标签的onclick函数的例子,我下面写的这些都是我参考别人的代码并亲自测试之后作出的总结,记下来存档方便以后用,若大神们看到有不对的地方请留言。
测试用js函数:
function test(){
alert("test");
}
function test1(k){
alert("test1=="+k);
}
function init(){
//在此添加测试代码
document.getElementById('testJS').onclick = function(){test()};
}
测试用html代码:
<button id="testJS" οnclick="init()">点击测试</button>
一,原生js方式:
1,设置的js函数不带参数:
A,document.getElementById('testJS').onclick = function(){test()};
测试可用。并且设置之后不会马上执行test()函数,必须点击button之后才会执行。
B,document.getElementById('testJS').onclick = test();
测试可用。但是设置之后会马上执行test()函数。
C,document.getElementById('testJS').onclick = Function("test()");
测试可用。设置之后不会马上执行test()函数,必须点击button之后才会执行。
document.getElementById('testJS').onclick = Function(test());D,
测试可用。但是设置之后会马上执行test()函数。
2,设置的js函数带参数
A,ddocument.getElementById('testJS').onclick = function(){test1(1)};
测试可用。并且设置之后不会马上执行test1()函数,必须点击button之后才会执行。
B,document.getElementById('testJS').onclick = test1(1);
测试可用。但是设置之后会马上执行test1(1)函数。
C,document.getElementById('testJS').onclick = Function("test1(1)");
测试可用。设置之后不会马上执行test1(1)函数,必须点击button之后才会执行。
D,document.getElementById('testJS').onclick = Function(test1(1));
测试可用。但是设置之后会马上执行test1(1)函数。
PS:以上测试是在谷歌浏览器下测试,其他浏览器未测。另还有一种方式就是利用attachEvent和addEventListener事件进行添加,用detachEvent和removeEventListener进行移除,不过查了查,发现这几个事件在不同浏览器里面差异很大,所以没去试,一般的设置用上面的已经ok的了。