Andy's blog

给标签绑定事件是非常重要的功能，经常用到的有点击事件，如登陆，注册等。而针对按钮的点击事件就有不同的写法。因为前端内容好多忘记了，经常搞混，所以需要经常总结，帮助记忆。总结真的是非常重要的学习方式。

方式一：直接在标签内写函数（带括号）不建议使用

有的写作onclick="function1();"，暂时没有发现用不用分号的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签内绑定事件</title>
    <link rel="stylesheet" type="text/css" href=""/>
    <script language="javascript" type="text/javascript"></script>
</head>
<body>
<button onclick="function1()">点我</button>

</body>
<script>
    function function1() {
       console.log('点我干啥！');
    }
</script>
</html>

这种情况下还可以将js代码改成这样：

<script>
    function1=function () {
       console.log('点我干啥！');
    }
</script>
</html>

之前有遇到上面第一种js写法，一直提示function1未定义的情况，网上查的某些博客说要写成第二种方式，stackoverflow上很多这种类似的问题，但没有人说清为什么（可能我还没搜索到）。但后面遇到在代码没有修改的情况下，这咱方式一会正常，一会又提示undifined的情况，所以极不建议使用上面这种绑定方式。

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签内绑定事件</title>
    <link rel="stylesheet" type="text/css" href=""/>
    <script language="javascript" type="text/javascript"></script>
</head>
<body>
<button id='btn'>点我</button>

</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick=function () {
       console.log('点我干啥！');
    }

</script>
</html>

后面的是使用Jquery的方式：

方式三：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标签内绑定事件</title>
    <link rel="stylesheet" type="text/css" href="" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <button id='btn'>点我</button>
</body>
<script>
var btn = $('#btn');
btn.click(function() {
    console.log('点我干啥！');
})
</script>

</html>

方式四：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标签内绑定事件</title>
    <link rel="stylesheet" type="text/css" href="" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <button id='btn'>点我</button>
</body>
<script>
var btn = $('#btn');
btn.on('click', function() {
    console.log('点我干啥！');
})
</script>

</html>

不同的是方式四中可以绑定多个事件：

var btn = $('#btn');
btn.on('click mouseout', function() {
    console.log('点我干啥！');
})
</script>

</html>

这样当我点击时会打印一次，当我鼠标移出按钮范围又会打印一次。

这种情况更优雅的写法是这样的，而且可读性也更强，但是注意，它比上面的方法多一个{}，多个事件写在这个大括号里的。

<script>
var btn = $('#btn');
btn.on({
    'click': function() {
        console.log('点我干啥！');
    },
    'mouseout': function() {
        console.log('点我干啥！');
    }
})
</script>

简单对比一下你会发现，在原生的js中，是onclick方法，而没有click方法，click方法是在jquery中的方法。当你把这两种方式搞混了时，就可能发现代码根本没有运行，还找不到原因的情况，一定注意。

标签绑定事件的几种方式

方式一：直接在标签内写函数（带括号）不建议使用

方式二：

方式三：

方式四：