jQuery 事件机制(一)

来源:互联网 发布:系统和数据接口标准 编辑:程序博客网 时间:2024/03/29 13:59

在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Event capturing),一种是事件冒泡(Event bubble),这两种策略是相对立的,它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。事件冒泡定义为在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层。而事件捕获则与事件冒泡则恰好相反,处理事件是从对象的最外层往里传播,直到终止。W3C标注是支持两种事件处理策略的,但是却更偏向于事件冒泡,因为事件捕获Bug较多,目前IE是不支持事件捕获的,其他浏览器基本两种都支持。下面我给一个事件冒泡的例子,自己试一下就明白了,至于事件捕获就算了.....

 

事件冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript事件冒泡</title> 
<style type="text/css"> 
#box {width:200px; height:100px; border:2px solid red} 
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:red; cursor:move} 
#box h5 a {text-decoration:none; color:#FFF} 
#box div{ white-space:inherit;}
</style> 
</head> 
<body> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onmousedown="closeBox();" href="javascript:void(0);">关闭</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript">
    function startDrag() {
        document.getElementById('testInfo').innerHTML += '层事件';
    }
    function closeBox(e) {
        document.getElementById('testInfo').innerHTML += '关闭事件';
        //将下面一段注释去掉则可以阻止冒泡
//        if (e && e.stopPropagation)
//            e.stopPropagation();
//        else
//            window.event.cancelBubble = true;
    }
</script> 
</body> 
</html>

  那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默认行为和时间冒泡)。

  事件处理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])这几个方法。

  1、bind(type,[data],fn)用于为指定元素绑定指定的事件处理函数,[data]代表可选的传递的参数,它的写法为:

代码

        //带参数的绑定方式
        $("#text").bind('click', { result: "yes" }, function(event) {
            alert(event.data.result);
        })
        //不带参数并且阻止冒泡
        $("#text").bind('click', function(e) {
            //自定义处理行为
            e.stopPropagation();
        })

  其实bind(type,[data],fn)这种绑定事件的方式我们还有一种简写的方式,但是他们的区别在于简写方式不能如bind一样指定参数[data],他的写法就是直接将bind中type参数执行,如下:

 $("#text").click(function(e) {
      //自定义处理行为
     alert("简写方式");
 })

  2、bind(map)就是一次性为元素绑定多个事件处理函数,写法如下:

代码


        $('#text').bind({
            click: function() {
                alert("bind(map)绑定的click事件");
            },
            mouseenter: function() {
                alert("bind(map)绑定的mouseenter事件");
            }
        });

  3、one(type,[data],fn)指定事件只执行一次,写法与bind()方法一样,在此就不做示范。

  4、trigger(type,[data])、triggerHandler(type,[data])其实作用是一样的,都是在每一个匹配的元素上触发某类事件,唯一的区别就是前者是执行事件冒泡事件的,而后者只执行指定元素的事件。下面做个比较:

代码

//HTML代码:
<button id="trigger">trigger()</button>
<button id="triggerHandler">triggerHandler()</button><br/><br/>
<div id="triggerdiv">
    <div id="tri"></div>
</div>
//JQuery代码
       $("#triggerdiv").click(function() {
            alert("DIV触发");
        });
        $("#trigger").click(function() {
            $("#tri").trigger("click");
        });
        $("#triggerHandler").click(function() {
            $("#tri").triggerHandler("click");
        });
        $("#tri").click(function() {
            alert("子集DIV触发");
        });

  5、unbind([type],[data])就再简单不过了,删除指定元素的绑定事件,如果指定type参数则删除指定的事件,如果没有指定则删除该指定元素的所有事件。

  在这些事情机制中我最常用到的还是bind方法,再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的,关键看业务需求而定

 

 

 

 

 

jQuery选择器总结

 

view sourceprint?

001

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 

002

  

003

$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 

004

$("div")           选择所有的div标签元素,返回div元素数组 

005

$(".myClass")      选择使用myClass类的css的所有元素 

006

$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 

007

  

008

层叠选择器: 

009

$("form input")         选择所有的form元素中的input元素 

010

$("#main > *")          选择id值为main的所有的子元素 

011

$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 

012

$("#prev ~ div")       同胞选择器,该选择器返回的为idprev的标签元素的所有的属于同一个父元素的div标签 

013

  

014

基本过滤选择器: 

015

$("tr:first")               选择所有tr元素的第一个 

016

$("tr:last")                选择所有tr元素的最后一个 

017

$("input:not(:checked) + span")   

018

  

019

过滤掉:checked的选择器的所有的input元素 

020

  

021

$("tr:even")               选择所有的tr元素的第024... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 

022

  

023

$("tr:odd")                选择所有的tr元素的第135... ...个元素 

024

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 

025

$("td:gt(4)")             选择td元素中序号大于4的所有td元素 

026

$("td:ll(4)")              选择td元素中序号小于4的所有的td元素 

