首页 > web前端 > js教程 > 正文

jQuery的事件是什么?jquery事件的介绍

不言
发布: 2018-09-10 16:23:14
原创
1308人浏览过

本篇文章给大家带来的内容是关于jquery的事件是什么?jquery事件的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

页面加载

在DOM中提供了load事件用于页面加载完毕之后执行机制,jQuery提供了ready()方法实现相似的功能,但是存在以下的区别。
1.DOM中的load事件没有任何的简写形式,但是在jQuery的ready()方法中提供了简写形式。
2.在HTML页面加载完成以后,load事件才会被触发;而在DOM节点树加载完毕以后,ready()方法就会被调用。
3.一个HTML页面中只能存在一个load事件,但是可以存在多个ready()方法。
ready()方法的语法结构:

1.$(document).ready(function(){});
2.$().ready(function(){});//简写
3.$(function(){});//简写
登录后复制

事件绑定

单事件绑定与单事件解绑

单事件绑定

jQuery中提供了bind()方法完成绑定事件,语法如下
$element.bind(type,data,callback);
type:表示绑定事件的名称,是字符串类型,没有‘on’。
data:作为element.data属性值传递给事件对象的额外数据对象(可选项)。
callback:表示绑定事件的处理函数。
示例代码如下:

<body>
<button id='btn'>按钮</button>
<script>
function click1(){
console .log('this  is button,');
}
$('#btn').bind('click',click1);
登录后复制

单事件解绑

jQuery中提供了unbind()方法来解绑事件。具体方法如下:
$element.unbind(type[,data,callback]);

$('#btn').unbind('click');//只传递事件名称,解绑定该事件的所有处理函数。
$('#btn').undind('click'click1);//传递时间名称和指定的处理函数,解绑定该事件的指定处理函数。
登录后复制

多事件绑定与解绑

<style>
        #title {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<p id="title">菜单</p>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
// mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开
 //jQuery支持链式操作,多事件绑定时,事件名称之间使用空格分离。
$('#title').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
 
 /*
        unbind()方法
        1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定
        2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定
        3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定
 */ 
 $('#title').unbind('mouseover mouseout');
登录后复制

事件绑定方法的对比

jQuery中提供多组事件绑定与解绑定的方法
1.bind()与unbind() - jQuery 3.0版本后删除方法
2.on()与off()方法 - jQuery 1.7版本后新增方法
 其实bind()与unbind()的底层方法就是on()和off()
3.live()与die() - jQuery 1.7版本后删除方法
 作用 - 实现事件委托
4.delegate()与undelegate() - jQuery 1.6版本后新增方法,jQuery
 3.0版本后删除方法
 作用 - 实现事件委托
5.one() - 为事件绑定一次性的函数

事件切换

hover()方法

jQuery中提供了hover()方法模拟鼠标悬停事件效果。

$element.hover(over,out);
登录后复制

示例代码如下:

   <style>
        #title {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<p id="title">菜单</p>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
 $('#title').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

</script>
</body>
登录后复制

事件模拟

jQuery中提供了trigger()方法用于模拟除法匹配元素绑定的事件
$element.trigger(type[,dat]);

<body>
<button id="btn">按钮</button>
<script>
    // 绑定事件 - 由用户行为进行触发,调用处理函数
    $('#btn').bind('click',function(){
        console.log('this is button.');
    });
    // 模拟用户触发事件
    $('#btn').trigger('click');

</script>
</body>
登录后复制

相关推荐:

事件冒泡是什么如何用jquery阻止事件冒泡_jquery 

javascript/jquery键盘事件介绍

以上就是jQuery的事件是什么?jquery事件的介绍的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号