jQuery学习之旅 Item8 DOM事件操作-你不知道的jQuery

1、jquery页面载入事件

1、传统加载事件

<body onload=”函数名()”> 页面全部html和css代码加载完成之后再调用指定的onload函数
window.onload = function(){
    加载过程
}

2、jquery实现加载事件

① $(document).ready(function(){加载代码});
② $().ready(function(){加载代码});
③ $(function(){加载代码});  ----- jQuery.fn.init

第三种方式是对前两种方法封装的简便实用方法

//jquery加载事件
//第一种使用
$(document).ready(function(){
    //加载过程代码
    alert("abc");
});

//第二种使用
$().ready(function(){
    alert("hello");
});

//第三种使用
$(function(){
    alert("china");
});

$(function(){
    alert("beijing");
});

3、jquery加载与传统加载区别

① jquery加载事件可以同时使用多个，传统只有一个

多个人可以定义各自的加载事件
jquery加载事件都放入一个数组里边，遍历数组
传统方式加载事件是存入一个变量里边，多次使用变量值被覆盖

② jquery加载事件比传统加载事件执行速度快

jquery加载事件执行时间点，dom树结构在内存中绘制完毕就执行加载
传统方式加载执行时间点，全部内容在浏览器里边呈现出来才会执行

这里写图片描述

jquery加载事件捕捉的时间点不一样

内容绘制完毕之后就捕捉时间 DOMContentLoaded
传统方式是内容在浏览器显示完毕之后再来捕捉window.onload

jquery内部原理模拟：

//模拟jQuery的加载事件行为
document.addEventListener("DOMContentLoaed", function(){alert("abcd")});

给当前应用设置一个事件DOMContentLoaded，dom树结构在内存绘制完毕就执行一些过程。

2、jquery事件绑定（bind的省略）

1、原生js的时间绑定

<input  type=”text”  onclick=”f1()” />  缺点：结构和行为没有分离
document.getElementById(‘id’).onclick=f1;  结构和行为分离
document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流浏览器
                          .attachEvent(“onclick”,fucntion(){});  IE事件绑定

2、jquery事件绑定(input框设置点击事件click)

$(“input”).click(function(){});
$(“input”).mouseover(function(){});

在jquery里边把普通时间名字的on去掉，就是jquery对应的事件方法名字

注意：

$(“input”).click(fn);  给input框设置事件
$(“input”).click();    触发input框的click事件执行
$(“div”).mouseover();  触发div的鼠标移入事件执行

$(function(){
    $("#result").click(function(){
        console.log("click");
    });
    $("#result").mouseover(function(){
        //触发点击事件一并执行
        $(this).click();
        console.log("mouseover");
    });
});

鼠标移入div后会触发点击事件执行

3、jquery事件绑定（bind绑定）

上述讲的事件绑定方法有：

<input onclick=”f1()”>
document.getElementById(“#apple”).click = function(){}
document.getElementById(“#pear”).addEventListener(‘click’,function(){});
$(选择器).click(function(){});//bind的省略形式

jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法：

bind(type,[data],fn);

其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象。参数fn表示事件处理函数。

bind方法与之前事件绑定不同之处：

1．事件绑定和取消

（1）可以为多个不同的事件类型，绑定同一个处理过程

 a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件处理});
 b) 多个不同类型事件中间使用单个空格分隔。

（2）. 可以为同一个对象同时绑定多个不同类型事件

a)  $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn});
b)  bind(json对象)

（3）. 可以为同一个对象的同一类型事件绑定多个处理过程

a)  $(“#apple”).bind(‘click’,fn1);
b)  $(“#apple”).bind(‘click’,fn2);

（4）. 可以灵活取消事件绑定

a)  全部事件都取消
i.  $(“#apple”).unbind();
b)  可以取消指定类型取消
i.  $(“#apple”).unbind(‘click’);
c)  可以取消指定类型指定处理过程事件
i.  $(“#apple”).unbind(‘click’,fn1);
d)  第三项事件取消注意：
    $(“div”).bind(‘click’,function(){});  不灵
    function f1(){}
    $(“div”).bind(‘click’,f1);     有效

示例：

<script>
    function a(){
        alert("ok, I see");
    }
    function b(){
        alert("ok, you see");
    }

    function f1(){
        //$("div").bind(事件类型[,事件传递参数],事件处理);

        //①绑定多个同类型事件
        //事件可以使用匿名函数表达式，也可以使用函数指针
        $("div").bind("click",a);
        $("div").bind("click",b);

        //② 同时为多个事件绑定相同的处理过程
        $("div").bind("click mouseover mouseout",function(){
            $("#result").append("hello");
        });

        //③ 同时绑定不同事件
        $("div").bind({
            click:function(){ $("#result").append("click") },
            mouseover:function(){ $("#result").append("over") },
            mouseout:function(){ $("#result").append("out") }
        });
    }

    function del(){
        //全部取消
        //$("div").unbind();
        //取消指定事件
        //$("div").unbind("mouseover");

        //取消指定事件具体处理程序
        $("div").unbind("click",a);
    }
