js点击事件的多种写法

javascript 中的点击事件，可以通过多种不同的添加方式来实现。下面介绍三种 javascript 中添加点击事件的示例代码，个人可以根据自己的项目需要选择不同的实现方式。

js添加点击事件的代码

<!--html代码-->
<button id="mochu">我是按钮</button>
<script>
    var btn = document.getElementById('mochu');
    btn.onclick = function(){
        alert('飞鸟慕鱼博客');
    };
</script>

addEventListener() 方法添加点击事件

html DOM 中的 addEventListener() 方法可以向指定元素添加事件的句柄。它常用的为两个参数，一个为事件名称，另一个为事件触发的函数。

语法：

element.addEventListener(event, function)

示例代码：

<script>
    var btn = document.getElementById('mochu');
    btn.addEventListener('click', function () { 
        alert('http://www.feiniaomy.com') 
    }, 
    false);
</script>

DIV元素中直接加入点击事件

可以直接在DIV元素中添加 onclick 事件以及要执行的函数。

此种方法与第一种方法类似，只是代码的书写方式不同而已。

<!--html代码-->
<button onclick="a()">点击我</button>
<script>
    function a(){
        alert('我是弹出的内容');
    }
</script>