环游JQ历险记：锋利与权威笔记（二）

2017-03-30 本文已影响46人 coderLfy

这次分享的是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，有兴趣可以去搜搜

废话：上次我自己也觉得文章又臭又长，我自己都不想看，现在修改了一下写东西的方式，在文章头部写出大概要讲什么，然后尽量让文章看起来稍微舒服些，我也在努力，谢谢大家！