027

$(":header") 

028

$("div:animated") 

029

内容过滤选择器: 

030

  

031

$("div:contains('John')") 选择所有div中含有John文本的元素 

032

$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组 

033

$("div:has(p)")        选择所有含有p标签的div元素 

034

$("td:parent")          选择所有的以td为父节点的元素数组 

035

可视化过滤选择器: 

036

  

037

$("div:hidden")        选择所有的被hiddendiv元素 

038

$("div:visible")        选择所有的可视化的div元素 

039

属性过滤选择器: 

040

  

041

$("div[id]")              选择所有含有id属性的div元素 

042

$("input[name='newsletter']")    选择所有的name属性等于'newsletter'input元素 

043

  

044

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'input元素 

045

  

046

$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 

047

$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 

048

$("input[name*='man']")          选择所有的name属性包含'news'input元素 

049

  

050

$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 

051

  

052

子元素过滤选择器: 

053

  

054

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 

055

  

056

$("div span:first-child")          返回所有的div元素的第一个子节点的数组 

057

$("div span:last-child")           返回所有的div元素的最后一个节点的数组 

058

$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组 

059

  

060

表单元素选择器: 

061

  

062

$(":input")                  选择所有的表单输入元素,包括input, textarea, select  button 

063

  

064

$(":text")                     选择所有的text input元素 

065

$(":password")           选择所有的password input元素 

066

$(":radio")                   选择所有的radio input元素 

067

$(":checkbox")            选择所有的checkbox input元素 

068

$(":submit")               选择所有的submit input元素 

069

$(":image")                 选择所有的image input元素 

070

$(":reset")                   选择所有的reset input元素 

071

$(":button")                选择所有的button input元素 

072

$(":file")                     选择所有的file input元素 

073

$(":hidden")               选择所有类型为hiddeninput元素或表单的隐藏域 

074

  

075

表单元素过滤选择器: 

076

  

077

$(":enabled")             选择所有的可操作的表单元素 

078

$(":disabled")            选择所有的不可操作的表单元素 

079

$(":checked")            选择所有的被checked的表单元素 

080

$("select option:selected") 选择所有的select 的子元素中被selected的元素 

081

  

082

   

083

  

084

选取一个 name ”S_03_22″input text框的上一个tdtext

085

$(”input[@ name =S_03_22]“).parent().prev().text() 

086

  

087

名字以”S_”开始,并且不是以”_R”结尾的

088

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 

089

  

090

一个名为 radio_01radio所选的值

091

$(”input[@ name =radio_01][@checked]“).val(); 

092

  

093

   

094

  

095

   

096

  

097

$("A B") 查找A元素下面的所有子节点,包括非直接子节点

098

$("A>B") 查找A元素下面的直接子节点

099

$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点

100

$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 

101

  

102

1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 

103

  

104

例子:找到表单中所有的 input 元素 

105

  

106

HTML 代码

107

  

108

<form>

109

<label>Name:</label>

110

<input name="name" />

111

<fieldset>

112

      <label>Newsletter:</label>

113

      <input name="newsletter" />

114

</fieldset>

115

</form>

116

<input name="none" /> 

117

jQuery 代码

118

  

119

$("form input") 

120

结果

121

  

122

[ <input name="name" />, <input name="newsletter" /> ] 

123

  

124

2. $("A>B") 查找A元素下面的直接子节点 

125

例子:匹配表单中所有的子级input元素。 

126

  

127

HTML 代码

128

  

129

<form>

130

<label>Name:</label>

131

<input name="name" />

132

<fieldset>

133

      <label>Newsletter:</label>

134

      <input name="newsletter" />

135

</fieldset>

136

</form>

137

<input name="none" /> 

138

jQuery 代码

139

  

140

$("form > input") 

141

结果

142

  

143

[ <input name="name" /> ] 

144

  

145

3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 

146

例子:匹配所有跟在 label 后面的 input 元素 

147

  

148

HTML 代码

149

  

150

<form>

151

<label>Name:</label>

152

<input name="name" />

153

<fieldset>

154

      <label>Newsletter:</label>

155

      <input name="newsletter" />

156

</fieldset>

157

</form>

158

<input name="none" /> 

159

jQuery 代码

160

  

161

$("label + input") 

162

结果

163

  

164

[ <input name="name" />, <input name="newsletter" /> ] 

165

  

166

  

167

4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 

168

例子:找到所有与表单同辈的 input 元素 

169

  

170

HTML 代码

171

  

172

<form>

173

<label>Name:</label>

174

<input name="name" />

175

<fieldset>

176

      <label>Newsletter:</label>

177

      <input name="newsletter" />

178

</fieldset>

179

</form>

180

<input name="none" /> 

181

jQuery 代码

182

  

183

$("form ~ input") 

184

结果

185

  

186

[ <input name="none" /> ]


原创粉丝点击