JavaScript 事件

1. 事件

  • 关于事件实际上我们已经初步接触过了,指的就是 用户与浏览器交互的一瞬间。
  • 我们通过为指定事件绑定回调函数的形式来处理事 件,当指定事件触发以后我们的回调函数就会被调 用,这样我们的页面就可以完成和用户的交互了。
  • 这里我们还要更加深入的聊一聊事件的其他内容

2. 事件处理程序

  • 我们可以通过两种方式为一个元素绑定事件处理程序:
    • 通过HTML元素指定事件属性来绑定
    • 通过DOM对象指定的属性来绑定
  • 这两种方式都是我们日常用的比较多的,但是更推荐使 用第二种方式。
  • 还有一种方式比较特殊我们称为设置事件监听器。
    • 使用 如下方式:元素对象.addEventListener()

3. 通过HTML标签的属性设置

通过HTML属性来绑定事件处理程序是最简单的方式。
<button onclick=”alert(‘hello’);alert(‘world’)”>按钮</button>

  • 这种方式当我们点击按钮以后,onclick属性中对应的JS代码将 会执行,也就是点击按钮以后,页面中会弹出两个提示框。
  • 这种方式我们直接将代码编写到了onclick属性中,可以编写多 行js代码,当然也可以事先在外部定义好函数。
  • 这种方式的优点在于,设定步骤非常简单,并且能够确保事件 处理程序会在载入时被设定。
  • 如果在函数的最后return false则会取消元素的默认行为。
<button onclick="alert('hello');alert('world')">按钮</button>

4. 通过DOM对象的属性绑定

  • 但是其实上面的写法虽然简单,但却将JS和HTML 的代码编写到了一起,并不推荐使用,我们更推荐 如下的写法: var btn = document.getElementById(‘btn’); btn.onclick = function(){ alert(“hello”); };
  • 这种写法将HTML代码和JS写在不同的位置,维护 起来更加容易。
var btn = document.getElementById('btn'); 
btn.onclick = function(){ alert("hello"); };

5. 设置事件监听

  • 前边两种方式都可以绑定事件处理程序,但是它们都有一个缺 点就是都只能绑定一个程序,而不能为一个事件绑定多个程序。
  • 这是我们就可以使用addEventListener()来处理,这个方法需 要两个参数:一个是事件字符串,一个是响应函数。btn.addEventListener(‘click’ , function(){alert(“hello”);})
  • 但是要注意的是ie8以下的浏览器是不支持上边的方法的,需要 使用attachEvent代替。
  • 也可以使用removeEventListener()和detachEvent()移除事件
btn.addEventListener('click' , function(){alert("hello");})

6. 事件处理中的this

  • 在事件处理程序内的 this 所引用的对象即 是设定了该事件处理程序的元素。
  • 也就是事件是给那个对象绑定的this就是哪 个对象。

7.事件对象

  • 在DOM对象上的某个事件被触发时,会产生一个 事件对象Event,这个对象中包含着所有事件有关 的信息。包括导致事件的元素、事件的类型以及其 他与特定事件相关的信息。
  • 例如,鼠标操作导致的事件对象中,会包含鼠标位 置的信息,而键盘操作导致的事件对象中,会包含 与按下的键有关的信息。所有浏览器都支持 event 对象,但支持方式不同。
  • DOM标准的浏览器会将一个event对象传入到事件的处理程序 当中。无论事件处理程序是什么都会传入一个event对象。
  • 可以通过这种方式获取:btn.onclick = function(event){ alert(event.type);};
  • Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。
btn.onclick = function(event){ 
alert(event.type);
};

8. Event对象的通用属性/方法

9. IE中的事件对象

  • 与访问DOM中的event对象不同,要访问IE中 的 event 对象有几种不同的方式,取决于指定事件 处理程序的方法。
  • 在IE中event对象作为window对象的属性存在的, 可以使用window.event来获取event对象。
  • 在使用attachEvent()的情况下,也会在处理程序中 传递一个event对象,也可以按照前边的方式使用。

10. IE浏览器Event对象的通用属性/方法

11. 事件触发

  • 事件的发生主要是由用户操作引起的。
  • 比如mousemove这个事件就是由于用户移动鼠标引起 的,在鼠标指针移动的过程中该事件会持续发生。
  • 当指定事件被触发时,浏览器就会调用对应的函数去响 应事件,一般情况下事件每触发一次,函数就会执行一 次。
  • 因此设置鼠标移动的事件可能会影响到鼠标的移动速度。 所以设置该类事件时一定要谨慎。

12. 事件的传播

  • 在网页中标签与标签之间是有嵌套关系的,比如这样一个页面:

<html> <body>

<div id=”foo”>
<button id=”bar”>sample</button>

</div> </body>

</html>

• 如果这时用户点击了sample按钮,则会以该按钮作为事件目标触发一次点击 事件。

• 这时,事件的处理将会分为捕获阶段、目标阶段、事件冒泡这三个阶段。

<html> 
<body>
  <div id="foo">
    <button id="bar">sample</button>
  </div> 
</body>
</html>

13. 事件传播流程

14. 事件传播

  • 捕获阶段:这一阶段会从window对象开始向下一直遍历到目标对象,如果发现有对象绑定了响应事件则做相应的处理。
  • 目标阶段:这一阶段已经遍历结束,则会执行目标对象上绑定的响应函数。
  • 事件冒泡阶段:这一阶段,事件的传播方式和捕获阶段正好相反,会从事件目标一直向 上遍历,直至window对象结束,这时对象上绑定的响应函数也会执行。

15.取消事件

  • 我们可以使用event对象的两个方法完成: stopPropagation() ,stopImmediatePropagation()
  • 取消默认行为: preventDefault()

Leave a Reply

您的邮箱地址不会被公开。 必填项已用 * 标注