jQuery——入门(四)JQuery 事件
来源:互联网 发布:网络视频直播系统 编辑:程序博客网 时间:2024/05/29 17:52
jQuery——入门(四)JQuery 事件
一、事件初探
加载文档完成触发:
window.onload = function(){} //js
$(window).load(function(){}) //jquery
$(document).ready(function(){})
事件可以多次执行
代码可以简写:$(function(){})
二、JQuery中常见的事件
在网页浏览过程中,会触发各种各样的事件,这些事件的处理能很大程度的提升用户使用的体验,对于常见事件的了解是JS程序开发必不可少的一部分。
1、事件快捷键绑定方式
语法:$(selector).eventType(fn);
案例:$(".box").click(function(){... ...});给box选中的元素增加一个鼠标单击事件
问题:不适用于未来元素/新增元素;比较消耗系统资源
代码案例:
<body><button>按钮</button><p>我是一个p标签内容</p><div class="box"></div><script type="text/javascript">$(function(){$("button").click(function(){$("p").toggle(500);});var newEle = $("<button></button>");newEle.text("新增按钮");newEle.prependTo($(".box"));});</script></body>
2、JQuery在快捷事件处理方式之外提供了四种绑定事件的方式
(1)、bind(遗留项目中比较多出现的绑定方式 | 不支持未来元素)
(2)、live(遗忘 | 支持未来元素,但是新版本已经删除)
(3)、delegate(处理遗留项目时选择的兼容模式绑定项目 | 支持未来元素)
(4)、on(官方及项目组规范 | 不支持 / 支持未来元素)
同时对应了四种解除事件监听的四种方式:
unbind 、die 、undelegate 、off
3、绑定事件
语法:bind(type、[data]、function)
type为事件类型,包括 blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keyup等。
data为方法传递的参数,可以忽略
function是用来绑定的处理函数
例如:为id为box的div元素绑定单击事件
$("#box").bind("click",function(){alert(“box被点击”);})
(1)、绑定单个事件
bind(“事件名”,function(){})
注:当页面元素加载时,bind查询到对应的DOM节点,一个一个绑定对应的事件
当页面元素是后续动态添加进去的,bind绑定事件在新元素上是没有效果的
不适用于未来元素 / 新增元素
on(“事件名”,function(){})
注:官方推荐的事件绑定的方式,也是项目中用的最多的方式
不适用于未来元素 / 新增元素
(2)、绑定多个事件
一个jquery对象可以绑定多个事件,对应一个函数 jquery对象.bind(“事件名1 事件名2 ...”,function(){})
还可以绑定多个事件各个事件各对应一个方法
jquery对象.bind({“事件名1”:function(){},"事件名2":function(){},...})
on({“事件名1”:function(){},"事件名2":function(){},...}) 适用于未来元素 / 新增元素
代码案例:
<body><button>hello</button><script>$(function(){//$("button").click(function(){//alert("hello world");//});//$("button").click(function(){//alert("hello world2");//});$("button").bind("click mouseover",function(){alert("hello world");});$("button").bind({"mouseover":function(){alert("hello world");},"mouseout":function(){alert("你好世界");}});});</script></body>
(3)、一次性绑定事件 —— on 官方推荐
on(“事件名”,function(){})
代码案例:
<body><button>点击</button><div></div></body><script type="text/javascript">$(function(){var i=0;//$("button").on("click",function(){//i++;//$("div").html(i);//});//jquery对象.one("事件名",function(){}) 一次性事件$("button").one("click",function(){i++;$("div").html(i);});});</script>
(4)、live && die
live方法:可以对动态新增的元素添加绑定事件,解决了bind()不能给动态新增元素绑定事件的问题
注意:新版本中已经删除了live()绑定事件,通常使用delegate(...)、on(...)进行替代
适用于未来元素 / 新增元素 ,测试时请使用jquery1.9以下版本
例如:$("button").live("click",function(){
$("p").toggle(500);
})
die方法:解除指定元素上的所有事件
注意:die方法不再建议使用,旧版本替换可以使用$(selector).off()函数进行解除
(5)、解除绑定 / 事件移除 —— unbind、off
unbind("事件名") 可以解除多个事件
off("事件名") 官方推荐的解除事件绑定的方式,项目中用的最多的解除方式
注:解除绑定事件 jquery对象.unbind(参数) 参数是可选的,如果里面没有参数的时候 解除jquery对象上所有的事件绑定
如果有参数, 代表可以指定去解除单个或多个事件
代码案例:
<body><button>按钮</button><script type="text/javascript">$(function(){$("button").bind("click mouseover mouseout",function(){alert("hello world");});//$("button").unbind("click mouseover"); //只有在鼠标离开按钮时出现hello world,鼠标点击和鼠标放上去均无效//$("button").unbind(); //解除所有事件$("button").off("click mouseover"); //和$("button").unbind("click mouseover")实现效果一样});</script></body>
4、事件合成
JQuery有两个合成事件:hover()方法和toggle()方法
hover(enter,leave)
jquery对象.hover(函数1,函数2) 鼠标放上去时 调用函数1 鼠标离开时 调用函数2
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.
toggle(fn1,fn2,…fnN)
模拟光标连续点击事件.第一次单击元素触发fn1,第二次点击时触发fn2,依次类推.随后的单击都会重复对这几个函数的轮番调用.
jquery9版本已经删除了此种应用
代码案例:
<body><div>hello world</div></body><script type="text/javascript">$(function(){$("div").hover(function(){$(this).css("background-color","red"); //鼠标放上去显示红色背景},function(){$(this).css("background-color",""); //鼠标离开时没有背景});$("div").toggle(function(){ //点击三次hello world时依次显示红色、蓝色、绿色$(this).css("background-color","red");},function(){$(this).css("background-color","blue");},function(){$(this).css("background-color","green");});})</script>
5、事件冒泡 && 默认行为
(1)、阻止事件冒泡的方法:
在绑定的事件中加入event参数,并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡,也可以使用return false阻止冒泡
案例代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#parent{width:400px;height:400px;background:red}#child{width:200px;height:200px;background:yellow}</style><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="parent"><div id="child"></div></div></body><script type="text/javascript">$(function(){$("#parent").click(function(e){alert("hello,parent被点击");});$("#child").click(function(ev){alert("hi,child被点击");ev.stopPropagation(); //阻止冒泡 ,点击child时,只会显示“hi,child被点击”})});</script></html>
(2)、阻止事件默认行为:
event中还有一个方法:event.preventDefault();作用是阻止默认行为,如表单提交!
代码案例:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>阻止默认行为</title><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><a href="#">我是超链接</a><div>我是超链接</div></body><script type="text/javascript">$(function(){ //第一种//$("a").click(function(e){//e.preventDefault();//});$("a").on("click",function(e){ //第二种e.preventDefault();});});</script></html>6、模拟操作 —— trigger()
(1)、模拟操作可以使用trigger()方法来完成
例如:$("#box").click(function(){
$("#btn").trigger("click"); //模拟操作触发的#btn的click事件
})
代码案例:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><button>点击我,有惊喜</button><input type="text" /><div>hello,需要点击我模拟</div><script type="text/javascript">$(function(){$("button").click(function(){alert("果然有惊喜"); //2.点击button,再次弹出“果然有惊喜”});$("button").trigger("click"); //1.开始弹出“果然有惊喜”$("div").click(function(){$("button").trigger("click"); //3.点击div时,弹出“果然有惊喜”})$("input").focus(function(){ //4.input边框变为红色$(this).css("border","1px solid red");});$("input").trigger("focus");$("input").triggerHandler("focus");//triggerHandler()不会触发默认行为,而只执行事件代码.});</script></body></html>
(2)、模拟操作 —— 传递数据
trigger(type,[data])方法有两个参数,第一个参数是要触发的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递
#(“#btn”).bind("click",function(event,mes,mes2){alert(mes+","+mes2);
})
$("#btn").trigger("click",["hello","world!"]);
注意:在事件绑定时的event参数是不可以省略的,但在调用时可以不指定
- jQuery——入门(四)JQuery 事件
- jQuery自学教程(四)——事件
- JQuery入门——切换事件
- jQuery入门之事件
- C#JQuery学习(四)事件
- Jquery系列(四) 事件处理
- jquery学习(四)事件处理
- jQuery —— 事件
- jQuery——事件
- jQuery——事件
- Jquery—事件event
- jQuery快速入门基础教程之jQuery操作DOM(四)
- JQuery Mobile入门——创建页面pagecreate事件
- JQuery入门——用bind方法绑定事件
- JQuery入门——用映射方式绑定不同事件
- JQuery入门——事件切换之toggle()方法
- JQuery入门——用one()方法绑定事件
- jQuery学习大总结(四)jQuery事件
- QT写helloworld
- day20<IO流>
- bat文件一键部署maven项目
- day21<IO流+&FIle递归>
- 20170928_调整数组顺序使奇数位于偶数前面
- jQuery——入门(四)JQuery 事件
- strtus2做异步判断方面的感受
- 通过python的深度学习算法包去训练计算机模仿世界名画的风格
- day22<IO流+>
- Boolean getBoolean
- 阅读源码是和大师面对面交流的机会之ArrayList数组元素的插入
- day23<File类递归练习>
- mysql中的sql预处理
- day24<多线程>