欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

web开发中事件处理规则有哪些

程序员文章站 2022-03-30 20:57:34
...
这次给大家带来web开发中事件处理规则有哪些,web开发中事件处理的注意事项有哪些,下面就是实战案例,一起来看一下。

事件处理

我们知道事件触发时,事件对象(event对象)会作为回调参数传入事件处理程序中,举个例子:

// 不好的写法function handleClick(event) {  var pop = 
document
.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
}// 你应该明白addListener函数的意思addListener(element, 'click', handleClick);

这段代码只用到了event对象的两个属性:clientX和clientY。在将元素显示在页面里之前先用这两个属性个它作定位。尽管这段代码看起来非常简单且没有什么问题,但实际上是不好的写法,因为这种做法有其局限性。

规则1:隔离应用逻辑

上段实例代码的第一个问题是事件处理程序包含了应用用逻辑(application logic)。应用逻辑是和应用相关的功能性代码,而不是和用户行为相关的。上段实例代码中应用逻辑是在特定位置显示一个弹出框。尽管这个交互应当是在用户点击某个特定元素时发生,但情况并不总是如此。

将应用逻辑从所有事件处理程序中抽离出来的做法是一种最佳实践,因为说不定什么时候其他地方就会触发同一段逻辑。比如,有时你需要在用户将鼠标移到某个元素上时判断是否显示弹出框,或者当按下键盘上的某个键时也作同样的逻辑判断。这样多个事件的处理程序执行了同样的逻辑,而你的代码却被不小心复制了多份。

将应用逻辑放置于事件处理程序中的另一个缺点是和测试有关的。测试时需要直接触发功能代码,而不必通过模拟对元素的点击来触发。如果将应用逻辑放置于事件处理程序中,唯一的测试方法是制造事件的触发。尽管某些测试框架可以模拟触发事件,但实际上这不是测试的最佳方法。调用功能性代码最好的做法就是单个的函数调用。

你总是需要将应用逻辑和事件处理的代码拆分开来。如果要对上一段实例代码进行重构,第一步是将处理弹出框逻辑的代码放入一个单独的函数中,这个函数很可能挂载于为该应用定义的一个全局对象上。事件处理程序应当总是在一个相同的全局对象中,因此就有了以下两个方法。

// 好的写法 - 拆分应用逻辑var MyApplication = {  handleClick: function (event) {    this.showPopup(event);
  },  showPopup: function (event) {    var pop = document.getElementById('popup');
    popup.style.left = event.clientX + 'px';
    popup.style.top = event.clientY + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

之前在事件处理程序中包含的所有应用逻辑现在转移到了MyApplication.showPopup()方法中。现在MyApplication.handleClick()方法只做一件事情,即调用MyApplication.showPopup()。若应用逻辑被剥离出去,对同一段功能代码的调用可以在多点发生,则不需要一定依赖于某个特定事件的触发,这显然更加方便。但这只是拆解事件处理程序代码的第一步。

规则2:不要分发事件对象

在剥离出应用逻辑之后,上段实例代码还存在一个问题,即event对象被无节制地分发。它从匿名的事件处理函数传入了MyApplication.handleClick(),然后又传入了MyApplication.showPopup()。正如上文提到的,event对象上包含很多和事件相关的额外信息,而这段代码只用到了其中的两个而已。应用逻辑不应当依赖于event对象来正确完成功能,原因如下:

方法接口并没有表明哪些数据是必要的。好的API一定是对于期望和依赖都是透明的。将event对象作为为参数并不能告诉你event的哪些属性是有用的,用来干什么?

因此,如果你想测试这个方法,你必须重新创建一个 event对象并将它作为参数传入。所以,你需要确切地知道这个方法使用了哪些信息,这样才能正确地写出测试代码。

这些问题(指接口格式不清晰和自行构造event对象来用于测试)在大型Web应用用中都是不可取的。代码不够明晰就会导致bug。

最佳的办法是让事件处理程序使用event对象来处理事件,然后拿到所有需要的数据传给应用逻辑。例如,MyApplication.showPopup()方法只需要两个数据,x坐标和y坐标。这样我们将方法重写一下,让它来接收这两个参数。

// 好的写法var MyApplication = {  handleClick: function (event) {    this.showPopup(event.clientX, event.clientY);
  },  showPopup: function (x, y) {    var pop = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

在这段新重写的代码中,MyApplication.handleClick()将x坐标和y坐标传入了MyApplication.showPopup(),代替了之前传入的事件对象。可以很清晰地看到MyApplication.showPopup()所期望传入的参数,并且在测试或代码的任意位置都可以很轻易地直接调用这段逻辑,比如:

// 这样调用非常棒MyApplication.showPopup(10, 10);

当处理事件时,最好让事件处理程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作,包括阻止默认事件或阻止事件冒泡,都应当直接包含在事件处理程序中。比如:

// 好的写法var MyApplication = {  handleClick: function (event) {    // 假设事件支持DOM Level2
    event.preventDefault();
    event.stopPropagation();    // 传入应用逻辑
    this.showPopup(event.clientX, event.clientY);
  },  showPopup: function (x, y) {    var pop = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

在这段代码中,MyApplication.handleClick()是事件处理程序,因此它在将数据传入应用逻辑之前调用了event.preventDefault()和event.stopPropagation(),这清除地展示了事件处理程序和应用逻辑之间的分工。因为应用逻辑不需要对event产生依赖,进而在很多地方都可以轻松地使用相同的业务逻辑,包括写测试代码。

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

怎样利用JS做出引用传递与值传递

如何做出node.js界面

以上就是web开发中事件处理规则有哪些的详细内容,更多请关注其它相关文章!

相关标签: web 哪些 则有