《锋利的jQuery》学习笔记——jquery中的事件
2014-05-07 16:04
330 查看
jQuery中的事件：
1、加载DOM：在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。jQuery用$(document).ready()方法来代替传统JavaScript的window.onload方法。
区别：1）$(document).ready()方法是在DOM完全就绪时就可以被调用，window.onload方法必须在网页中所有元素完全加载到浏览器后才执行；这样，$(document).ready()方法比window.onload方法更快一些，但是，如果网页中有图片，那么可能图片还未加载完毕，就执行$(document).ready()方法内注册的事件了，那么图片的高度和宽度属性此时不一定有效，这是可以用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。jQuery代码如下：$(window).load(function(){
//编写代码
})
2）$(document).ready()方法可以调用多次，而window.onload方法只能调用一次。
2、事件绑定：在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以用bind()方法来对匹配元素进行特定事件的绑定，一般为了减少代码量，都简写绑定事件，即获取元素后，直接调用绑定的事件函数。常用的绑定事件有click、mouseover、mouserout、blur、focus、load、submit、select、keydown、keypress等等。
3、合成事件：
1）hover()方法：模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发第二个函数。例如：要实现当鼠标移动到标题上时，内容展开，当鼠标移走时，内容收起的功能：
html页面代码：<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jquery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了javascript程序员的设计思路和编写程序的方式。
</div>jquery代码（不用hover函数实现）：
$("h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
用hover函数实现：
$("h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
2）toggle方法：用户模拟鼠标连续单击事件。原理与hover相同。toggle的另外一个作用是切换元素的可见状态，如果元素是可见的，单击切换后则为隐藏；如果元素时隐藏的，单击后变成可见，(toggle事件好像在jquery1.9版本之后只有隐藏/显示作用，而没有状态切换的作用了)例如：
$("h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
});4、事件冒泡：在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都绑定了click事件，同时<body>元素上也绑定了click事件。完整代码如下：
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/jscript">
$(function(){
//step1.为span元素绑定click事件
$('span').bind("click",function(){
var txt=$("#msg").html()+"<p>内层span元素被单击.</p>";
$("#msg").html(txt);
});
//step2.为div元素绑定click事件
$('#content').bind("click",function(){
var txt=$("#msg").html()+"<p>外层div元素被单击.</p>";
$("#msg").html(txt);
});
//step3.为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>当点击内部<span>元素，则会输出3条记录：分别是内层span元素被点击；外层div元素别点击；body元素被点击。原因是单击<span>的同时，也单击了包含<span>元素的<div>和包含<div>的<body>。
如何解决这个问题？引入事件对象来停止事件冒泡。
在程序中使用事件对象很简单，只需要为函数添加一个参数，jquery代码如下：
$("element").bind("click",function(event){//...
});当点击element元素，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完，就会被销毁。
停止事件冒泡：用stopPropagation()方法。就刚才的例子，修改成停止事件冒泡代码如下：
$('span').bind("click",function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击.</p>";
$("#msg").html(txt);
event.stopPropagation();//停止事件冒泡
});
这样，点击span元素的时候，只弹出一条数据。return false的作用更常用，可以替代阻止默认行为的函数。上例中，可以将event.stopPropagation()替换为return false。
5、移除事件：unbind()函数，第一个参数为事件名称，第二个参数对应该事件对应执行的函数名。这样便可以删除唯一的事件。
6、模拟操作：触发自定义事件：trigger()函数。
//触发自定义事件：
$("#btn").bind("myClick",function(){
$("#test").append("<p>我的自定义事件</p>");
});
$('#btn').trigger("myClick");
1、加载DOM：在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。jQuery用$(document).ready()方法来代替传统JavaScript的window.onload方法。
区别：1）$(document).ready()方法是在DOM完全就绪时就可以被调用，window.onload方法必须在网页中所有元素完全加载到浏览器后才执行；这样，$(document).ready()方法比window.onload方法更快一些，但是，如果网页中有图片，那么可能图片还未加载完毕，就执行$(document).ready()方法内注册的事件了，那么图片的高度和宽度属性此时不一定有效，这是可以用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。jQuery代码如下：$(window).load(function(){
//编写代码
})
2）$(document).ready()方法可以调用多次，而window.onload方法只能调用一次。
2、事件绑定：在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以用bind()方法来对匹配元素进行特定事件的绑定，一般为了减少代码量，都简写绑定事件，即获取元素后，直接调用绑定的事件函数。常用的绑定事件有click、mouseover、mouserout、blur、focus、load、submit、select、keydown、keypress等等。
3、合成事件：
1）hover()方法：模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发第二个函数。例如：要实现当鼠标移动到标题上时，内容展开，当鼠标移走时，内容收起的功能：
html页面代码：<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jquery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了javascript程序员的设计思路和编写程序的方式。
</div>jquery代码（不用hover函数实现）：
$("h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
用hover函数实现：
$("h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
2）toggle方法：用户模拟鼠标连续单击事件。原理与hover相同。toggle的另外一个作用是切换元素的可见状态，如果元素是可见的，单击切换后则为隐藏；如果元素时隐藏的，单击后变成可见，(toggle事件好像在jquery1.9版本之后只有隐藏/显示作用，而没有状态切换的作用了)例如：
$("h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
});4、事件冒泡：在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都绑定了click事件，同时<body>元素上也绑定了click事件。完整代码如下：
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/jscript">
$(function(){
//step1.为span元素绑定click事件
$('span').bind("click",function(){
var txt=$("#msg").html()+"<p>内层span元素被单击.</p>";
$("#msg").html(txt);
});
//step2.为div元素绑定click事件
$('#content').bind("click",function(){
var txt=$("#msg").html()+"<p>外层div元素被单击.</p>";
$("#msg").html(txt);
});
//step3.为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>当点击内部<span>元素，则会输出3条记录：分别是内层span元素被点击；外层div元素别点击；body元素被点击。原因是单击<span>的同时，也单击了包含<span>元素的<div>和包含<div>的<body>。
如何解决这个问题？引入事件对象来停止事件冒泡。
在程序中使用事件对象很简单，只需要为函数添加一个参数，jquery代码如下：
$("element").bind("click",function(event){//...
});当点击element元素，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完，就会被销毁。
停止事件冒泡：用stopPropagation()方法。就刚才的例子，修改成停止事件冒泡代码如下：
$('span').bind("click",function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击.</p>";
$("#msg").html(txt);
event.stopPropagation();//停止事件冒泡
});
这样，点击span元素的时候，只弹出一条数据。return false的作用更常用，可以替代阻止默认行为的函数。上例中，可以将event.stopPropagation()替换为return false。
5、移除事件：unbind()函数，第一个参数为事件名称，第二个参数对应该事件对应执行的函数名。这样便可以删除唯一的事件。
6、模拟操作：触发自定义事件：trigger()函数。
//触发自定义事件：
$("#btn").bind("myClick",function(){
$("#test").append("<p>我的自定义事件</p>");
});
$('#btn').trigger("myClick");
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习笔记《锋利的jQuery》-jQuery中的事件和动画
- 学习笔记《锋利的jQuery》-jQuery中的DOM操作
- 学习笔记《锋利的jQuery》-认识jQuery
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（下：动画篇）
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（上：事件篇）
- 《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
- 《锋利的jQuery》学习笔记——jquery动画
- 《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
- 学习笔记《锋利的jQuery》-jQuery选择器
- 4.1 《锋利的jQuery》jQuery中的事件
- 《jQuery基础教程》学习笔记（一）——jQuery事件
- 《锋利的jQuery》读书笔记 第4章 jQuery中的事件和动画
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（上：事件篇）
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（下：动画篇）
- 《锋利的jQuery》四、jQuery的事件
- 《锋利的jQuery》第四章、 jQuery中的事件和动画
- jQuery 常用触发事件
- 读书笔记:自定义事件和jQuery插件
- jquery绑定事件
- jQuery 事件 - ready()