<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
</head>
<style>
p.mimi {color: red;}
span.mimi {color: blue;}
.kaka {
color: #000;
padding: .5em;
border: 1px solid #444;
}
.active {
color: #900;
}
.inside {
background-color: aqua;
}
</style>
<body>
<table id="dataTable" border="1">
<tbody >
<tr>
<td>啦啦</td>
<td>呵呵</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<hr />
<button class="lol">点我试试</button><br />
<button class="lol">有种再点一次</button>
<hr />
<p id="test">test</p><br />
<hr />
<p id="myfh">myfh</p><br />
<hr />
<p class="mimi">Has an attached custom event.</p>
<button class="mimi">Trigger custom event</button>
<span class="mimi" style="display:none;"></span>
<hr />
<div class="kaka">test div</div>
<script type="text/javascript">
/**
* .on(events[,selector][,data],handler(eventObject)) 返回jQuery
* 描述：在选定的元素上绑定一个或多个事件处理函数
*
* events 类型：String
* 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，
* 如"click""keydown.myPlugin"或者".myPlugin"
*
* selector 类型：String
* 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果
* 选择器是null，或者忽略了该选择器，那么被选中的元素总是能触发事件
*
* data
* 类型：Anything
* 当一个事件被触发时，要传递给事件处理函数的event.data
*
*
* handler(eventObject)
* 类型：Function()
* 事件被触发时，执行的函数，若该函数只是要执行return false的话，
* 那么该参数位置可以直接简写成false
*
*
* .on()方法事件处理程序当前选定的jQuery对象中的元素，在jQuery1.7中，on()
* 方法提供绑定事件处理的所有功能，为了帮助从旧的jQuery事件方法转换过来，查看 .bind(), .delegate(), 和 .live().
*
* 要删除.on()绑定的事件，请参阅.off();要绑定一个事件，并且只运行一次，然后删除自己， 请参阅.one()
*
*
* */
/**
* Event names and namespaces(事件名称和命名空间)
* 任何事件的名称，可以作为events的参数，
* 事件名称可以添加指定的events namespaces（命名空间）来简化
* 删除或触发事件。
* 例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间
* myPlugin 和 simple。通过上述方法绑定的 click 事件处理，
* 可以用.off("click.myPlugin") 或 .off("click.simple")
* 删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在
* 该元素上的“click（点击）” 事件。命名空间类似CSS类，因为它们
* 是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字
* 空间是供 jQuery 使用的。
*
* 在.on()方法的第二种用法中，events参数是一个JavaScript对象或者
* 键值对。键等同于events参数，用空格分隔的事件名称字符串和可选
* 命名空间。每个键的值是一个函数（或false的值），相当于handler参数，
* 但是该值并不是方法中的最后一个参数。
*
* */
/**
* Direct and delegated events(直接和委托的事件)
*
* 事件处理只能被绑定在当前被选中的元素上，而且，在代码调用.on()
* 的时候，他们必须已经存在。为了确保目前的元素可以被选择（即，存在），
* 最好将脚本放在元素的HTML标记后面或者在document的ready事件中进行
* 事件绑定，或者，使用委派事件绑定事件处理程序。
*
* 委托事件
* 委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件，
* 在确保所选的元素已经存在的情况下，进行事件绑定时，可以使用委派事件，
* 以避免频繁的绑定事件及解除绑定事件。
*
* 除了可以给未创建的后代元素绑定事件外（即上面提到的优势），
* 代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。
* 例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
*
* */
//注意: 委托事件不能用于SVG.
//例子一
$("#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
/**
* The event handler and its environment(事件处理程序和它的环境)
* handler参数必须是一个函数（或flase），除非你传递一个对象给events参数。
*
* !!! 当浏览器触发一个事件，或者其他JavaScript调用jQuery的.trigger()方法，
* jQuery传递一个Event对象给这个处理程序，他可以用来分析和改变事件的状态。
*
* */
/**
* 默认情况下，大多数事件的冒泡从最初的event target（目标元素）开始的，直到
* document元素。每个元素都沿着DOM层级这条路，jQuery会调用任何匹配的已经被绑定
* 的事件处理程序。一个处理程序可以调用event.stopPropogation()防止事件向上冒泡
* 文档树（从而防止这些元素的处理程序运行）。任何绑定到当前元素上的其他处理程序
* 都将运行，为了防止这种情况，可以调用event.stopImmediatePropogation()。（绑定
* 在元素上的事件被调用的顺序和它们被绑定的顺序是一致的）
*
* 类似地，一个处理程序可以调用的event.preventDefault()取消浏览器默认操作行为;
* 例如，一个链接上有一个 默认的click事件。并非所有的浏览器事件的默认操作，并非
* 所有的默认操作可以被取消。有关详细信息，请参阅W3C Events Specification
* 调用event.stopPropagation() 和 event.preventDefault()会从一个事件处理程
* 序会自动返回false。也可以直接将 false 当作 handler 的参数，作为 function()
* { return false; } 的简写形式。因此，下面的写法 $("a.disabled").on("click",
false); 将会阻止所有含有 "disabled" 样式的链接的默认行为，并阻止该事件上的
冒泡行为。
当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。
* 对于直接事件而言，this代表绑定事件的元素。对于代理事件而言，this则代表了
* 与selector相匹配的元素(注意，如果事件是从后代元素冒泡上来的话，那么 this
* 就有可能不等于 event.target。)若要使用 jQuery 的相关方法，可以根据当前
* 元素创建一个 jQuery 对象，即使用 $(this)。
* */
/**
* Passing data to the handler(将数据传递到处理程序)
* 如果data参数给.on()而不是null或者undefined，那么每次触发事件时，
* event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串
* 类型时，那么selector参数必须提供，或明确的传递null，这样的data参数
* 不会误认为是选择器。最好是使用一个对象（键值对），所以可以作为属性
* 传递多个值。
*
*
* */
function greet(event){
document.write("Hello " + event.data.name + "<br />");
}
$("button.lol").on("click",{name:"Jack"},greet);//Hello Jack Hello Bob
$("button.lol").on("click",{name:"Bob"},greet);//Hello Jack Hello Bob
/**
* event performance （事件性能）
* 许多委派的事件处理程序绑定到 document 树的顶层附近，可以降低性能。
* 每次发生事件时，jQuery 需要比较从 event target（目标元素） 开始到
* 文档顶部的路径中每一个元素上所有该类型的事件。为了获得更好的性能，
* 在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，
* 过多的在 document 或 document.body 上添加代理事件。
jQuery可以非常迅速处理tag#id.class形式的简单选择器，当它们是用来过滤委派事件。所以
"#myForm", "a.external", 和 "button" 都是快速选择器。若代理事件的选择器使用了过于
复杂的形式，特别是使用了分层选择器的情况，虽然说这样做会大大的降低性能，但是对于大多数
应用而言，它的速度依然是足够快的。通过为寻找更合适的元素绑定事件的方法，就可以很简单的
避免使用分层选择器的情况。例如，使用$("#commentForm").on("click", ".addNew", addComment)
而不是$("body").on("click", "#commentForm .addNew", addComment)。
*
*
* */
/**
* Additional notes（其他注意事项）
*
* */
var $test = $("#test");
function handler01(){
console.log("handler01");
$test.off("click",handler02);
}
function handler02(){
console.log("handler02");
}
$test.on("click",handler01);
$test.on("click",handler02);
/**
* 在上面的代码，handler2第一次无路如何都会被执行，即使使用.off()删除。
* 然而，该处理函数在下一次click事件被触发时将不执行。*/
//传入数据测试
function fh(e){
console.log(e.data.foo);
}
$("#myfh").on("click",{foo:"fish"},fh);//fish
//取消表单的提交动作，通过返回 false 的方法来防止事件冒泡：
$("submit").on("click",false);
//Example: 添加并触发自定义事件（非浏览器事件）。
$("p.mimi").on("myCustomEvent",function(eve,myName){
$(this).text(myName + ",hi here!");
$("span.mimi")
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$("button.mimi").click(function(){
$("p.mimi").trigger("myCustomEvent",["John"]);
});
//使用 对象 同时添加多个事件处理函数。
$("div.kaka").on({
"click":function(){
$(this).toggleClass("active");
},
"mouseenter":function(){
$(this).addClass("inside");
},
"mouseleave":function(){
$(this).removeClass("inside");
}
});
</script>
</body>
</html>
04-16
661
661
05-12
1843
1843
08-06
252
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
