JS事件绑定的三种方法

Posted 李不要熬夜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS事件绑定的三种方法相关的知识,希望对你有一定的参考价值。

前言

在这个框架盛行的时代,可能很多人已经忘记了JS一些基础的方法。虽然说现在在项目都(应该)很少用 原生JS写代码了,但我听说过这样一句话, "对底层知识了解得越深,能达到得水平也就越高。"所以JS原生API还是要熟悉的。 这一篇总结了基础的JS事件绑定,介绍了三种绑定事件的方法。

  • html 中直接绑定
  • javascript 中绑定
  • 绑定事件监听函数 addEventListener()

方法

1. 在 HTML 中直接指定

例如鼠标单击事件 onclick 、双击事件 onmouseover 、鼠标移入移出事件 onmouseover 、onmouseout 。又可分为两种。 ① 直接写在 HTML 的属性中

<button onclick="alert(\'hello world\')">Click</button>

② 在 HTML 中自定义函数

<button onclick="func()">Click</button>
<script type="text/javascript">
  var func = () => {
    alert(\'hello world\')
  };
</script>

2、在 Javascript 中 绑定

第一种方法将JS事件和HTML标签写在一起,不利于项目的管理和开发。为了使代码结构清晰合理,按照不同功能将其分离将提高效率。

<button id="btn">Click</button>
<script type="text/javascript">
  document.getElementById(\'btn\').onclick = func; // 这里要写上括号,否则会出现意想不到的结果,可以去试试
  function func() {
    alert(\'hello world\');
  }
</script>

3. 绑定事件监听函数 addEventListenr()

第二种方法比第一种好,但也有不足之处。一般一个点击事件上有时候不止触发一个事件。一种设想是把 func() 函数再套一层函数,比如把定义的函数 a() 和 b() 放在 func() 中。但是这样未免太过烦琐了,于是使用 addEventListenr()

(1) 语法

target.addEventListener(type, listener, options);

① target 是DOM 操作获得的对象

② type 指事件类型的字符串。例如 clickmouseout

③ listener 在这里指当事件出发的时候执行的函数。可直接写函数名,也可直接定义函数然后用引号括起来。

④ options 可选。具体见参考链接。

(2) 实例

<button id="btn">Click</button>
<script type="text/javascript">
  const dom = document.getElementById(\'btn\');
  dom.addEventListener(\'click\', func1);
  dom.addEventListener(\'mouseout\', func2);
  function func1() {
    alert(\'hello\')
  };
  function func2() {
    alert(\'world\')
  }; 
  // 鼠标点击事件和移开鼠标事件都被执行,分别输出 hello、world
</script>

以上是关于JS事件绑定的三种方法的主要内容,如果未能解决你的问题,请参考以下文章

原生JS事件绑定的三种方式

js中的事件绑定的三种方式

JS中事件绑定的三种方式

JS事件绑定的三种方式比较

JS事件的三种方式

JavaScript中事件绑定的三种方式