jQuery学习之旅 Item8 DOM事件操作

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事件类型指定了不同的命名空间，那么当我们只想删一个的时候只要指定它的命名空间即可。

相关阅读:
FastAPI 中间件(二) 高级中间件
 FastAPI 中间件(一) 自定义中间件
 FastAPI 进阶知识(三) 错误处理
 FastAPI 进阶知识(二) JSON兼容编码
 FastAPI 进阶知识(一) 表单数据
 FastAPI 基础学习(十四) Response自定义状态码
 FastAPI Response(一) Response模型
 FastAPI 基础学习(十三) Header操作
 FastAPI 基础学习(十二) Cookie操作
 FastAPI 基础学习(十一) 复杂数据类型
原文地址：https://www.cnblogs.com/dingxiaoyue/p/4948188.html