（八）jQuery中的事件
1.加载DOM
在常规的JavaScript中，使用window.onload方法；而在jQuery中，使用$(document).ready(function(){ })方法。
window.onload与$(document).ready()的不同：
● 执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
● 编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 。它会默认用后面的函数覆盖前面的函数。
$(document).ready()可以同时编写多个，并且都可以得到执行
● 简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
2.事件绑定
在文档加载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法对匹配元素进行特定事件的绑定。
bind()的调用格式：
bind(type [,data] ,fn);
type：代表事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseinter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。
data：可选参数，作为event.data属性值传递给事件对象的额外数据对象
fn：有来绑定处理的函数
<body>
<!-- 第1种效果-->
<div id="panel">
<h5 class="head">什么是jQuery？</h5>
<div class="content" style="display: none">
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript
高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，
在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
</div>
</div>
<hr />
<!-- 第2种效果-->
<div id="panel_2">
<h5 class="head">什么是jQuery？</h5>
<div class="content" style="display: none">
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript
高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，
在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
</div>
</div>
<script type="text/javascript">
//光标滑过时显示，离开隐藏
$("#panel h5.head").bind("mouseover", function(){
$(this).next("div.content").show();
});
$("#panel h5.head").bind("mouseout", function(){
$(this).next("div.content").hide();
});
//单击以改变是否显示
$("#panel_2 h5.head").bind("click", function(){
if($(this).next("div.content").is(":visible")){//如果显示
$(this).next("div.content").hide();
}else{
$(this).next("div.content").show();
}
});
</script>
</body>
3.合成事件
● hover()方法
hover()方法的语法结构：hover(enter, leave);
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发enter函数；当光标移出这个元素时，会触发leave函数。
● toggle()方法
toggle()方法的语法结构：toggle(fn1, fn2,...,fnN);
toggle()方法用于模拟鼠标连续单击事件。第一次单击元素时，触发fn1函数，当再次单元素时，触发fn2函数；如果有更多函数，则依次触发，直到最后一个。
4.事件冒泡
事件冒泡现象重现：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<script type="text/javascript">
//为span元素绑定事件
$("#content span").bind("click", function(){
var txt = $("#msg").html() + "<p>span元素被单击</p>";
$("#msg").html(txt)
});
//为span元素绑定事件
$("#content").bind("click", function(){
var txt = $("#msg").html() + "<p>div元素被单击</p>";
$("#msg").html(txt)
});
//为span元素绑定事件
$("body").bind("click", function(){
var txt = $("#msg").html() + "<p>body元素被单击</p>";
$("#msg").html(txt)
});
</script>
</body>
停止事件冒泡：
<script type="text/javascript">
//为span元素绑定事件
$("#content span").bind("click", function(event){
var txt = $("#msg").html() + "<p>span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});
//为span元素绑定事件
$("#content").bind("click", function(event){
var txt = $("#msg").html() + "<p>div元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});
//为span元素绑定事件
$("body").bind("click", function(event){
var txt = $("#msg").html() + "<p>body元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});
</script>
当单击元素时，事件对象event就被创建了。这个事件对象只有在事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被毁弃。
5.事件对象的属性
1)event.type:该方法的作用是可以获取到事件的类型
$("a").bind("click",function(){
console.log(event.type); //输出为click
return false;
});
2)event.preventDefault() 阻止默认的事件行为 （JavaScript中符合w3c规范中的preventDefault()方法在IE中无效）
3)event.stopPropagation() 阻止时间的额冒泡 （JavaScript中符合w3c规范中的stopPropagation()方法在IE中无效）
4)event.target 获取到触发事件的元素
5)event.relatedTarget 如在mouseover事件触发时,相关的元素,如另外一个mouseout元素
6)event.pageX和event.pageY 获取到光标相对于页面的x坐标和y坐标
7)event.which() 在鼠标单击事件中获取到鼠标的左中右键
8)event.metaKey 判断事件是否包含ctrl按键
9)event.originalEvent() 指向原始的事件对象
6.移除事件：unbind()
7.模拟操作：使用trigger()方法模拟事件
● 常用模拟
模拟单击事件：$("#btn").trigger("click");（简化：$("#btn").click();）
● 触发自定义事件:
HTML：
<script type="text/javascript">
//为Button绑定单击事件
$("#btn").bind("myClick", function(){
$("#test").append("<p>我自定义的事件<p>");
});
//触发自定义事件
#("#btn").trigger("myClick");
</script>
● 传递数据
<script type="text/javascript">
//为Button绑定单击事件
$("#btn").bind("myClick", function(event, message1, message2){
$("#test").append("<p>"+message1+message2+<p>");
});
//触发自定义事件
#("#btn").trigger("myClick" ,["我自定义的", "事件"]);//传递两个参数
</script>
8.添加事件命名空间，便于管理
<script type="text/javascript">
$("#btn").bind("click.plugin", function(event, message1, message2){
$("#test").append("<p>"+message1+message2+<p>");
});
$("#btn").bind("mouseover.plugin", function(event, message1, message2){
$("#test").append("<p>"+message1+message2+<p>");
});
$("#btn").bind("myClick", function(event, message1, message2){
$("#test").append("<p>"+message1+message2+<p>");
};
#("#btn").unbind(".plugin");//移除plugin命名空间下的事件
</script>
（八）jQuery中的事件的更多相关文章
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery：详解jQuery中的事件（一）
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记（三）jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
随机推荐
- 【01】react 之 hello world
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...
- Windows通过data文件夹恢复mysql数据库
mysql--1146--报错 先找到数据库存放地址,即Data文件夹(复制留下来) 再用电脑管家把所有的mysql卸载 然后把mysql文件夹弄走(卸载不会清掉它,需手动,一般在C:\Program ...
- 【LA5059】Playing With Stones （SG函数）
题意:有n堆石子,分别有a[i]个.两个游戏者轮流操作,每次可以选一堆,拿走至少一个石子,但不能拿走超过一半的石子. 谁不能拿石子就算输,问先手胜负情况 n<=100,1<=a[i]< ...
- 【HDOJ5533】Dancing Stars on Me（计算几何）
题意:给定二维平面上的n个整点,问它们是否都在正n边形的定点上 n<=100,abs(x[i]),abs(y[i])<=1e4 思路:队友做的,抱大腿 可以发现只有n=4时顶点有可能都是整 ...
- ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: YES)
ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) ERROR 1045 (28000 ...
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- 牛客网 牛客小白月赛1 I.あなたの蛙が帰っています-卡特兰数，组合数阶乘逆元快速幂
I.あなたの蛙が帰っています 链接:https://www.nowcoder.com/acm/contest/85/I来源:牛客网 这个题有点意思,是卡特兰数,自行百度就可以.卡特兰数用处 ...
- (3)Django 配置
一.settings django安装的应用程序 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.c ...
- 洛谷——P1996 约瑟夫问题
P1996 约瑟夫问题 (什么?!要给学弟学妹讲约瑟夫问题?!难道就不怕我给他们讲错了吗?! 啊啊啊,为了不给学弟学妹们讲错,蒟蒻表示要临阵磨一下刀...) 题目背景 约瑟夫是一个无聊的人!!! 题目 ...
- PHP的fsockopen方式访问接口慢的原因与优化方案
在开发过程中常常遇到这样的需求,模拟浏览器访问某接口,并获取返回数据.我们比较常使用的方法是fsockopen与接口建立连接,然后发出指令,然后通过fgets接受返回值. 但是我们发现,通过PHP模拟 ...