<!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
今日推荐
周排行