js进阶 12-13 jquery中one方法和trigger方法如何使用
一、总结
一句话总结：
1、one()方法和on()方法的区别是什么？
除了one()只执行一次，其它和on()一模一样，包括事件委托了额外参数等
22 //one()函数绑定的事件处理函数都是一次性的
23 $('#btn1').one('click',function(){
24 //alert('one')
25 $('<div></div>').appendTo($('body'))
26 })
27
28 $('#btn1').one('click',100,function(e){
29 alert(e.data)
30 })
31
32 $(document).one('click','#btn1',100,function(e){
33 alert(e.data)
34 })
2、触发事件是什么意思？
比如你给btn添加一个click事件，你点击的话这个click就执行
如果用trigger的话，你不点击这个事件也执行，相当于trigger给你点击了
并且如果你绑定的是一个自定义事件，除了trigger，你没有办法触发
36 $('#btn1').click(function(){
37 alert('trigger')
38 })
39 //使用trigger触发
40 $('#btn1').trigger('click')
3、trigger触发事件如何使用（监听对象和参数是谁）？
监听对象是要触发事件的对象，参数是事件的类型，用脚指头想就知道应该是这样，因为触发事件就是需要这两个参数，而选择器一般选择的就是监听对象
39 //使用trigger触发
40 $('#btn1').trigger('click')
4、trigger的两种简写方式什么？
链式操作和直接事件名
42 //简写方法1
43 $('#btn1').on('click',function(){
44 alert('trigger')
45 }).trigger('click')
46
47 //简写方法2
48 $('#btn1').on('click',function(){
49 alert('trigger')
50 }).click()
5、trigger的必须使用场景是什么？
绑定自定义事件要触发必须用trigger
52 //自定义事件
53 $(document).on('myEvent',function(){
54 alert('Game Over!')
55 }).trigger('myEvent')
二、jquery中one方法和trigger方法如何使用
1、相关知识
- one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
- trigger() 在每一个匹配的元素上触发某类事件。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div id="div1"></div>
<script type="text/javascript">
$(function(){
/*
//one()函数绑定的事件处理函数都是一次性的
$('#btn1').one('click',function(){
//alert('one')
$('<div></div>').appendTo($('body'))
}) $('#btn1').one('click',100,function(e){
alert(e.data)
}) $(document).one('click','#btn1',100,function(e){
alert(e.data)
}) $('#btn1').click(function(){
alert('trigger')
})
//使用trigger触发
$('#btn1').trigger('click') //简写方法1
$('#btn1').on('click',function(){
alert('trigger')
}).trigger('click') //简写方法2
$('#btn1').on('click',function(){
alert('trigger')
}).click()
*/
//自定义事件
$(document).on('myEvent',function(){
alert('Game Over!')
}).trigger('myEvent')
})
</script>
</body>
</html>