1、冒泡和默认行为
<div class="aa">
<div class="bb">
<div class="cc">
<em>
<strong>
冒泡测试3
</strong>
</em>
</div>
</div>
</div>
<div>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交">
</form>
<a href="http://www.baidu.com">百度一下</a>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(document).bind("click",function () {
//
// alert("第一层冒泡")
// })
// $("div .bb").bind("click",function () {
// alert("第二层冒泡测试")
// })
// $("div .cc").bind("click",function (e) {
// e.stopPropagation()
// alert("第三层冒泡测试")
// })
// 第一层里是document，第二层是div，第三层还是div，都绑定了click事件，如果直接点第三层的事件，则首先会执行第三层绑定的函数，然后会执行第二层的函数，最后
// 在实行最后一层的函数，如果我们想阻止这样的行为该怎么处理e.stopPropagation(),这样，这一层就不会出现冒泡行为了
// 阻止默认行为是上面意思呢？比如我们的按钮，和超链接，如果我们点击了就会提交数据或者跳转到超链接，我们就可以使用代码实现阻止这样的默认行为
// 看到下面的例子，就阻止了a标签和input标签的默认行为,preventDefault
// $("a").bind("click",function (event) {
// event.preventDefault()
// })
// $(":input[type='submit']").bind("click",function (event) {
// event.preventDefault()
// )}
// 如果在函数中直接返回false，就可以实现取消默认行为+阻止冒泡行为
2、模拟用户操作
<input type="button" value="提交">
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// 这个是用户的真实操作，而不是浏览器模拟用户操作,如果在加上下面的代码，就实现了浏览器模拟用户的click事件
// $(this).bind('click',function () {
// alert("模拟用户点击页面")
//
// $(this).trigger('click')
//
// })
// 用下面这种写法也可以实现模拟用户行为
// $('input').bind('click',function () {
// alert("第二种模拟用户点击页面的方法")
// }).trigger('click')
// 自定义事件，主要是用在只要浏览器刷新就会自动执行的事件，相当于刷新页面触发一个函数一样的效果
// $(':input').bind('myevent',function () {
// alert("自定义事件")
// }).trigger('myevent')
//trigger和triggerHandler的区别
// 1、如果标签有默认行为，则riggerHandler不会执行默认行为，trigger则会执行默认行为，比如点击按钮提交数据，这里就会有一个默认的行为
// 2、如果匹配到多个标签，则trigger会每个标签执行一次，而triggerHandler只第一个标签会执行默认行为，后面的标签不会执行默认行为
// 3、返回值不一样
//命令空间,比如下面的例子，一个input上绑定了2个click事件，但是我们只想把abc这个事件去掉该怎么办呢，我们可以在click后加一个点，在一些随机数就可以了
// $("input").bind('click',function () {
// alert('abc')
// })
// $("input").bind('click',function () {
// alert('123')
// })
//
// $("input").bind('click.abc',function () {
// alert('abc')
// })
// $("input").bind('click.123',function () {
// alert('123')
// })
//
// $("input").unbind('click.123')
})
3、事件委托
<div class="aa" id="box">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(':button').bind('click',function () {
// alert("事件不委托")
// })
// 使用live绑定的是document，而非button，所有永远只会绑定一次事件
// $(":button").live('click',function () {
// alert('事件委托绑定')
//
// })
// bind不能动态绑定,比如下面的例子，我开始有4个button按钮，我点击这4个中的任何一个
// 都会触发下面的click事件，然后复制出来一个按钮，但是如果我点击复制出来的按钮，则不会
// 在复制出来新的按钮，这就是bind不能动态绑定的意思;同样live可以实现动态绑定,因为事件是
// 绑定在document上，而点击button是冒泡到document,如果要触发这个冒泡，还会校验event type
// 和event target
// $(':button').bind('click',function () {
// $(this).clone().appendTo(".aa")
//
// })
// live已经被废弃了,live的替代方法是delegate<，他只绑定父元素
// $("#box").delegate('input','click',function () {
// $(this).clone().appendTo('#box')
// })
//
// $("#box").undelegate("input",'click')
//on off one 这个才是重点
//普通的绑定：bind
//普通的解绑：unbind
//普通的事件委托：delegate
//普通的事件委托解绑：undelegate
//方法太多，导致换乱，所有这里提供了新的方法 on和off
//新方法绑定:on
//新方法解绑：off
// 普通使用
// $(":input").on('click',function () {
// alert('替代bind')
//
// })
// 额外数据也是可以的
// $(":input").on('click',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// })
// 执行多个事件也是可以的
// $(":input").on('click dblclick',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// })
// $(":input").on({
// click:function () {
// alert('鼠标单击')
// },
// dblclick:function () {
// alert('鼠标双击')
// }
// })
//同样阻止默认行为和冒泡也是可以的，方法和bind是一样的
//通过off来移除事件,也支持移除多个，也支持明明空间
//on如何替换delegate呢?也是通过父元素绑定和删除
// $("#box").on('click',':input',function () {
// $(this).clone().appendTo('#box')
// })
//移除事件委托
// $("#box").off('click',':input')
//one的意思，仅仅触发一次，然后就会移除事件
// $(":input").one('click',function () {
// alert("one来触发事件")
// })
// 同样one的委托效果也是一样的 ，只有第一次生效
// $("#box").one('click',':input',function () {
// $(this).clone().appendTo("#box")
// })
})
