码迷，mamicode.com
首页 > Web开发 > 详细

web前端之锋利的jQuery四：jQuery中的事件

时间：2016-12-06 14:41:04      阅读：240      评论：0      收藏：0      [点我收藏+]

标签：char   for   事件   模拟   js库   events   public   ati   sel   

web前端之锋利的jQuery四：jQuery中的事件

加载DOM：

执行时机：
$(document).ready(function(){}); 详情解释

事件绑定：

bind(event,data,function)
第一个参数是事件类型，类型包括：blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit keydown keypress keyup error等，当然也可以包含自定义名称（可以发现jQuery中对应的事件绑定类型比JavaScript中的少了一个“on”）
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数

（1）基本效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(‘#panel h5.head‘).bind("click",function(){
            $(this).next().show();
        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

（2）加强效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(‘#panel h5.head‘).bind("click",function(){
            if($(this).next().is(":visible")){//如果内容是显示的
                $(this).next().hide();
            }else{
                $(this).next().show();
            }

        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

“:visible”在可见性过滤选择器可以查询到，详情查看

（3）改变事件绑定类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(‘#panel h5.head‘).mouseover(function(){
            $(this).next().show();
        }).mouseout(function(){
            $(this).next().hide();
        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

（4）合成事件：

1.hover()方法的语言结构：hover(enter,leave);鼠标经过移出的组合方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(‘#panel h5.head‘).hover(function(){
            $(this).next().show();
        },function(){
            $(this).next().hide();
        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

2.toggle()方法结构：toggle(fn1,fn2,…,fnN):该方法用于模拟鼠标连续点击事件，第一次点击触发第一个事件，第二次点击触发第二个事件，依次循环。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(‘#panel h5.head‘).toggle(function(){
            $(this).addClass("highlight");
            $(this).next().show();
        },function(){
            $(this).removeClass("highlight");
            $(this).next().hide();
        })

    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    .highlight{
        background: #f30;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

事件冒泡：
1.什么是冒泡：在页面上可以有多个事件，也可以一个元素响应多个事件。假设网页上有两个元素，其中一个元素完全嵌套在另一个元素中，并且绑定了click事件，同时在body元素上也绑定了click事件。
小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
        <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //为span元素绑定click事件
        $(‘span‘).bind("click",function(){
            var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
            $("#msg").html(txt);
        });
        //为div元素绑定click事件
        $(‘#content‘).bind("click",function(){
            var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
            $("#msg").html(txt);
        });
        //为body元素绑定click事件
        $(‘body‘).bind("click",function(){
            var txt=$("#msg").html()+"<p>body元素被单击</p>";
            $("#msg").html(txt);
        });

    });
    </script>
</head>
<body>
    <div id="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div>
    <div id="msg"></div>
</body>
</html>

元素会按照事件的顺序依次向下冒泡。

事件冒泡引发的问题：
事件冒泡就可能会引起预料外的效果，上面小例子中，本来只想触发span里面的click事件，却全部触发了。所以，我们很有必要对时间的作用范围进行限制。

事件对象：
$(“element”).bind(“click”,function(event){ //event:事件对象
});
这样的话，当单击element元素时，事件对象就被创建了，这是事件对象只有事件处理函数才能访问到。当事件处理函数结束之后，实践对象也就被销毁了

停止事件冒泡：
在jQuery中提供了stopPropagation()方法来停止事件冒泡

$("span").bind("click",function(){
    var txt=$("msg").html()+"<p>内层span元素被单击</p>"；
    $("#msg").html(txt);
    event.stopPropagation();//停止事件冒泡
});

阻止默认行为：
在jQuery中，提供了preventDefault()方法来阻止元素的默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#sub").bind("click",function(event){
            var username=$("#username").val();
            if(username==""){
                $("#msg").html("<p>姓名不能为空</p>");
                event.preventDefault();
                //可以改写为 return false;
            }
        });

    });
    </script>
</head>
<body>
    <form action="test.html">
        用户名：<input type="text" id="username">
        <input type="submit" value="提交" id="sub">
    </form>
    <div id="msg"></div>
</body>
</html>

事件捕获：
事件捕获与事件冒泡相反，是从外层到里层的，但是jQuery不支持，只有通过原声JavaScript来能进行。还有就是事件捕获并非所有浏览器都是支持的。

事件对象的属性：
1.event.type

$("a").click(function(event){
    alert(event.type);//获取事件类型
    return false;//阻止链接跳转
});

2.event.preventDefault()方法
上面已经介绍了，适用于阻止元素默认行为

3.event.stopPropagation()方法：
上面已经介绍过了，用于停止事件冒泡

4.event.target
event.target的作用是获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。

$("a[href=‘http://www.baidu.com‘]").click(function(event){
    var tg=event.target;//获取事件对象
    alert(tg.href);
    return false;
});

5.event.relatedTarget
mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget在mouseover中相当于IE浏览器的event.fromElement,在mouseout中相当于IE浏览器的event.toElement,jQuery对其封装，使之能兼容各种浏览器。

6.event.pageX和event.pageY
该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器使用page.x/page.y,在火狐浏览器中使用event.pageX和event.pageY.

$("a").click(function(event){
    //获取鼠标当前相对于页面的坐标
    alert("Current mouse position: "+event.pageX+","+event.pageY);
    return false;
});

7.event.which
该方法的作用是在鼠标点击事件中获取到鼠标的左中右键：

$("a").mousedown(function(e){
    alert(e.which);
});

//获得键盘的按键

$("input").keyup(function(e){
    alert(e.which);
});

8.event.metaKey
针对不同浏览器对键盘中的ctrl按键解释不同，jQuery进行封装，斌规定event.metaKey为键盘事件中获取ctrl按键

移除事件：
unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移出的函数
（1）如果没有参数，则删除所有绑定的事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>移除事件</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#delAll").click(function(){
            $("#btn").unbind("click");
        });
        $("#btn").bind("click",function(){
            $("#test").append("<p>我的绑定函数1</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数2</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数3</p>");
        });

    });
    </script>
</head>
<body>
    <button id="btn">单击我</button>
    <button id="delAll">删除所有事件</button>
    <div id="test"></div>
</body>
</html>

web前端之锋利的jQuery四：jQuery中的事件

标签：char   for   事件   模拟   js库   events   public   ati   sel   

原文地址：http://blog.csdn.net/u014785563/article/details/53470346
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！