Python测开28期-偕行-JavaScript事件

学习笔记
1

一、JavaScript事件

1、什么是事件

  • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情。

  • js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为；

  • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

2、事件的三要素

    1. 事件源：事件被触发的对象，就是谁触发了这个事件；
    1. 事件类型：如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下。
    1. 事件处理程序：通过一个函数赋值的方式完成。

3、 事件执行的步骤

  • 1、获取事件源

  • 2、注册事件（也叫绑定事件）

  • 3、添加事件处理程序（ 一般用function函数）

二、常见事件

1、 鼠标事件

2、键盘事件

3、触摸事件

4、 表单事件

5、 过渡事件

6、 动画事件

三、事件对象

  1. 事件对象
  2. 鼠标事件对象
  3. 键盘事件对象
  4. 触摸事件对象
属性 此事件发生在何时…
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onchange 域的内容被改变。
onblur 元素失去焦点。
onfocus 元素获得焦点。
onload 一张页面或一幅图像完成加载。
onsubmit 确认按钮被点击；表单被提交。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按住。
onkeyup 某个键盘按键被松开。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseout 鼠标从某元素移开。
omouseover 鼠标移到某元素之上。
onmousemove 鼠标被移动。

四、注册事件(事件绑定)

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()；

  • 语法：target.addEventListener(type, listener, options);

    • target 是DOM 操作获得的对象

    • type 指事件类型的字符串。例如 click、mouseout

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

    • options 可选

<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>