jquery学习笔记之事件
来源：互联网 发布：apache 配置多个域名 编辑：程序博客网 时间：2024/05/04 12:57
加载DOM--------$(document).ready()
执行时机
多次使用
简写使用 $().ready()
事件绑定
调用格式: bind(type[,data],function)
事件类型：blur focus load resize scroll unload click（one方法，点击一次即失效） dbclick
mousedown mouseup mousemove
mouseover mouseout这两个为一组
mouseenter mouseleave 这两个为一组
keydown keyup keypress
change select submit error
例子一：
<h5>阿伦</h5>
<div id="content">
国家邮政局《邮政普遍服务基金征收使用管理暂行办法征求
意见稿》。标准是国内同城快递业务0.1元/件，国内异地
快递业务0.2元/件，港澳台快递业务1元/件，综合测算后，
预计2013年该基金将征收10亿元左右。 《快递企业或被征10
亿份子钱》
</div>
jquery代码如下
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.bind("click",function(){
if($content.is(":visible")){ //is()判断元素是否符合某个条件
$content.hide();
}else{
$content.show();
}
});
});
例子二：
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.bind("mouseover",function(){
$content.show();
}).bind("mouseout",function(){
$content.hide();
});
});
合成事件
hover()方法
语法结构 hover(enter,leave)用于模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数（enter），
当光标移出这个元素时，会触发第二个函数（leave）
例子：
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.hover(function(){$content.show()},function(){$content.hide()});
});
toggle(f1,f2,f3，……,fn)方法
该方法用于模拟鼠标连续单击事件，第一个次单击触发第一个函数，如果有更多函数，则轮流触发，随后的每次单击重复调用
例子：
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.toggle(function(){$content.show()},function(){$content.hide()}); //这里是单击，不是鼠标悬停
});
toggle()方法还有另外一个作用：切换元素的可见状态，如果元素是可见的，单击后切换为隐藏；反之亦然
例子：
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.toggle(function(){$content.toggle()},function(){$content.toggle()});
});
例子二：
$(document).ready(function(){
var $h=$("h5");
var $content=$("#content");
$h.toggle(function(){
$content.show();
$(this).addClass("highlight");
},
function(){
$content.hide();
$(this).removeClass("highlight");
});
});
事件冒泡
假设网页上有两个元素，其中一个元素嵌套在另一个元素里面，并且都被绑定了click事件，同时还绑
定了body元素，此时当点击最里层的元素时，外层元素的事件也会被触发
例子：
<body>
<div id="outer" class="outer">
外层<br>
<span>
内层
</span>
</div>
<br><br><br><br>
<div id="msg" class="outer">
</div>
</body>
jquery代码如下：
$(document).ready(function(){
$("span").bind("click",function(){
var txt="<p>内层被点击了</p>"+$("#msg").html();
$("#msg").html(txt);
});
$("#outer").bind("click",function(){
var txt="<p>外层被点击了</p>"+$("#msg").html();
$("#msg").html(txt);
});
$("body").bind("click",function(){
var txt="<p>body被点击了</p>"+$("#msg").html();
$("#msg").html(txt);
});
//$(".outer").bind
});
停止事件冒泡
可以用stopPropagaion()方法来停止冒泡事件
例子：
$("span").bind("click",function(event){
var txt="<p>内层被点击了</p>"+$("#msg").html();
$("#msg").html(txt);
event.stopPropagation();
});
阻止默认行为
可以用preventDefault()方法来阻止元素的默认行为
如果想同时对事件和对象停止冒泡行为和默认行为，可以用return false;来实现，相当于同时调用stopPropagation()和preventDefault()方法
事件及元素对象的属性
event.type可以获取的事件的类型
例子
$(document).ready(function(){
$("span").mouseover(function(event){
alert(event.type);
});
}); //返回mouseover
event.target的作用是获取到触发事件的元素
例子：
$(document).ready(function(){
$("span").mouseover(function(event){
var $tg=event.target;
alert($tg.title);
});
});
与event.type的区别，两个分别获取事件和元素
event.stopPropagation()方法和event.preventDefault()方法
event.relatedTarget获取事件发生的相关元素
event.pageX和event.pageY该方法的作用是获取到光标(不是元素)相对于页面的x坐标和y坐标
例子：
$(document).ready(function(){
$("a").click(function(event){
var txt="X坐标为"+event.pageX+"-----Y坐标为"+event.pageY;
alert(txt);
return false;
});
});
event.which方法是获取鼠标（不是键盘）在单击事件中获取到的鼠标左中右键，分别为123；
例子：
$(document).ready(function(){
$("a").mousedown(function(e){
alert(e.which);
return false;
});
});
event.metaKey用于获取键盘上的<ctrl>键
移除事件unbind([type],[data])
例子：
<button id="btn">点击我</button>
<div id="msg">
</div>
<button id="del">删除事件</button>
jquery代码如下所示
$(document).ready(function(){
$("#btn").bind("click",f1=function(){
var txt=$("#msg").html()+"<p>第一个绑定函数</p>";
$("#msg").html(txt);
})
$("#btn").bind("click",f2=function(){
var txt=$("#msg").html()+"<p>第二个绑定函数</p>";
$("#msg").html(txt);
})
$("#btn").bind("click",f3=function(){
var txt=$("#msg").html()+"<p>第三个绑定函数</p>";
$("#msg").html(txt);
})
$("#del").click(function(){
$("#btn").unbind("click",f2);
});
});
模拟操作trigger(type[,data])
trigger()方法触发事件后，会执行浏览器的默认操作，用triggerHandler()方法可以屏蔽默认的操作
bind()方法的其他用法
绑定多个事件(切换div的背景色)
例子：
$(document).ready(function(){
$("#msg").bind("mouseout mouseover",function(){
$(this).toggleClass("highlight");
});
});
添加事件命名空间，便于管理
例子：
<div id="msg" class="highlight">
</div>
<button id="del">删除事件</button>
jquery代码如下
$(document).ready(function(){
$("#msg").bind("mouseout.plugin mouseover.plugin",function(){
$(this).toggleClass("highlight");
});
$("#msg").bind("click.plugin",function(){
var txt=$("#msg").html()+"<p>click事件被触发了</p>";
$("#msg").html(txt);
});
$("#msg").bind("dblclick",function(){
var txt=$("#msg").html()+"<p>dbclick事件被触发了</p>";
$("#msg").html(txt);
});
$("#del").click(function(){
$("#msg").unbind(".plugin");
});
});
相同事件名称，不同命名空间执行方法
例子1：
<button id="btn">点击我</button>
<div id="msg" class="highlight">
</div>
<button id="del">删除事件</button>
jquery代码如下
$(document).ready(function(){
$("#btn").bind("click.plugin",function(){
var txt=$("#msg").html()+"<p>click事件plugin被触发了</p>";
$("#msg").html(txt);
})
$("#btn").bind("click",function(){
var txt=$("#msg").html()+"<p>click事件1被触发了</p>";
$("#msg").html(txt);
})
$("#del").click(function(){
$("#btn").unbind(".plugin");
//把在.plugin命名空间下的事件删除[$("#btn").unbind("click!");]感叹号在这里不起作用
});
});
例子2：
$(document).ready(function(){
$("#btn").bind("click.plugin",function(){
var txt=$("#msg").html()+"<p>click事件plugin被触发了</p>";
$("#msg").html(txt);
})
$("#btn").bind("click",function(){
var txt=$("#msg").html()+"<p>click事件1被触发了</p>";
$("#msg").html(txt);
})
$("#del").click(function(){
$("#btn").trigger("click!"); //感叹号的作用是匹配所有不包含在命名空间下的click方法
});
});
- jquery学习笔记之事件
- jQuery学习笔记之事件
- jQuery学习笔记之事件
- jQuery学习笔记之八----基础事件
- jQuery学习笔记之九------事件对象
- jQuery学习笔记之十------高级事件
- JQuery学习笔记之change事件
- jQuery学习笔记：事件
- Jquery事件学习笔记
- jQuery事件学习笔记
- jquery 笔记之事件
- jQuery笔记之事件
- jQuery学习之---事件
- jQuery学习之事件
- jquery学习笔记 之二 事件与效果
- jQuery-mobile 学习笔记之三（事件监听）
- jQuery学习笔记之DOM操作、事件绑定（2）
- jQuery学习笔记之给动态生成元素绑定事件
- IT旅途——程序员面试经验分享
- yii的学习笔记
- PHP中stripslashes函数的小结
- jquery学习笔记之选择器
- jquery学习笔记之DOM操作
- jquery学习笔记之事件
- transition XML和TransitionDrawable实例
- mysql常用命令
- 今天去面试碰到到一个问题
- 面试感悟
- 今天去面试碰到的两个面试题
- PHP面试again，加油
- PHP和MySQL Web开发读书笔记---数据的存储与检索
- PHP和MySQL Web开发读书笔记---面向对象的PHP
