jQuery-3.事件篇---自定义事件
jQuery自定义事件之trigger事件
众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发。
在jQuery通过on方法绑定一个原生事件
$('#elem').on('click', function() {
alert("触发系统事件")
});
alert需要执行的条件:必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件
所以我们可以这样:
$('#elem').trigger('click');
在绑定on的事件元素上,通过trigger方法就可以调用到alert了,挺简单!
再来看看.trigger是什么?
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
trigger触发浏览器事件与自定义事件区别?
- 自定义事件对象,是jQuery模拟原生实现的
- 自定义事件可以传递参数
<h2>自定义事件trigger</h2>
<div class="left">
<div><span></span><span>0</span>点击次数</div>
<button>直接点击</button>
<button>通过自定义点击</button>
</div>
<script type="text/javascript">
//点击更新次数
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'first';
update($("span:first"),$("span:last"),bottonName);
});
//通过自定义事件调用,更新次数
$("button:last").click(function() {
$("button:first").trigger('click','last');
});
function update(first,last,bottonName) {
first.text(bottonName);
var n = parseInt(last.text(), 10);
last.text(n + 1);
}
</script>
jQuery自定义事件之triggerHandler事件
trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
trigger事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象event无法完美的实现,毕竟一个是浏览器给的,一个是自己模拟的。尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替
triggerHandler与trigger的用法是一样的,重点看不同之处:
- triggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
- .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
- 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined
<h2>自定义事件triggerHandler</h2>
<div class="left">
<div id="accident">
<a>triggerHandler事件</a>
<input type="text">
</div>
<button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
<button>不会冒泡,不触发浏览器默认聚焦行为</button>
</div>
<script type="text/javascript">
//给input绑定一个聚焦事件
$("input").on("focus",function(event,title) {
$(this).val(title)
});
$("#accident").on("click",function() {
alert("trigger触发的事件会在 DOM 树中向上冒泡");
});
//trigger触发focus
$("button:first").click(function() {
$("a").trigger("click");
$("input").trigger("focus");
});
//triggerHandler触发focus
$("button:last").click(function() {
$("a").triggerHandler("click");
$("input").triggerHandler("focus","没有触发默认聚焦事件");
});
</script>
jQuery-3.事件篇---自定义事件的更多相关文章
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- 63.ExtJs事件(自定义事件、on、eventManager)示例
转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...
- jQuery事件篇---高级事件
内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕 ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- jQuery事件之自定义事件
其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind() ...
随机推荐
- kafka 心跳和 reblance
kafka 的心跳是 kafka consumer 和 broker 之间的健康检查,只有当 broker coordinator 正常时,consumer 才会发送心跳. consumer 和 re ...
- java多线程高并发知识总结
1. 计算机系统 使用高速缓存来作为内存与处理器之间的缓冲,将运算需要用到的数据复制到缓存中,让计算能快速进行:当运算结束后再从缓存同步回内存之中,这样处理器就无需等待缓慢的内存读写了. 缓 ...
- linux服务器用nginx做网站内页之间301的跳转方法
例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...
- 如何安全的捂住你的AngelToken钱包
Angel Token钱包的重要性 AngelToken基于区块链底层技术的去中心化.安全可靠的特点,开发了数字资产钱包,是行业领先的中心化token钱包和去中心化交易平台相结合的链数字资产智能钱包. ...
- riakKV 配置
安装好riakKV之后, 我们需要将 riak.conf 文件中的 nodename修改为本机的 IP 地址. nodename = xx@xxx.xxx.xx.xx listener.http.in ...
- Quick Sort -- 快速排序算法
//参数说明: // int data[] : 待排序的数据数组 // int m : 下限值 // int n : 上限值 void QuickSort ( int data[] , int m , ...
- 在form表单里上传图片
需要上传多个图片分别上传,本来提供的工具类里上传一张可以form表单对象实现 后台用MultipartFile file var formdata = new FormData($("#in ...
- jQuery获取name相同被选中的多选框的值
var name= ""; $("input:checkbox[name='AllElection']:checked").each(fu ...
- [Leetcode 40]组合数和II Combination Sum II
[题目] Given a collection of candidate numbers (candidates) and a target number (target), find all uni ...
- 谷歌SEO初学者常见问题解答
最近事特多,群里很多同学都在问一些非常基础的问题,实在没时间更没心情回答. (因为有些问题很基础,这些基础性问题根本不是一两句话能说清的,问这些问题的明显需要自己去好好学习,就跟小学生学加减法一样,自 ...