triggerHandler()和trigger()区别

快乐打工仔 分类:实例代码

关于这两个方法的基本使用可以参阅以下两篇文章:

(1).triggerHandler方法参阅jQuery triggerHandler()一章节。

(2).trigger方法参阅jQuery trigger()一章节。

下面就通过代码实例介绍一下这两个方法的区别。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
})
</script>
<body>
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
<input type="text" value="犀牛前端部落">
</body>
</html>

trigger()和triggerHandler()都能够触发注册在匹配元素上的事件;不过trigger()执行事件的默认动作,上面的代码中trigger()触发事件就能够使文本框获取焦点,triggerHandler()触发事件则不会执行事件的默认动作。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
  $("input[type=text]").focus(function(){
    $("<span>www.pipipi.net</span>").appendTo("body").fadeOut(1000);
  });
})
</script>
<body>
<input type="text" value="犀牛前端部落">
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
</body>
</html>

点击两个按钮都会执行注册在文本框上的事件处理函数,并展示相应的效果。

特别注意的是,文本框并没有获取焦点 ,因为匹配的是input元素,而不仅仅是文本框,所以只有最后一个input元素获得焦点。

再来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
  $("input[type=text]").focus(function(){
    $("<span>www.pipipi.net</span>").appendTo("body").fadeOut(1000);
  });
})
</script>
<body>
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
<input type="text" value="犀牛前端部落">
</body>
</html>

点击第一个按钮可以执行事件处理函数,而点击第二个按钮则不能。

这是因为triggerHandler()只会触发匹配元素集合中第一个元素的事件处理函数。

同时triggerHandler()触发的事件不具有冒泡效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus").val("犀牛前端部落");
  });
  $("#triggerHandler").click(function(){
    var antzone=$("input").triggerHandler("focus");
    $("input").val(antzone);
  });
  $("input[type=text]").focus(function(){
    $("<span>www.pipipi.net</span>").appendTo("body").fadeOut(1000);
    return "antzone"
  });
})
</script>
<body>
<input type="text" value="犀牛前端部落">
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
</body>
</html>

trigger()返回具有链式调用效果,也就是返回值是匹配元素集合对象;triggerHandler()返回值是事件处理函数的返回值。

triggerHandler()和trigger()区别,这样的场景在实际项目中还是用的比较多的,关于triggerHandler()和trigger()区别就介绍到这了。

triggerHandler()和trigger()区别属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容