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

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>
时间： 2024-10-10 17:28:20

web前端之锋利的jQuery四：jQuery中的事件的相关文章

jquery的AJAX中各个事件执行顺序

jquery的AJAX中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.error 7.ajaxError (全局事件) 8.complete 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件)

jQuery文本框中的事件应用

jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquer

web前端基础知识-（五）jQuery

通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript函数库,通过它我们可以"写的少做的多"; jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 二.jQuery使用 jQuery目前分为1.x

web前端【第十篇】jQuery基本语法

一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3.如何使用jQuery? 1.导入 <script src="jquery-3.2.1.js"></script> 或者<script src="jquery-3.2.1.min.js"></script> 2.语法规则:

web前端工程师（实习生）面试前中后

金三银四是对应聘工作的要把握时间的一种描述. 面试前 我是从去年下半年才开始接触web前端知识的,刚开始学习前端知识的时候,虽说是在学院的一个工作室进行学习的,但是因为交流少等原因,导致自己一开始走了一些弯路.感觉直到今年的开学之际,意识到自己要找实习了,翻看网上的一些面经等,才发现自己知道的实在太少了,甚至可以说对前端一无所知.这么说吧,虽然我也看了<javascript高级程序设计>,<锋利的jquery>,<javascript Dom编程艺术>等,但是学了几个月

web前端入门到实战：CSS：scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需

使用jQuery在javascript中自定义事件

js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的各种传递. 例如,我要点击一个button,现在要将这个点击事件抛出来,从其他任何想要的地方去接收: 这个是button <button name="btn" onclick="clickbtn()">按钮</button> js: 1 var

web前端【第十一篇】jQuery属性相关操作

知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 removeAttr(属性名) -删除属性的值 prop(属性名|属性值) - 属性的返回值的是布尔类型 - 单选,反选,取消的例子 removeProp(属性名) -删除属性的值 循环:each(两种循环示例) - $.each(数组/对象, function(i, v){}) - $("div"

web前端【第十三篇】jQuery扩展和事件

一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn]) 双击 scroll([[data],fn]) 滚动 submit([[data],fn]) 提交 不常用事件 error([[data],fn])