</script>

<body>
     <div>bread and milk</div>
     <input type="button" value="触发" onclick="f1()"/>
     <input type="button" value="取消" onclick="del()"/>
     <span id="result"></span>
 </body>

2．事件绑定参数

$(“div”).bind(‘click’,{json对象参数}, function(evt){
    //参数具体使用
    evt.data.对象属性名称；
});

示例：

<script>
    function f1(){
        //$("div").bind(事件类型[,事件传递参数],事件处理);
        var name = "tom";
        $("div").bind("click",{name:"tom",age:33},function(evt){
            //evt就是event事件对象
            alert(evt.data.name);//tom
            alert(evt.data.age);//33
        });
        //name被复制了一份传递给nm
        $("div").bind("click",{nm:name},function(evt){
            //evt就是event事件对象
            alert(name);
            alert(evt.data.nm);  //tom
        });

        name = "jack";
        //name被复制了一份传递给nm
        $("#btn").bind("click",{nm:name},function(evt){
            //使用参数name
            alert(name);
            alert(evt.data.nm);  //jack
        });
    }
    //tom  jack
    //jack  jack //内存中只有一个name值为jack
    //           div设置事件的时候，内部并没有执行函数（只是做了一个声明），name也没有被访问
    //           等待事件被触发的时候，name的值已经变为jack

</script>

<body>
    <div>bread and milk</div>
    <input type="button" value="元素" id="btn" />

    <input type="button" value="触发" onclick="f1()"/>    
    <span id="result"></span>
</body>

3．事件触发模拟

用户出发触发事件执行：

$(“form”).submit();

模拟用户触发事件执行trigger()：
具体用法：
trigger（type, [data]）===>只需将你的type设置为自定义的事件即可。

$(“form”).trigger(‘submit’);
$(“form”).triggerHandler(‘submit’);(没有浏览器默认动作)

triggerHandler() 只会执行具体事件，没有浏览器默认动作

例如：表单有提交事件

表单通过按钮真实被提交后发生的事情
① 执行“ok，马上出发”弹出框(提交事件的处理程序执行)
② 浏览器需要提交给下个页面(浏览器默认动作)

$(function(){
    $("form").bind("submit",function(){
        alert("ok, i go quickly");
    });
});

function f1(){
    //trigger 触发器
    $("form").trigger("submit");
    $("form").trigger("submit");//触发指定事件执行，同时有浏览器默认动作
    //$("form").triggerHandler("submit");
    $("form").triggerHandler("submit");//触发指定事件执行,不会执行浏览器默认动作
}

trigger()还可以出发自定义时间

4、阻止浏览器默认动作

浏览器默认动作：表单提交，页面重定向， <a>标签的超链接
利用提交事件可以实现表单域验证，通过页面就跳转，否则页面要停止跳转
阻止浏览器默认动作有两种方式：

① return false; //也可以阻止事件冒泡
② event.preventDefault(); //推荐使用

$(function(){
    //表单提交需要验证表单域，正确就可以提交走，否则没有浏览器默认动作
    $("form").bind("submit",function(evt){
        //对表单域进行验证，
        //用户名不正确
        alert("用户名不正确");
        //return false;
        evt.preventDefault();//阻止浏览器默认动作
    });
});

5、阻止事件冒泡

html
—>head
———>body
—————–>div
————————>input

input和div都有点击事件，由于事件冒泡作用，input框被点击触发事件之后，div的点击事件也要被触发。
有的时候根据需要不要进行事件冒泡，需要对其进行阻止

事件冒泡阻止：

① return false; 容易与“浏览器默认动作阻止“混淆
② event.stopPropagation(); 阻止事件冒泡

$(function(){
    $("div").bind("click",function(){
        alert("divdiv");
    });
    $("input").bind("click",function(evt){
        alert("inputinput");
        //阻止事件冒泡
        //return false;
        evt.stopPropagation();

    });
});

6、事件委派与解除委派

事件委派与事件绑定效果一致，解除委派与时间取消类似。

$().bind(type,fn);
$().live(type,fn);
$().die(type,fn);//不带参数就是解除live事件，如果带了参数type，那会移除相应的live事件，如果同时指定了第二个参数，则只能移除指定事件的处理函数。

“事件委派“较比”事件绑定“不同之处：

使用事件委派，后增加的兄弟元素也有相同的事件被设置。

