分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

jquery-事件

发布时间:2023-09-06 01:15责任编辑:熊小新关键词:暂无标签

 一:jquery事件绑定有4种 方法

方法1:直接绑定事件,如

 ???????????????$(‘.c1‘).click() ???????????????????$(‘.c1‘).....

方法2:通过bind方法

  bind(“事件名”,“方法”) 绑定事件

  unbind(“事件名”,“方法”) 去除绑定事件

 ???????????????????$(‘.c1‘).bind(‘click‘,function(){ ???????????????????????????????????????????}) ???????????????????????????????????????$(‘.c1‘).unbind(‘click‘,function(){ ???????????????????????????????????????????})

方法3:通过on方法

  on(“事件名”,“方法”) 绑定事件

  off(“事件名”,“方法”) 去除绑定事件

$(‘.c1‘).on(‘click‘, function(){})$(‘.c1‘).off(‘click‘, function(){})

方法4:delegate方法

  delegate("标签",“事件名”,“方法”) 绑定事件

  undelegate(“标签”,“事件名”,“方法”) 去除绑定事件

 ???????????????????$(‘.c‘).delegate(‘a‘, ‘click‘, function(){ ???????????????????????????????????????}) ???????????????????$(‘.c‘).undelegate(‘a‘, ‘click‘, function(){ ???????????????????????????????????????})

上面3种方法都差不多,但是对于增加内容,比如表格数据后面跟有操作,比如编辑等。

原的表格在编译的时候已绑定了事件,但是新增加的表格数据,并没有绑定事件,用上面的方法都不行,

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

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

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<input id="t1" type="text" /> ???<input id="a1" type="button" value="添加" /> ???<ul id="u1"> ???????<li>1</li> ???????<li>2</li> ???</ul><script src="jquery-1.12.4.js"></script> ???<script> ???????$(‘#a1‘).click(function () { ???????????var v = $(‘#t1‘).val(); ???????????var temp = "<li>" + v + "</li>"; ???????????$(‘#u1‘).append(temp); ???????});// ???????$(‘ul li‘).click(function () {// ???????????var v = $(this).text();// ???????????alert(v);// ???????})// ???????$(‘ul li‘).bind(‘click‘,function () {// ???????????var v = $(this).text();// ???????????alert(v);// ???????})// ???????$(‘ul li‘).on(‘click‘, function () {// ???????????var v = $(this).text();// ???????????alert(v);// ???????}) ???????$(‘ul‘).delegate(‘li‘,‘click‘,function () { ???????????var v = $(this).text(); ???????????alert(v); ???????}) ???</script></body></html>

二:事件列表

  • 事件切换

    • hover([over,]out)
    • toggle([spe],[eas],[fn])1.9*
  • 事件

    • blur([[data],fn])
    • change([[data],fn])
    • click([[data],fn])
    • dblclick([[data],fn])
    • error([[data],fn])
    • focus([[data],fn])
    • focusin([data],fn)
    • focusout([data],fn)
    • keydown([[data],fn])
    • keypress([[data],fn])
    • keyup([[data],fn])
    • mousedown([[data],fn])
    • mouseenter([[data],fn])
    • mouseleave([[data],fn])
    • mousemove([[data],fn])
    • mouseout([[data],fn])
    • mouseover([[data],fn])
    • mouseup([[data],fn])
    • resize([[data],fn])
    • scroll([[data],fn])
    • select([[data],fn])
    • submit([[data],fn])
    • unload([[data],fn])

三:阻止默认事件发生

  1)标签a等默认有跳转事件。如果给a标签在绑定个事件,谁会先执行?

    是绑定的事件先执行,默认的后执行。

  2)如何阻止默认事件执行?

    在给绑定的事件前加return ;如果return返回的是true继续执行默认事件,如果是false则不执行。如下例子

  

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<a onclick="return ClickOn()" ?href="http://www.oldboyedu.com">走你1</a> ???<a id="i1" href="http://www.oldboyedu.com">走你2</a> ???<script src="jquery-1.12.4.js"></script> ???<script> ???????function ClickOn() { ???????????alert(123); ???????????return true; ???????} ???????$(‘#i1‘).click(function () { ???????????alert(456); ???????????return false; ???????}) ???</script></body></html>

jquery-事件

原文地址:http://www.cnblogs.com/lixiang1013/p/7632590.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved