JavaScript之事件详解-04

大龙问道

已于 2024-03-31 10:04:38 修改

阅读量600

点赞数 14

分类专栏： JavaScript 文章标签：前端

于 2024-03-28 23:20:36 首次发布

本文链接：https://blog.csdn.net/qq_45027843/article/details/137092097

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、什么是事件？

1.1 、事件实际上指的是用户和浏览器交互的一瞬间。

1.2 、我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件被触发以后，我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。

2、事件处理程序

2.1 、我们可以通过两种方式为事件绑定处理程序：这两种都是更推荐使用第二种；

通过HTML元素指定事件属性来绑定

通过DOM对象指定的属性来绑定

2.2 、还有一种方式比较特别，我们称之为设置监听器：

元素对象.addEventListener()

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

3.1、通过HTML属性来绑定事件处理程序是最简单的方式

<button onclick = "alert('hello');alert('world')">按钮</button>

3.2、这种方式当我们点击按钮之后，onclick属性中对应的JS代码将会执行，也就是点击按钮后弹出两个提示框。这种方式也可以编写多行JS代码，当然也可以事先在外部定义好函数。

3.3、这种方式的优点在于，设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。如果函数的最后 return false；则会取消元素的默认行为。

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

4.1、其实上述方法虽然简单，但却将 HTML 代码和 JS代码编写到了一起，并不推荐使用，更推荐如下的写法：

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("hello");
}

4.2、这种写法将HTML和JS写在不同位置，维护起来更加容易。

5、设置事件监听器

5.1、前面两种方式都可以绑定事件处理程序，但是它们的缺点就是只能绑定一个程序，而不能一个事件绑定多个程序。这时我们可以采用addEventListener()来处理，这个方法需要两个参数，一个事件字符串，一个响应函数。

btn.addEventListener('click',function(){alert("hello");});

5.2、但是需要注意的是，ie8以下的浏览器是不支持以上的写法的，需要用attachEvent来代替。

5.3、也可以使用 removeEventListener()和detachEvent()移除事件。

6、事件处理中的this

在事件处理中的this所引用的对象，即是设定了该事件处理程序的元素。

也就是事件是给哪个对象绑定的，this就是哪个对象

7、事件对象

7.1、在DOM对象上的某个事件被触发时，会产生一个事件对象Event，这个对象中包含着所有对象有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

例如：鼠标操作导致的事件对象中会记录鼠标位置的相关信息，而键盘操作导致的事件对象中会记录键盘按下键相关的信息。所有浏览器都支持Event对象，但支持的方式不同。

7.2、DOM标准的浏览器会将一个Event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个Event对象。

可以通过这种方式获取

btn.onclick = function(event){
    alert("hello");
}

7.3、Event事件包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

8、IE中事件对象

8.1、与访问DOM中的Event对象不同，要访问IE中的Event对象有几种不同的方式，取决于指定事件处理程序的方法。

8.2、在IE中Event对象是作为window对象的属性存在的，可以使用window.event来获取event对象。

8.3、在使用attachEvent()情况下，也会在处理程序中传递一个Event对象，也可以按照前边的方式使用。

9、事件的触发

9.1、事件的发生主要是由用户的操作引起的，比如mousemove这个事件就是由于用户移动鼠标引起的，在鼠标移动的过程中这个事件会持续的触发。

9.2、当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下，事件被触发一次，函数就会执行一次。因此设置鼠标移动事件会影响到鼠标的移动速度。所以设置此类事件一定谨慎。

10、事件的传播

10.1、在网页中标签之间有嵌套关系，比如这样一个页面

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

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

10.2、捕获阶段

这一阶段从window对象一直遍历到目标对象，如果发现有对象绑定了响应事件则做出相应的处理。

10.3、目标阶段

这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

10.4、事件冒泡阶段

这一阶段事件传播方式与捕获阶段正好相反，会从事件目标一直向上遍历，直至window对象结束，这时对象上绑定的响应事件也会执行结束。

11、取消事件传播

可以使用event的两个方法完成取消事件传播：stopPropagation();stopImmediatePropagation()

取消默认行为：preventDefault();

大龙问道

关注

14
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript之事件详解-04

1.1 、事件实际上指的是用户和浏览器交互的一瞬间。1.2 、我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件被触发以后，我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。
复制链接

扫一扫