<script type="text/javascript">
$(function(){
    //使用live事件委派，增加的元素也有与兄弟一样的事件
    $("li").live("click",function(){
        //li被点击输出自己的文本内容
        alert($(this).html());
    });

});
//方法声明要在加载事件外部，否则会访问不到
function f1(){
    $("ul").append("<li>北京</li>");
}
</script>
<style type="text/css">
    div {width:300px; height:200px; background-color:pink;}
</style>

<body>
    <ul>
        <li>天</li>
        <li>角</li>
        <li>涯</li>
        <li>海</li>
    </ul>
    <input type="button" value="增加" onclick="f1()" />
</body>

7、事件合并

Query有两个合成事件—-hover()和toggle(),这两个方法都是jQuery自定义的方法
1、hover()方法
语法结构为 hover(enter,leave)
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，离开时触发第二个函数。
这个函数很好理解，而且实际开发中会有很多妙用。

<ul>
            <li>天</li>
            <li>角</li>
            <li>涯</li>
            <li>海</li>
</ul>

鼠标移动在每个li身上，有高亮效果
本质：每个li都有鼠标移入和移出事件，有三种实现方法
1、第一种方式：

$(“li”).each(function(){
    $(this).mouseover(fn);
    $(this).mouseout(fn);
});

第二种方式：

$(“li”).mouseover(fn)
$(“li”).mouseout(fn)

第三种方式：hover()
该方法就是对mouseover和mouseout两个事件封装的简便使用

$(“li“).hover(两个函数参数：移入和移出函数);
    $(“li”).hover(
        function(){},
        function(){}
    );

<script>
    $(function(){
        $("li").hover(
            function()
            {
                $(this).css("background-color","lightblue");
            },
            function()
            {
                $(this).css("background-color","");
            }
        );

    });
</script>
<style type="text/css">
    div {width:300px; height:200px; background-color:pink;}
</style>

<body>
    <ul>
        <li>天</li>
        <li>角</li>
        <li>涯</li>
        <li>海</li>
    </ul>
</body>

2、toggle()方法

语法结构 toggle(fn1,fn2,fn3...fnN)

toggle()方法用于模拟鼠标连续单击事件，第一次单击事件触发指定的第一个函数，第二次就触发第二个函数…. 如果有更多的函数则依次触发，直到最后一个。随后的每次单击都是对这几个函数的轮番调用。
看到这个方法第一想到的是toggleClass() 用于给元素对象切换样式。
toggle方法也是挺好理解的，以前项目中倒是没有应用过。举个例子：

<html>  
 <head>  
  <title> unbind() </title>  
  <script  src="jquery-1.8.3.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("input").toggle(  
                function(){$("ul").append($("<li><h2>左  慈</h2></li>"))},  
                function(){$("ul").append($("<li><h2>曹  冲</h2></li>"))},  
                function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))},  
                function(){$("ul").append($("<li><h2>神曹操</h2></li>"))},  
                function(){$("ul").append($("<li><h2>孙尚香</h2></li>"))},  
                function(){$("ul").append($("<li><h2>神关羽</h2></li>"));$(this).unbind()}  
            )  

        })        
  //-->  
  </script>  
 </head>  
 <body>  
    <h1>三国杀变态武将</h1>  
    <div >  
        <ul>  

        </ul>  
    </div>  

    <input type="button" value="连续点击按钮可切换事件" >  
 </body>  
</html></span>

注意：在上例中引用的jquery库不是以前常用的jquery-2.1.0.min.js了，是因为在jquery1.9版本中将toggle()的切换功能去掉了,现在toggle这个功能只能控制元素的显隐。

8、事件命名空间

jQuery支持事件命名空间以方便管理事件。例如，在下面示例中为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就是在事件类型后面以点语法附加一个别名，以便于引用事件，如，click.a ，其中a就是click当前事件的别名。

<html>  
 <head>  
  <title> jQuery命名空间 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("div").bind("click.a",function(){  
                $("body").append("<p>click事件<p/>")  
            });  
            $("div").bind("dblclick.a",function(){  
                $("body").append("<p>dblclick事件<p/>")  
            });  
            $("div").bind("mouseover.a",function(){  
                $("body").append("<p>mouseover<p/>")  
            });  
            $("div").bind("mouseout.a",function(){  
                $("body").append("<p>mouseout<p/>")  
            });  
        })  
  //-->  
  </script>  
 </head>  

 <body >  
    <div id="" class="">  
        jQuery命名空间  
    </div>  
 </body>  
</html>

我们为div绑定的几个事件都指定了命名空间，这样在删除事件的时候，就可以直接指定命名空间即可。例如调用下面一行代码就可以把上面绑定的事件全部删除：

$("div").unbind(".a");

同样，假如我们为click事件类型指定了不同的命名空间，那么当我们只想删一个的时候只要指定它的命名空间即可。