<div id="test">点击触发<div>
$("ele").click(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").click() //手动指定触发事件
});
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
<div id="test">点击触发<div>
$("ele").mousedown(function(){
alert('触发指定事件')
})
$("#test").mousedown(function(){
$("ele").mousedown() //手动指定触发事件
});
<div id="test">点击触发<div>
$("#test").mousedown(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").mousedown(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
<div id="test">点击触发<div>
$("ele").mousemove(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").mousemove() //指定触发事件
});
<div id="test">滑动触发<div>
$("#test").mousemove(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").mousemove(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
- mouseenter事件和mouseover的区别
- 关键点就是:冒泡的方式处理问题
<div id="test">点击触发<div>
$("ele").mouseover(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").mouseover() //指定触发事件
});
<div id="test">滑动触发<div>
$("#test").mouseover(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").mouseover(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
$(ele).mouseenter(function(){
$(this).css("background", '#bbffaa');
})
$(ele).mouseleave(function(){
$(this).css("background", 'red');
})
||
$(selector).hover(handlerIn, handlerOut)
<div id="test">点击触发<div>
$("ele").focusin(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusin() //指定触发事件
});
<div id="test">点击触发<div>
$("#test").focusin(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
<div id="test">点击触发<div>
$("ele").focusout(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusout() //指定触发事件
});
<div id="test">点击触发<div>
$("#test").focusout(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").focusout(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
$("input").select();
<input id="test" value="文字选中">input>
$("#test").select(function() { //响应文字选中回调
//this指向 input元素
});
<input id="test" value="文字选中">input>
$("#test").select(11111,function(e) {//响应文字选中回调
//this指向 div元素
//e.date => 11111 传递数据
});
<div id="test">点击触发<div>
$("ele").submit(function(){
alert('触发指定事件')
})
$("#text").click(function(){
$("ele").submit() //指定触发事件
});
<form id="target" action="destination.html">
<input type="submit" value="Go" />
form>
$("#target").submit(function() { //绑定提交表单触发
//this指向 from元素
});
<form id="target" action="destination.html">
<input type="submit" value="Go" />
form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
//data => 1111 //传递的data数据
});
<script>
$("#target").submit(function(data) {
return false; //阻止默认行为,提交表单
});
script>
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
基本用法:.on( events ,[ selector ] ,[ data ] )
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
//最大的不同点就是on是可以自定义事件名
$("#elem").on("mouseover mouseout",function(){ });
//通过空格分离,传递不同的事件名,可以同时绑定多个事件
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});//通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
$("div").on("click","p",fn)
//事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
//通过.on()绑定的事件处理程序
//通过off() 方法移除该绑定
//绑定2个事件
$("elem").on("mousedown mouseup",fn)
//删除一个事件
$("elem").off("mousedown")
//删除所有事件
$("elem").off("mousedown mouseup")
//快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off()
//事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁
//event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
<script type="text/javascript">
//多事件绑定一
$("ul").on('click',function(e)
{
alert('触发的元素是内容是: ' + e.target.textContent)
})
script>
$("a").click(function(event) {
alert(event.type); // "click"事件
});
确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
浏览器不会跳转到新的 URL 去了
事件是可以冒泡的,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数
左键报告1,中间键报告2,右键报告3
冒泡前的当前触发事件的DOM对象, 等同于this
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用
$('#elem').on('click', function() {
alert("触发系统事件")
});
必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢
$('#elem').trigger('click');
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
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