前言：事件的绑定方式主要有两大类：在html中直接绑定和在js中绑定，细分的话可以有三种（js有两种）。
函数名或者函数表达式后面紧跟 () ，则会自动调用。
1.内联模式：将函数名直接作为html标签中的属性的属性值-----------这种的缺点是：不符合行为分离的基本规范
这种方式叫做内联绑定事件，HTML的元素中如有 'onclick' 这样的 'onxxx' 属性，它可以给这个DOM元素绑定一个类型的事件，它也有两种形式。
（1）：就是用函数名表示。
<button id="myButton" onclick="func()">点击</button>
<body>
<script type="text/javascript">
function func() {
alert('我被点击了1')
}
</script>
</body>
注意：这种方式不加括号点击是不执行的，这是由于：：：：在标签内的事件属性的值是由引号包裹的，代表的是当点击该元素时，执行引号内的代码，直接把引号内的代码拿出来跑，如果你不加括号，那就不会调用那个函数。：：：：
（2）：字符串里面是一段函数表达式。
<button onclick="alert('我被点击了')">点击</button>
2.脚本模式：获取节点并给节点添加属性
<button class="mybutton">点击</button>
<body>
<script type="text/javascript">
let btn = document.querySelector('.mybutton')
btn.onclick = function dd1 () {
console.log('我被点击了1')
}
btn.onclick = function dd2 () {
console.log('我被点击了2')
}
btn.onmouseenter = function () {
console.log('我被进入了')
}
btn.onmouseleave = function cc () {
console.log('我被离开了')
}
</script> </body>
上面的函数加不加名字都可以
这种方式虽然实现了分离，但只能给btn添加一个函数，再次使用同样的事件就会被覆盖，上面的只会输出第二次点击事件，第一次的被覆盖。
但是不是说上面的mouseenter就会覆盖onclick事件，事件名不同是不会相互干扰的。
3.dom2级事件：使用addeventListenter
btn.addEventListener('click', function () {
console.log('我被点击了1')
})
btn.addEventListener('click', function () {
console.log('我被点击了2')
})
上面点击按钮，两个事件都会执行，点一次，输出两句。并且执行顺序按照绑定的顺序执行，并且有相应的移除方法，因此首推荐这种！！！！！
延伸1：加括号
let btn = document.querySelector('.mybutton')
btn.addEventListener('click', fun1())
function fun1 () {
alert('我被点击了')；
}
函数名后边加上括号表示立即执行该函数，如果函数内存在返回值则得到该值。上面的例子加上括号，就会执行函数，也就是你还没点击函数就会执行一次，后面点击了不会有任何效果。这一点与内联模式看着貌似效果相反，其实不是，
那是因为：标签的事件属性里引号之间会被当做js语句直接执行，加了括号才能保证调用并执行函数。但是由于是用元素标签这种方式绑定的事件，执行的时机就被控制在了点击该标签时触发。
延伸2：不加括号
btn.addEventListener('click', fun1)
这种情况是只把函数名传给事件，相当于将函数指针传递给元素事件，这样的好处就是可以在需要的时候找到函数并执行。
打个小比喻来说，你和你的朋友会面，加了小括号时你的朋友就立即出现在你面前，他才不管你当时是不是在忙，有种不请自来的不快感；而不加括号相当于你的朋友告诉了你他家在哪，当你需要他的时候就来找他，这可真是位贴心的朋友啦。所以，大多数事件绑定都仅仅只是传递给事件一个函数指针也就是函数名。
/*简单来说就是带括号的是执行一次函数，不带括号的函数就是一个函数对象*/
拓展1：在vue中加不加括号都可以正确执行的原因
而在vue中使用@click绑定事件加不加括号都行，它会给你处理的加括号的话，参数由你定义，不加括号的话，传入的参数是默认的event事件
拓展2：在DOM2级事件中如何传参
这时又有一个问题，之前说明的都是无参函数，如果有参函数怎么办呢？难道只能用内联那种方法么？当然是否定的，尽量不要使用DOM0方式一那种形式，不符合结构与行为分离的原则。一般这种情况下就是使用匿名函数解决了，例如：
思路就是return一个函数。//第一种
let btn = document.querySelector('.mybutton') btn.addEventListener('click', y('hello1')) function y(d) { return function () { console.log(d) } }
//第二种：采用箭头函数 const z = (d) => { return function () { console.log(d) } } btn.addEventListener('click', z('hello2')) //第三种：使用匿名函数 btn.addEventListener('click', function () { console.log('hello3') })
拓展3：函数有变量提升
拓展4：addeventListener绑定事件名称
在 JavaScript 中，使用 addEventListener 方法时，事件名称使用的是事件的标准名称（如 click、mouseover 等），而不是使用 on 前缀（如 onclick、onmouseover），是为了遵循规范和保证代码的一致性和可读性。
onclick 是一个事件处理属性，用于指定当元素被点击时要执行的 JavaScript 代码。它是 DOM 元素的一个属性，可以直接在 HTML 中定义。
标签：function,函数,绑定,括号,点击,html,事件,btn From： https://www.cnblogs.com/131362wsc/p/18662142