扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
trigger(type,[data])
成都创新互联主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务泸水,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件
返回值 jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例
提交第一个表单,但不用submit()
jQuery 代码:
$("form:first").trigger("submit")
--------------------------------------------------------------------------------
给一个事件传递参数
jQuery 代码:
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
--------------------------------------------------------------------------------
下面的代码可以显示一个"Hello World"
jQuery 代码:
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
=====================================================================
triggerHandler(type,[data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.
返回值 jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例
如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。
HTML 代码:
button id="old".trigger("focus")/button
button id="new".triggerHandler("focus")/buttonbr/br/
input type="text" value="To Be Focused"/
jQuery 代码:
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("spanFocused!/span").appendTo("body").fadeOut(1000); });
有时候我们需要页面自动点击超链接或者按钮,可以用js或者jQuery利用程序去点击,方法很简单,按钮或超链接代码如下:
点击超链接 点击按钮
上面是一个超链接和一个按钮,并且超链接和按钮都绑定了点击事件
先看超链接,如果我们打算点击超链接的同时不仅触发事件而且跳转到href的指定链接,可以用:
script
document.getElementById("alink").click();/script
这样就可以实现上面的功能,但是如果我只想触发事件而不想跳转呢,方法有两个,第一个是href写上href="javascript:;"
另外的方法是引入jQuery,然后用jQuery点击事件触发
script
$("#alink").click();/script
这样就不会跳转了
如果是按钮的话,直接用以下代码:1 script2 //真正的用程序点击按钮3 document.getElementById("btn").click();4 //没有点击按钮,只是执行了按钮所绑定的事件5 document.getElementById("btn").onclick();6 /script
function test(){
$("[name=userList]:checkbox").click(); //有方法体就是重写,没方法体就是调用。所以,这样。
}
test();
-----------------------------------
input type="hidden" id='h_input' /
script
$("[name=userList]").click(function(){
//多个值的话
var values = "";
$("[name=userList]:checked").each(function(){
values += $(this).val()+"|"; //用 ‘|’ 连接
});
$("#h_input").val(values);
});
/script
bind();
参数一:要绑定事件函数的事件名。
参数二:要绑定的事件函数(事件函数名),如果将来有可能删除该绑定的函数,则必须传函数名。
bind()方法可以通过链式调用的形式连续多次调用,进而个同一标签的同一事件(不同事件)添加不同的事件函数。
on('事件名',fn);
one('事件名',fn);该方法绑定的事件函数只能被触发一次。
unbind();
参数一:要解绑事件函数的事件名(如果只传这一个参数,则该事件名中绑定的函数全部解除)。
参数二:要解除绑定的事件函数名。
off();
注意:bind()和unbind()在3.0后已经被on()和off()取代。
事件简写本质就是简化给标签添加事件函数的操作,标准的添加事件方法:on/bind/one,类似于js的DOM2级添加事件函数操作;事件简写类似于DOM0级的事件绑定操作。
jq事件简写绑定事件函数的技术实现原理:
1、jq给每一个事件名定义了同名的函数,用户调用的事件简写形式,就是在调用这个和事件名同名的函数
2、同名函数内部实现原理:当用户调用了该函数,首先获取该函数的函数名(函数名代表的是事件名),在函数内部通过on把通过参数传进来的函数绑定在函数名对应的事件上。
blur(fn):失去焦点时触发该方法。
focus(fn):当鼠标或tab按钮让元素获得焦点时,触发该函数。
change(fn):表单元素失去焦点(单选框、复选框、下拉菜单标签被选中即可触发,不需等待失去焦点),触发该事件。
click(fn):鼠标点击时触发该事件。
dbclick(fn):双击元素时触发该事件(注意:把click和dbclick用于同一个元素会产生问题)。
$(window).scroll(fn):当页面滚动时触发事件。
hover(fn1,fn2):鼠标移入触发fn1函数,鼠标移出触发fn2函数。
复合事件:toggle().在1.8之前中,复合了奇、偶次点击事件,在1.9之后的版本中toggle方法用于jq的动画
toggle()方法在1.8之前的版本中需要两个函数类型作为参数,奇数次点击触发第一个函数,偶数次店家触发第二个函数。
事件对象的获取:在事件触发的函数中传递event参数。
event.type:事件类型
event.target:触发事件的元素
e.currentTarget:事件绑定在哪个元素上
event.pageX:鼠标相对于文档的左侧坐标
event.pageY:鼠标相对于文档的顶部坐标
e.preventDefault():取消标签事件,如a标签的页面跳转。
e.stopPropagation():阻止事件冒泡
1、阻止事件冒泡
stopPropagation()方法
2、阻止默认行为
preventDefault()方法
注意:1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为
2、jQuery不支持事件捕获
解密jQuery事件核心:
常用模拟
在jQuery中,可以使用trigger()方法完成模拟操作。
例如,使用如下代码来触发id为btn按钮的click事件。
代码示例:
$("#btn").trigger("click");
当页面加载完毕后,就会立刻输出想要的效果。
也可以直接用简化写法click():
代码示例:
$("#btn").click();
回车一般的作用是提交或者换行,提交的话就是下面这样
$('#formXXX').submit(function() {
。。。
});
换行的话就是这样
$('#target').html($('#target').html()+'\n')
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流