这次分享的是JQ的事件、冒泡
这篇文章讲了 事件冒泡以及委托，书中的几种事件(bind、unbind、one、hover、trigger、toggle )
首先谈谈事件中的冒泡和捕获吧
冒泡在生活中也很好理解，从水底出来个气泡然后慢慢的就传递回来到水面，过程是从小到大
JQ中的冒泡一样是如此，先从要触发的元素到它的父级
//html
<body>
<div>
<span>冒泡</span>
</div>
</body>
点击span后冒泡的传递方式：span => div => body
这样的传递，而捕获能则相反。
在浏览器中触发一个点击事件会经过那些过程？(面试题曾今被问道)
事件捕获 => 要触发的DOM => 事件冒泡
在工作中冒泡和捕获有什么作用？（所在公司曾面过应聘者）
冒泡的作用大家只要一听就知道了：事件委托
事件委托：自己的事让别人去做。
// html
<ul id="box">
<li>1</li>
<li>2</li>
</ul>
//JQ V1.7版本以后才能这么写
<script>
$('#box').on('click','li',function(){
console.log($(this).text());
});
</script>
//JS 也来一个
var box = document.getElementById('box');
box.addEventListener('click', function(ev){
var e = window.event||ev;
var target = ev.target || ev.srcElement; //IE下srcElement if(target.nodeName.toLowerCase() == 'li'){
console.log(target.innerHTML);
}
},false);//最后一个参数false是冒泡，true是事件捕获
如何阻止事件捕获？
stopPropagation() 也可以通过
return false阻止
ready()方法的工作原理:
在jq加载到页面时，会设置一个isReady值的标记，用于监听页面加载的进度，遇到执行ready()方法时，通过查看isReady是否被标记，如果未被设置，呢么就说明页面未加载完成，在此情况下将未完成的部分用一个数组缓存起来，当全部加载完成后，在将未完成的部分通过缓存一一执行
事件绑定bind()绑定事件
bind在3.0被干掉了代替的是on，在1.7的时候on就有了，bind也是调用了on
bind(type,[data],fn);
- 【type】：事件类型
- 【data】：作为event.data属性值传递给事件对象的额外数据对象,这个参数一般用的少，都是用在函数里传过去一个event进行使用
- 【fn】: 绑定事件的处理函数
// 绑定一次
$('button').bind('click', function(){
console.log('点击了');
})
// 通过映射方式绑定不同的事件
$('button').bind({
click:function(){
console.log('点击了！');
},
mouseover:function(){
console.log('鼠标')；
}
})
事件移除unbind()绑定事件
bind(type,[data],fn);
- 【type】：事件类型
- 【fn】: 解绑绑定事件的处理函数
// 移除
$('button').unbind('click', function(){
console.log('移除了');
})
切换事件 hover() toggle()
hover 可以是元素在鼠标悬停与移除事件中切换---语法：
houver(over, out)
//用法
$("a").hover(function(){
// 执行代码一
}, function(){
// 执行代码二
})
// 等价于
$('a').mouseenter(fucntion(){
// 执行代码一
})
$('a').mouseleave(fucntion(){
// 执行代码二
})
toggle 每次点击后依次调用函数，可以依次调用N个指定的函数，直到最后一个函数，然后对函数进行轮番调用---语法：
toggle(fn,fn2,[fn3, fn4, ...])
//用法
$('button').toggle(function(){
console.log(1);
},function(){
console.log(2);
},function(){
console.log(3);
})
其他事件 one() trigger()
one() 用法和绑定事件一样，效果就只触发一次
trigger() 用法和绑定一样，效果就只触发一次 => 语法：
trigger(type, [data])
这个主要用于触发自定义事件或者用来自动执行代码。最能明白的例子就是，在网上浏览，点击东西会自己跳到广告页面
简单聊聊 click、bind(on)、one
之前听同学说一个面试题：问这三者有什么区别，从最简单的区别来看，就是绑定，click绑定事件后，在绑定一次触发的是第二次的，bind可以多次绑定，one只触发一次，深层次要好好剖析了，但是可以从效率来说，bind是优于click，有兴趣可以去搜搜
废话：上次我自己也觉得文章又臭又长，我自己都不想看，现在修改了一下写东西的方式，在文章头部写出大概要讲什么，然后尽量让文章看起来稍微舒服些，我也在努力，谢谢大家！
