700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 按钮点击事件的实现方式---JQuery

按钮点击事件的实现方式---JQuery

时间:2019-03-18 16:46:35

相关推荐

按钮点击事件的实现方式---JQuery

之前上一篇文章当中,我们了解的原生javascript对于按钮点击的几种实现方式,现在我们来看下Jquery来实现 这些事件的实现方式。

方法一:

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title><script src="js/jquery-3.1.1.min.js"></script><script>window.onload = function(){$("#button").click(function(){alert("你点击了按钮哦!");});}</script></head><body><input id="button" type="button" value="点击" ></body></html>

方法二:

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title><script src="js/jquery-3.1.1.min.js"></script><script>window.onload = function(){$("#button").on("click",function(){alert("你点击了按钮哦!");});}</script></head><body><input id="button" type="button" value="点击" ></body></html>

方法三:

bind(type,[data],function(eventObject))

bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:

type:事件类型,如click、change、mouseover等;

data:传入监听函数的参数,通过event.data取到。可选;

function:监听函数,可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title><script src="js/jquery-3.1.1.min.js"></script><script>window.onload = function(){$("#button").bind("click",function(){alert("你点击了按钮哦!");});}</script></head><body><input id="button" type="button" value="点击" ></body></html>

扩展:

unbind() 方法移除被选元素的事件处理程序。

方法四:

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title><script src="js/jquery-3.1.1.min.js"></script><script>window.onload = function(){$("#button").live("click",function(){alert("你点击了按钮哦!");});}</script></head><body><input id="button" type="button" value="点击" ><script></script></body></html>

不过这个方法在高版本的Jquery中移除了。

方法五:

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title><script src="js/jquery-3.1.1.min.js"></script><script>$(document).ready(function(){$("div").delegate("input","click",function(){alert("你点击了按钮哦!");});});</script></head><body><div style="background-color:red"><input id="button" type="button" value="点击" ></div></body></html>

在下篇文章中,我将介绍一下一些事件类型。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。