在 HTML 和 jQuery 中，on 方法是一个非常强大和灵活的事件处理方法，例如点击事件、鼠标悬停事件、键盘按下事件等。用于在元素上绑定一个或多个事件处理函数。本文将详细介绍 jQuery on 方法的语法、案例以及注意事项。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
events
类型: String
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
类型: String
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
data
类型: Anything
当一个事件被触发时，要传递给事件处理函数的event.data。
handler(eventObject)
类型: Function()
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。
events
类型: PlainObject
一个对象，键是由一个或多个由空格分隔的事件类型及可选的名字空间，值是这些事件类型所对应的事件处理函数。
selector
类型: String
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
data
类型: Anything
当一个事件被触发时，要传递给事件处理函数的event.data。
使用 on 方法绑定点击事件
<button id="myButton">点击我</button>
<script>
$('#myButton').on('click', function() {
alert('按钮已点击!');
});
</script><form>
<input type="text" id="myInput" value="请输入内容">
<button type="submit" id="myButton">提交</button>
</form>
<script>
$("form").on("submit", false);
</script><form>
<input type="text" id="myInput" value="请输入内容">
<button type="submit" id="myButton">提交</button>
</form>
<script>
$("form").on("submit", function(event) {
event.stopPropagation();
});
</script>使用 on 方法委托事件处理程序
<button id="myButton">点击我</button>
<script>
$(document).on('click', '#myButton',{foo: "bar"}, function(event) {
alert(event.data.foo);
});
</script>使用 on 方法绑定多个事件
<script>
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:150%;
color:red;
}
</style>
<body>
<p>将鼠标移动到这里，再将鼠标移出这里</p>
</body><script>
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName, myValue){
$(this).text(myValue + "!的全名是!" + showName).show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["李明","小明"]);
});
});
</script>
<body>
<button>按钮</button>
<p>点击此按钮触发事件</p>
</body>注意，.on() 会为任何段落添加事件，包括新生成的段落，因为当事件冒泡到已经存在的 body 元素上时，就会触发绑定的事件。
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<body>
<p>点击我!</p>
<span></span>
<script>
var count = 0;
$("body").on("click", "p", function(){
$(this).after("<p>新的段落! "+(++count)+"</p>");
});
</script>
</body><a href="http://www.xuandaima.com">炫代码</a>
<script>
$("body").on("click", "a", function(event){
event.preventDefault();
});
</script>在使用 jQuery on 方法时，需要注意以下几点：
1. 事件处理函数：on 方法的事件处理函数可以是一个函数表达式，也可以是一个函数名。如果是一个函数表达式，需要注意函数的作用域和 this 的指向。
2. 事件冒泡：当一个元素上发生事件时，该事件会向上冒泡到其祖先元素上。如果不希望事件冒泡到祖先元素上，可以使用 `event.stopPropagation()` 方法来阻止事件冒泡。
3. 解绑事件：如果不再需要某个元素上的事件处理函数，可以使用 `off()` 方法来解绑事件。例如，`$("#myButton").off("click")` 将会解绑按钮元素上的点击事件。要绑定一个事件，并且只运行一次，然后删除自己， 请参阅.one()。
4. 事件名称和命名空间：事件名称可以添加指定的event namespaces（命名空间） 来简化删除或触发事件。例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用.off("click.myPlugin") 或 .off("click.simple")删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。
5. 直接和委托的事件：
如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的。
当提供selector参数时，事件处理程序是指为委派 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。
6. 将数据传递到处理程序：
如果data参数给.on()并且不是null 或者 undefined，那么每次触发事件时，event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。
总之，jQuery on 方法是一个非常强大和灵活的事件处理方法，它可以大大简化 JavaScript 中的事件处理代码。在使用 on 方法时，需要注意事件类型、事件处理函数、事件冒泡、解绑事件以及兼容性等问题，以确保代码的正确性和稳定性。
