正文
js进阶 12-14 jquery的事件触发函数是哪两个
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js进阶 12-14 jquery的事件触发函数是哪两个一、总结一句话总结：trigger和triggerHandler
1、trigger传额外参数时候的注意事项是什么？
一句话总结：trigger和triggerHandler
1、trigger传额外参数时候的注意事项是什么？
注意样例中是三个参数
1、传的参数写在trigger的第二个参数
2、如果要传多个参数，用数组方式
31 //trigger的额外数据
32 //多条数据时候需要放到[]中
33 $('#btn1').on('click',
34 300,function(e,data1,data2){
35 alert('trigger: '+data1+','+data2+','+e.data)
36 }).trigger('click',[100,200])
2、trigger和triggerHandler的区别是什么？
a、triggerHandler()不会引起事件的默认行为
例如form的跳转事件
43 //区别1:triggerHandler()不会引起事件默认行为
44 // $('#myform').trigger('submit')
45 $('#myform').triggerHandler('submit')
b、trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
比如$('div')的时候
47 //区别2：triggerHandler() 只影响第一个匹配元素
48 $('div').click(function(){
49 $(this).css('background','green')
50 }).triggerHandler('click')
c、triggerHandler() 创建的事件不会产生事件冒泡.
52 //区别3：triggerHandler() 创建的事件不会产生事件冒泡.
53 $('div').click(function(){
54 alert('div')
55 })
56 $('#div3').triggerHandler('click')
d、triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
triggerHandler方法的返回值是triggerHandler事件的返回值，而trigger的返回值是jquery对象
58 //区别4： triggerHandler()返回的是事件处理函数的返回值
59 // alert($('#btn1').on('click',function(){
60 // alert('trigger')
61 // return '100'
62 // }).triggerHandler('click'))
63 $('#btn1').on('click',function(){
64 alert('trigger')
65 return '100'
66 }).triggerHandler('click').css('background','red')
二、jquery的事件触发函数是哪两个1、相关知识
- trigger() 在每一个匹配的元素上触发某类事件。
- triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
与trigger()区别
- triggerHandler()不会引起事件的默认行为
- trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
- triggerHandler() 创建的事件不会产生事件冒泡.
- triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
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">
div{border:1px solid green;padding: 20px;float: left;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<!-- <div></div><div></div><div></div> -->
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<form action="http://www.51_zxw.net/" id="myform">
<p>姓名：<input type="text" id="user"></p>
<p>密码：<input type="password" id="passw"></p>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$(function(){
/*
//trigger的额外数据
//多条数据时候需要放到[]中
$('#btn1').on('click',
300,function(e,data1,data2){
alert('trigger: '+data1+','+data2+','+e.data)
}).trigger('click',[100,200]) $('#btn1').on('click',function(){
alert('trigger')
}).triggerHandler('click') //使用trigger()与triggerHandler()的区别
//区别1:triggerHandler()不会引起事件默认行为
// $('#myform').trigger('submit')
$('#myform').triggerHandler('submit') //区别2：triggerHandler() 只影响第一个匹配元素
$('div').click(function(){
$(this).css('background','green')
}).triggerHandler('click') //区别3：triggerHandler() 创建的事件不会产生事件冒泡.
$('div').click(function(){
alert('div')
})
$('#div3').triggerHandler('click')
*/
//区别4： triggerHandler()返回的是事件处理函数的返回值
// alert($('#btn1').on('click',function(){
// alert('trigger')
// return '100'
// }).triggerHandler('click'))
$('#btn1').on('click',function(){
alert('trigger')
return '100'
}).triggerHandler('click').css('background','red') })
</script>
</body>
</html>
与trigger()区别
- triggerHandler()不会引起事件的默认行为
- trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
- triggerHandler() 创建的事件不会产生事件冒泡.
- triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
<!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">
div{border:1px solid green;padding: 20px;float: left;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<!-- <div></div><div></div><div></div> -->
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<form action="http://www.51_zxw.net/" id="myform">
<p>姓名：<input type="text" id="user"></p>
<p>密码：<input type="password" id="passw"></p>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$(function(){
/*
//trigger的额外数据
//多条数据时候需要放到[]中
$('#btn1').on('click',
300,function(e,data1,data2){
alert('trigger: '+data1+','+data2+','+e.data)
}).trigger('click',[100,200]) $('#btn1').on('click',function(){
alert('trigger')
}).triggerHandler('click') //使用trigger()与triggerHandler()的区别
//区别1:triggerHandler()不会引起事件默认行为
// $('#myform').trigger('submit')
$('#myform').triggerHandler('submit') //区别2：triggerHandler() 只影响第一个匹配元素
$('div').click(function(){
$(this).css('background','green')
}).triggerHandler('click') //区别3：triggerHandler() 创建的事件不会产生事件冒泡.
$('div').click(function(){
alert('div')
})
$('#div3').triggerHandler('click')
*/
//区别4： triggerHandler()返回的是事件处理函数的返回值
// alert($('#btn1').on('click',function(){
// alert('trigger')
// return '100'
// }).triggerHandler('click'))
$('#btn1').on('click',function(){
alert('trigger')
return '100'
}).triggerHandler('click').css('background','red') })
</script>
</body>
</html>
