<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(2000);
});
});
/**
* trigger:
* 1:引起了focus的回调方法.
* 2:input也获得了焦点
* triggerHandler:
* 1:引起了focus的回调方法.
* 2.input未获得焦点
*/
/**
* triggerHandler不会导致事件冒泡
* trigger会导致事件冒泡
* trigger和triggerHandler主动触发事件
* trigger会触发系统默认的事件同时执行自定义的逻辑
* triggerHandler只执行自定义逻辑,不会触发系统默认事件
* trigger会为所有匹配到的元素执行对应逻辑
* triggerHandler只会执行匹配到的第一个元素执行逻辑
*/
</script>
</head>
<body>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/><br />
<input type="text" value="To Be Focused"/>
</body>
</html>
JQuery的事件处理
猜你喜欢
转载自blog.csdn.net/ludadan/article/details/80118182
今日推荐
周排行