用户与页面交互的时候，会触发不同的事件。比如点击了页面上的某个元素，在文本框里输入了内容，按了键盘上的某个按钮，都会触发对应的事件。如果我们想在发生这些事情的时候去做一些事情，可以监听指定的事件，然后再配置一个事件的处理器，这个处理器就是在触发某个事件的时候要做的事情。

在页面引用的这个脚本文件里，我们已经找找到了页面上的这个标题元素。想要监听在这个元素上发生的事件，可以用一下元素上面的 addEventListener，添加事件监听器。它的第一个参数就是要说明一下要监听的事情的名字，比如我们要监听 click 事件，也就是点击事件。当用户点击元素的时候就会触发这个事件。

第二个参数是事件处理器，可以直接提供一个函数，在这个函数里的代码就是当这个标题元素发生 click 事件的时候要做的事情。比如我们想在点击标题元素的时候，变换一下元素里的文本内容。

设置一下 brand 这个标题元素上的 innerText 属性的值，它的值可以先判断一个条件，判断一下 brand.innerText 是不是等于 宁皓网，如果是，就把文本内容设置成拼音 NINGHAO，如果不是，就让文本内容变成中文的宁皓网。

在浏览器测试一下，刷新一下页面。然后点击这个标题元素，你会发现，每次点击它的时候都会变换标题内部的文本内容。点击标题元素会触发 click 事件，我们在文档引用的脚本里面，监听了这个元素的点击事情，发生这个事件以后，要做的事情就是变换元素内部的文本内容。

事件

在事件处理器上面可以添加一个 event 参数，它里面包含了很多跟事件相关的有用的数据。在这个事件处理器的上面，添加一个 event 参数，然后我们在处理器内部，用 console.log 把这个 event 参数输出到控制台上检查一下。

然后在浏览器，刷新页面，再点击标题元素，在控制台上会输出这个点击的事件对象，显示这个事件是一个 PointerEvent，打开它观察一下，里面有很多属性，如果你不确定这些属性是什么意思，可以在 mdn 这个网站上搜索这个属性的名字，可以找到详细的解释。

比如这个 pageX 还有 pageY 应该指的是点击事件发生时，在页面上的坐标数据。另外这个 pointerType 属性的值是 mouse，说明这个事件是用鼠标触发的。