这次分享的是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,有兴趣可以去搜搜
废话:上次我自己也觉得文章又臭又长,我自己都不想看,现在修改了一下写东西的方式,在文章头部写出大概要讲什么,然后尽量让文章看起来稍微舒服些,我也在努力,谢谢大家!
网友评论