js常用事件总结

原创 2015年11月18日 18:37:19

一.live(),click(),delegate(),bind(),change(),.on详解

参考:http://www.w3school.com.cn/jquery/jquery_ref_events.asp

1.live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

语法:$(selector).bind(event,data,function),如果将live改成bind,未来添加的元素不具备该效果

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").live("click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
</body>
</html>

2.bind()规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

3.delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

语法:$(selector).delegate(childSelector,event,data,function)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>



二.href="#",href="javascript:;",href="javascript:void(0)"

版权声明:本文为博主原创文章,未经博主允许不得转载。

js中常用的一些事件总结

常用的一些事件总结

js常用事件整合

  • 2013年11月24日 12:50
  • 59KB
  • 下载

原始JS选择器使用方法和常用事件手册

 常用的无返回值事件 属性 描述 onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 ...

JS(五)DOM模型之常用事件

一、事件 1.使用onclick属性设置点击事件 2.js dom分配事件 3.鼠标事件 4.焦点事件 5.内容改变事件 二、示例 1.属性点击事件和dom分配点击事件 ...

JS ONCLICK常用事件

JS ONCLICK常用事件 1.    打开 name=Button1>        2.    另存为 name=Button2>         3.    属性 nam...

移动web开发,12个触摸及多点触摸事件常用Js插件

QUO JS 支持事件:Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe ...

使用js中常用的鼠标事件实现一个拖拽的例子

一、js中常用的几个必备鼠标事件 onclick: 元素上发生鼠标点击时触发. ondblclick: 元素上发生鼠标双击时触发. onmousedown: 当元素上按下鼠标按钮时触发. onmous...

移动web开发,12个触摸及多点触摸事件常用Js插件

如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台。与桌面开发不同的是,在移动领域中,不同的操作系统、大量不同屏幕尺寸的移动设备、触摸手势操作等,这都给开发者带来了一定的难度和挑...

移动web开发,12个触摸及多点触摸事件常用Js插件

http://www.ldisp.com/a/javascript/2014/2801.shtml 虽然一些触摸事件,自己写起来也比较简单,但为了尽量不重复的造轮子,提高开发效率。这里收...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js常用事件总结
举报原因:
原因补充:

(最多只允许输入30个字)