jQuery中事件冒泡，默认行为，事件命名空间

事件冒泡

事件冒泡是指子级的事件默认会传递给父级，即子级click父级也跟着click

事件冒泡----click子级，父级的click也触发(父级和子级都绑定了click事件都输出alert)
阻止事件冒泡

默认的事件冒泡是我们不希望的，我们要点那个触发那个事件就可以了，这边提供了两个阻止事件冒泡的方式

return flase

在子级的事件函数中return flase会阻止默认的冒泡行为

event.stopPropagation()

利用事件函数中的形参event中的stopPropagation()方法阻止默认冒泡行为

$(".son").click(function (evnet) {
    
    
    alert("son");
    //方式1
    //   event.stopPropagation();
    //方式2
	return flase;
});

默认行为

默认行为是指没有给他绑定事件的情况下，他自己触发的效果，例如<a>的自动跳转，<input type=‘sumbit’>自动提交

阻止默认行为

在一些条件下我们要用这些标签做一些事情而不是要执行他的默认行为，这边提供了两种阻止默认行为的方式

return flase

给默认行为的标签绑定事件，在事件函数中return flase会阻止默认行为

event.stopPropagation();

和事件冒泡类似~~~

$("a").click(function (event) {
    
    
    alert("弹出注册框");
    //   return false;
    event.stopPropagation();
});

自动触发事件

jQuery提供了两个自动触发事件的函数

trigger(‘触发事件的类型’)

该函数会自动触发事件，但是并不阻止事件冒泡和默认行为

triggerHandler(‘触发事件的类型’))

该函数会自动触发事件，并阻止事件冒泡和默认行为

注意点:
- 正常的trigger()不阻止默认行为，但是a标签使用trigger()后不触发默认行为了
- 解决方法:在a中嵌套span标签给其绑定事件，自动触发span会冒泡给a这样a就可以触发默认行为了

$(".father").trigger("click");
$(".father").triggerHandler("click");

自定义事件

就是自定义能够执行的事件

自定义事件触发的条件

必须用on函数来绑定事件
必须用trigger或triggerHandler来触发

$(".son").on("myClick", function () {
    
    
    alert("son");
});

$(".son").trigger("myClick");

事件命名空间

在企业开发中，有多个操作者，要想区分那个操作者写的这个事件，并且只执行XXX写的事件，这时就要用到命名空间了

事件命名空间

就是在事件的结尾加 “.作者” 就能代表这个事件是你写的

事件命名空间触发的条件

必须用on函数绑定事件
必须用trigger或triggerHandler来触发某一个作者的事件

$(".son").on("click.zs", function () {
    
    
    alert("zs");
});

$(".son").on("click.ls", function () {
    
    
    alert("ls");
});

$(".son").trigger("click.ls");

事件委托

事件委托：就是让别人给我做事，然后把结果给我

在jQuery的事件委托就是把子级的监听事件委托给父级去统一监听，当操作具体元素时可以使用this在获取指定的元素，因为你第一开始点击的是this,this没有事件触发就会冒泡到父级这样父级就触发事件，而this又是你第一开始点击的位置，这就是事件委托。

$('ul').delegate('li', 'click', function () {
    
    
    //获取点击元素的html
    console.log($(this).html());
})

具体事件

移入移出

在jQuery中的移入和移除给了两套事件，和一个组合事件

mouseover,mouseout是一组事件：子级触发会传递到父级(不推荐)
mouseenter,mouseleave是一组事件：子级触发不会传递到父级(推荐)
hover是一个组合事件(移入+移出)

只传一个参数代表移入和移除都触发
传两个参数代表第一个函数触发移入，第二个触发移除

//传2个参数
$('.father').hover(function () {
    
    
    console.log('移入')
}, function () {
    
    
    console.log('移出')
})
//传1个参数
$('.father').hover(function () {
    
    
    console.log('移入+移除')
})

因为jQuery封装的事件很多，所以在这就不详细说明
官方---->http://hemin.cn/jq/