美文网首页Web前端之路WEB前端程序开发让前端飞
环游JQ历险记:锋利与权威笔记(二)

环游JQ历险记:锋利与权威笔记(二)

作者: coderLfy | 来源:发表于2017-03-30 11:14 被阅读46次
    这次分享的是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);

    1. 【type】:事件类型
    2. 【data】:作为event.data属性值传递给事件对象的额外数据对象,这个参数一般用的少,都是用在函数里传过去一个event进行使用
    3. 【fn】: 绑定事件的处理函数
    // 绑定一次
    $('button').bind('click', function(){
        console.log('点击了');
    })
    
    // 通过映射方式绑定不同的事件
    $('button').bind({
        click:function(){
            console.log('点击了!');
        },
        mouseover:function(){
            console.log('鼠标');
        }
    })
    

    事件移除unbind()绑定事件

    bind(type,[data],fn);

    1. 【type】:事件类型
    2. 【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,有兴趣可以去搜搜

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

    相关文章

      网友评论

        本文标题:环游JQ历险记:锋利与权威笔记(二)

        本文链接:https://www.haomeiwen.com/subject/inmuottx.html