乐趣区

关于javascript:JS事件绑定的三种方法

jiezi

前言

在这个框架流行的时代，可能很多人曾经遗记了 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 指事件类型的字符串。例如 click、mouseout

③ 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>
退出移动版