JavaScript架构hover恶性事件解决

2021-03-20 04:52 jianzhan
JavaScript架构hover恶性事件解决文中 发布 入录:.com

每一个JavaScript架构都完成跨访问器的恶性事件解决,激励你解决老式的内联额外恶性事件而应用精减的线形方式。看一下明细6的jQuery事例,应用hover恶性事件高亮度显示信息div原素。

明细6:应用jQuery额外hover恶性事件

$('#the-box').hover(function() {
  $(this).addClass('highlight');
}, function() {
  $(this).removeClass('highlight');
});

它是jQuery的一个独特恶性事件,你能发觉它出示了2个涵数。第一个在onMouseOver恶性事件开启时启用,第二个涵数在onMouseOut恶性事件开启时启用。它是由于hover沒有规范的DOM恶性事件。要我们看一下更加典型性的恶性事件,如click(瞧瞧明细7):

明细7:应用jQuery额外click恶性事件

$('#the-button').click(function() {
  alert('You pushed the button!');
});

如同你看看到的那般,案例中仅有一个涵数主要参数。jQuery广州中山大学大部分恶性事件均选用一样的方法解决,在jQuery中应用恶性事件解决程序,左右文指的是开启恶性事件的哪一个目标。一些架构其实不以这类方法工作中,拿Prototype来讲,明细7中的编码看上去如同明细8中的那般。

明细8:应用Prototype额外click恶性事件

$('the-button').observe('click', function(e) {
  alert('You pushed the button!');
});

你最先会留意到,沒有click涵数,只是一个observe涵数,它在引入本身以前接纳一个恶性事件主要参数。您还会继续留意到该涵数接纳一个主要参数e,这儿的左右文指的是开启恶性事件的原素。看一下它怎样工作中,要我们用Prototype重新写过明细6中的编码(认清单9)。

明细9:应用Prototype额外悬停恶性事件

$('the-box').observe('mouseover', function(e) {
  var el = Event.element(e);
  el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
  var el = Event.element(e);
  el.removeClassName('highlight');
});

jQuery都不同,你只必须应用$涵数获得左右文自变量,Prototype库则应用Event.element() 涵数。另外,你留意到你必须将mouseover和mouseout 恶性事件分离。

明细10:应用Prototype改善悬停恶性事件

您会留意到,这时你只需界定一个涵数。它同时被mouseover和mouseout恶性事件启用。该涵数依据原素是不是有“highlight”的类名,并根据結果加上或删掉之。你也会留意到,主要参数e隐式传送。也就是说,你给observe涵数传送了一个模糊不清确的主要参数。

function toggleClass(e) {
  var el = Event.element(e);
  if(el.hasClassName('highlight'))
  row.removeClassName('highlight');
  else
  row.addClassName('highlight');
}

$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);


联络0 
网站标识:福州市企业网站建设 福州市互联网企业 福州市微信小程序开发设计 福州市网站SEO提升 福州市APP开发设计