Javascript中click点击事件的若干种种写法

发表于 |

第一种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法一</title>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick=function(){
            alert("hello world");
        }
    </script>
</body>
</html>

移除事件:

1
btn.onclick=null;

第二种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法二</title>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.addEventListener('click',function(){
            alert("hello wrold");
        },false)
    </script>
</body>
</html>

第三种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法三</title>
    <script type="text/javascript">
        function test(){
            alert("hello world");
        }
    </script>
</head>
<body>
    <button id="btn" onclick="test()">click</button>
</body>
</html>

第四种

模拟触发事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html> 
  <head> 
    <title>usually function</title> 
  </head> 
  <script> 
function load(){ 
  //下面两种方法效果是一样的 
 document.getElementById("target").onclick(); 
  document.getElementById("target").click(); 
} 
function test(){ 
  alert("test"); 
} 
</script> 
  <body onload="load()"> 
    <button id="target" onclick="test()">test</button> 
  </body> 
<html>

本文为作者原创 转载时请注明出处 谢谢

img

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%