jQuery绑定事件on方法
JQUERY常用方法大全
JQUERY常用方法大全JQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX交互等操作。
下面是JQuery中常用的一些方法：1.选择器方法：- `$(this)`：选择当前元素。
- `$(document)`：选择整个文档。
- `$(window)`：选择浏览器窗口。
2.事件方法：- `$(selector).click(function)`：给元素绑定点击事件。
- `$(selector).dblclick(function)`：给元素绑定双击事件。
- `$(selector).mouseenter(function)`：给元素绑定鼠标进入事件。
- `$(selector).mouseleave(function)`：给元素绑定鼠标离开事件。
- `$(selector).keydown(function)`：给元素绑定键盘按下事件。
- `$(selector).keyup(function)`：给元素绑定键盘松开事件。
3.DOM操作方法：- `$(selector).html(content)`：设置元素的HTML内容。
- `$(selector).text(content)`：设置元素的文本内容。
- `$(selector).val(value)`：设置或获取输入框的值。
- `$(selector).append(content)`：在元素内部的结尾插入内容。
- `$(selector).prepend(content)`：在元素内部的开头插入内容。
- `$(selector).after(content)`：在元素的后面插入内容。
- `$(selector).before(content)`：在元素的前面插入内容。
- `$(selector).remove(`：删除元素。
4.属性和样式方法：- `$(selector).attr(attributeName)`：获取元素的属性值。
JQuery调用绑定click事件的3种写法
JQuery调⽤绑定click事件的3种写法第⼀种⽅式：$(document).ready(function(){$("#clickme").click(function(){alert("Hello World click");});第⼆种⽅式：$('#clickmebind').bind("click", function(){alert("Hello World bind");});第三种⽅式：$('#clickmeon').on('click', function(){alert("Hello World on");});});注意：第三种⽅式只适⽤于jquery 1.7以上的版本源码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World click");});$('#clickmebind').bind("click", function(){alert("Hello World bind");});$('#clickmeon').on('click', function(){alert("Hello World on");});});</script><body><label></label><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label><label><input type="button" name="clickmebind" id="clickmebind" value="clickme_bind" /> </label><label><input type="button" name="clickmeon" id="clickmeon" value="clickme_on" /></label></p></form></body></html>。
jquery实现鼠标移入移出切换图片
jquery实现⿏标移⼊移出切换图⽚
在jquery中，可以使⽤mouseover和mouseout事件来实现⿏标移⼊移出图⽚时，改变图⽚的地址，从⽽实现图⽚的切换。
下⾯举例讲解jquery实现⿏标移⼊移出切换图⽚。
1.新建⼀个html⽂件，命名为test.html，⽤于讲解jquery实现⿏标移⼊移出切换图⽚。
2.在test.html⽂件内，使⽤img标签创建⼀张图⽚，⽤于测试。
3.在test.html⽂件内，设置img标签的id为myimg，⽤于下⾯获得img对象。
4.在js标签中，使⽤ready()⽅法在页⾯加载完成时，执⾏function⽅法，在function⽅法内，通过id获得img对象，使⽤on()⽅法给图⽚绑定事件。
5.在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。
查看效果：
总结
1.使⽤img标签创建⼀张图⽚，⽤于测试。
2.在js中，使⽤on()⽅法给图⽚绑定事件，在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。
onchange的用法 -回复
onchange的用法-回复onchange的用法是在网页中的表单元素（如文本框、下拉菜单等）发生改变时触发的JavaScript事件。
它提供了一种简单而有效的方式来检测用户的输入并做出相应的操作。
本文将详细介绍onchange的使用方法，包括如何添加onchange事件，常见的应用场景和注意事项等。
一、添加onchange事件要使用onchange事件，首先需要找到需要添加该事件的表单元素。
这可以通过HTML的id属性或JavaScript的getElementById()方法来实现。
例如，我们有一个文本框的id属性设置为"inputBox"，我们可以通过以下方式来添加onchange事件：javascriptdocument.getElementById("inputBox").onchange = function() { 在此处编写当文本框内容发生改变时的操作}这样，当文本框的内容发生改变时，定义的匿名函数就会被触发执行。
另一种添加onchange事件的方式是直接在HTML代码中使用onchange属性。
例如：html<input type="text" id="inputBox" onchange="myFunction()">这样，当文本框的内容发生改变时，名为myFunction的函数就会被调用。
二、常见的应用场景onchange事件通常用于以下几种常见的场景：1. 表单验证：当用户在表单中输入内容并离开输入框时，可以使用onchange事件来验证输入的有效性，例如检查邮箱格式、密码强度等。
2. 动态更新：当下拉菜单的选项改变时，可以使用onchange事件动态更新页面的内容，例如根据选择的地区加载不同的数据。
3. 实时搜索：比如在搜索框中输入关键字时，可以使用onchange事件来触发实时搜索，动态显示匹配的结果。
js触发onchange事件的方法说明
js触发onchange事件的方法说明JavaScript中可以通过不同的方式来触发onchange事件，下面将详细介绍几种常见的方法。
1. 用户交互触发：最常见的情况是用户在HTML表单元素上进行交互，例如输入框中的文本发生变化、下拉列表选项发生改变等，都会触发onchange事件。
2. 通过JavaScript代码触发：可以使用几种方式通过JavaScript代码来触发onchange事件。
例如，可以通过直接调用元素的onchange方法来触发事件，如`element.onchange(`。
3. 使用addEventListener方法：addEventListener是一个常用的方法，可以用来给元素添加事件监听器。
通过传递"change"作为事件类型，可以实现触发onchange事件的效果。
例如，可以使用以下代码来触发onchange事件：```element.addEventListener("change", functio//处理触发事件后的操作});```4. 使用dispatchEvent方法：dispatchEvent方法可以手动触发一些元素上的指定事件。
可以通过创建一个Event对象，并使用dispatchEvent方法来触发onchange事件。
例如，可以使用以下代码来触发onchange事件：```var event = new Event("change");element.dispatchEvent(event);```5. 使用fireEvent方法：对于部分浏览器，如Internet Explorer，可以使用fireEvent方法来触发事件。
其中，可以使用"onchange"作为事件名称，并将创建的事件作为参数传递给fireEvent方法。
例如，可以使用以下代码来触发onchange事件：```var event = document.createEventObject(;element.fireEvent("onchange", event);```总结：以上是几种常见的方法来触发onchange事件。
jQuery事件方法
live() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() off() on() one() $.proxy() ready() resize() scroll() select() submit() toggle() trigger() triggerHandler() unbind() undelegate() unload() contextmenu() $.holdReady()
描述 向元素添加事件处理程序 添加/触发失去焦点事件 添加/触发 change 事件 添加/触发 click 事件 添加/触发 double click 事件 向匹配元素的当前或未来的子元素添加处理程序 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 在版本 1.8 中被废弃。添加/触发 error 事件 在事件冒泡阶段内的当前 DOM 元素 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 返回当前调用的 jQuery 事件处理程序所添加的元素 返回指定的 event 对象上是否调用了 event.preventDefault() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() 返回指定的 event 对象上是否调用了 event.stopPropagation() 返回当事件被触发时指定的命名空间 返回相对于文档左边缘的鼠标位置 返回相对于文档上边缘的鼠标位置 阻止事件的默认行为 返回当鼠标移动时哪个元素进入或退出 包含由被指定事件触发的事件处理程序返回的最后一个值 阻止其他事件处理程序被调用 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知 返回哪个 DOM 元素触发事件 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 返回哪种事件类型被触发 返回指定ห้องสมุดไป่ตู้件上哪个键盘键或鼠标按钮被按下 事件触发时 META 键是否被按下 添加/触发 focus 事件 添加事件处理程序到 focusin 事件 添加事件处理程序到 focusout 事件 添加两个事件处理程序到 hover 事件 添加/触发 keydown 事件 添加/触发 keypress 事件 添加/触发 keyup 事件
JS绑定事件和移除事件的处理方法
JS绑定事件和移除事件的处理方法JavaScript是一种强大而灵活的编程语言，用于在网页中添加交互性和动态性。
在网页开发中，我们经常需要为各种事件绑定相应的处理方法，以便在特定的交互行为发生时执行相应的代码。
除了绑定事件，我们还需要在一些情况下移除已经绑定的事件，以确保页面的正常运行。
本文将详细介绍在JavaScript中如何绑定和移除事件的处理方法。
一、绑定事件处理方法在JavaScript中，可以通过以下几种方式来绑定事件处理方法：```html<button onclick="alert('按钮被点击了！')">点击按钮</button> ```这种方式非常简单直接，但由于JS代码和HTML混在一起，所以不利于代码的维护和重用。
2. 使用element.addEventListener(方法更常用的方法是使用element.addEventListener(方法，该方法可以为元素添加多个事件处理方法。
例如，下面的代码绑定了一个按钮的点击事件：```html<button id="myButton">点击按钮</button>``````javascriptvar button = document.getElementById('myButton');button.addEventListener('click', functioalert('按钮被点击了！');});```这样我们就可以在JavaScript中定义事件处理方法，而不需要将所有代码写在HTML中。
此外，使用addEventListener(方法的好处是可以为同一个元素绑定多个不同的事件处理方法，而不会互相覆盖。
3. 使用element.on[event]属性除了addEventListener(方法外，还可以直接使用元素的on[event]属性，其中[event]表示具体的事件名称，如click、mouseover等。
js绑定事件的方法
js绑定事件的方法JavaScript是一种常用的Web编程语言，是开发网页动态效果的必备工具。
在Web应用程序中，事件是非常重要的，比如按下按钮、移动鼠标、键盘输入等，都会触发一个事件。
在JavaScript中，我们可以通过绑定事件来捕获事件并进行相关操作。
在本文中，我们将介绍JavaScript中绑定事件的常用方法。
一、HTML的事件处理属性最早的JavaScript事件处理方法是在HTML标签上通过事件处理属性来定义事件处理函数。
在HTML中定义一个按钮，并为其指定一个单击事件处理函数：```html<button onclick="myFunction()">单击按钮</button><script>function myFunction() {alert("Hello World!");}</script>```在上述代码中，我们使用onclick属性为按钮定义了一个单击事件处理函数myFunction()。
当用户单击按钮时，会触发myFunction()函数并显示"Hello World!"的提示框。
虽然HTML的事件处理属性用起来十分简单明了，但是当我们需要为多个元素进行事件绑定时，代码的可维护性和可读性却会变得非常差。
我们通常不建议使用HTML的事件处理属性来处理JavaScript事件。
二、DOM 0级事件处理程序（元素级事件处理）DOM0级事件处理程序是通过JavaScript的一些方法来绑定事件的。
每个HTML元素都有一些事件属性，例如onclick、onmouseover、onmouseout等等。
我们可以通过设置这些属性为一个函数的方式来为元素绑定一个事件处理程序：在上述代码中，我们首先获取了ID为myBtn的按钮元素，然后设置它的onclick属性为一个匿名函数，当用户单击按钮时，会触发该匿名函数中的代码。
js中的onchange、onselect 使用的例子
在JavaScript中，`onchange`和`onselect`是两种常用的事件处理程序，它们分别用于处理输入元素（如文本框、下拉框等）内容改变和选择事件。
下面是一些使用`onchange`和`onselect`的例子：
**1. onchange 事件**
`onchange`事件在元素内容被改变后触发。
以下是一个简单的例子，当文本框内容改变时，会显示一个警告：
```html
<input type="text" id="myInput" onchange="alert('文本内容已
被更改！')">
```
在这个例子中，每当用户更改文本框的内容时，就会触发
`onchange`事件，并执行定义的函数（在这个例子中是显示一个警告）。
**2. onselect 事件**
`onselect`事件在文本框或输入框的内容被选中时触发。
以下是一
个简单的例子，当用户选中某段文本时，会显示选中的文本：
```html
<textarea id="myTextarea"
onselect="alert(this.value)"></textarea>
```
在这个例子中，每当用户选中文本框中的文本时，就会触发
`onselect`事件，并执行定义的函数（在这个例子中是显示选中的文本）。
请注意，这些只是基本的使用示例。
在实际开发中，您可能需要根据具体需求来编写更复杂的函数和逻辑。
JS绑定事件和移除事件的处理方法
JS绑定事件和移除事件的处理方法在Web开发中，JS绑定事件是一项基本的操作，它能使开发者能够对特定的元素或节点进行监控，并在事件触发时执行特定的操作。
JS提供了多种方式来绑定事件和移除事件，下面将详细介绍这些方法。
一、通过DOM元素属性绑定事件```html<button onclick="myFunction(">点击我</button>```以上代码中，当按钮被点击时，会调用名为"myFunction"的函数。
这种方法非常简单，但存在一些限制，比如只能绑定一个处理函数、容易造成全局函数的冲突等。
所以，推荐使用更现代的绑定方式。
二、通过addEventListener(方法绑定事件addEventListener(方法是DOM节点对象的方法，通过该方法可以监听指定类型的事件，并在事件触发时执行相应的处理函数。
该方法通常有三个参数：事件类型、处理函数、以及一个可选的布尔值参数。
例如：```javascriptvar btn = document.querySelector('button');btn.addEventListener('click', functioconsole.log('按钮被点击了');});```以上代码中，当按钮被点击时，会在控制台上输出"按钮被点击了"。
使用addEventListener(方法绑定的事件可以是同一个元素的多个，处理函数也可以是匿名函数。
此外，该方法还支持事件的捕获阶段、以及决定事件是在捕获阶段触发还是在冒泡阶段触发。
通过addEventListener(方法绑定的事件可以使用removeEventListener(方法来移除。
例如：```javascriptvar btn = document.querySelector('button');var handler = functioconsole.log('按钮被点击了');};btn.addEventListener('click', handler);//移除事件btn.removeEventListener('click', handler);```以上代码中，在绑定事件后又采用了removeEventListener(方法将事件移除。
jqueryon事件jqueryon实现绑定多个事件
jqueryon事件jqueryon实现绑定多个事件API上jquery on介绍on(events,[selector],[data],fn)概述在选择元素上绑定⼀个或多个事件的事件处理函数。
on()⽅法绑定事件处理程序到当前选定的jQuery对象中的元素。
在jQuery 1.7中，.on()⽅法提供绑定事件处理程序所需的所有功能。
帮助从旧的jQuery事件⽅法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。
要附加⼀个事件，只运⾏⼀次，然后删除⾃⼰，请参阅.one()参数events,[selector],[data],fnV1.7events:⼀个或多个⽤空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:⼀个选择器字符串⽤于过滤器的触发事件的选择器元素的后代。
如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当⼀个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执⾏的函数。
false 值也可以做⼀个函数的简写，返回false。
events-map,[selector],[data]V1.7events-map:个⽤字符串表⽰的，⼀个或多个空格分隔的事件类型和可选的命名空间，值表⽰事件绑定的处理函数。
selector:⼀个选择器字符串过滤选定的元素，该选择器的后裔元素将调⽤处理程序。
如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data:当⼀个事件被触发时要传递event.data给事件处理函数。
⽰例描述:Display a paragraph's text in an alert when it is clicked:$("p").on("click", function(){ alert( $(this).text() ); });Pass data to the event handler, which is specified here by name:function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler)Cancel a form submit action and prevent the event from bubbling up by returning false:$("form").on("submit", false)Cancel only the default action by using .preventDefault().$("form").on("submit", function(event) { event.preventDefault(); });Stop submit events from bubbling without preventing form submit, using .stopPropagation().$("form").on("submit", function(event) { event.stopPropagation(); });jQuery on()⽅法是官⽅推荐的绑定事件的⼀个⽅法。
jQuery源码解析之on事件绑定
jQuery源码解析之on事件绑定本⽂采⽤的jQuery源码为jquery的on⽅法⽤来在选定的元素上绑定⼀个或多个事件处理函数。
当参数selector存在时，通常会⽤来对已经存在的元素或将来即将添加到⽂档中的元素做事件委托，表⽰当点击document中的selector元素时，将触发function回调函数。
1 <div id="div" style="font-weight:800;font-size:24px;text-align:center;color:red;">2 <p id="paragraph">test events </p>3 </div>45 <script src="../jquery-3.2.1.js"></script>6 <script>7 $(function(){8 $(document).on("click","#paragraph",function(){9 console.log('this is paragraph');10 });11 $(document).on("click","#div",function(){12 console.log('this is div');13 });14 $(document).on("click","#addDiv",function(){15 console.log('this is add div');16 });1718 setTimeout(function(){19 createDiv();20 },2000);21 });2223function createDiv(){24 $("<div>").attr("id","addDiv").html("this is a div add after event binding").appendTo($("body"));25 }26 </script>上⾯例⼦中三个事件都绑定在document对象上，当⿏标点击最内层的#paragraph时，会看到浏览器打出的结果是可以得知，绑定的事件是在冒泡阶段触发的。
jq on方法
jq on方法
jQuery中的on方法是jQuery中事件绑定的API函数。
它可以把一个函数绑定到元素上某个特定的事件中，当该事件发生时，绑定的函数就会被执行。
on方法也可以用来绑定多个处理程序函数到一个元素，并支持传递数据。
on方法是jQuery里的事件绑定的重要方法，拥有on()、off()、one()、trigger()
四个兄弟函数。
它们之间不仅是定义和语法上的差别，而且还有一些根据触发事件的本质
不同而在精神上的差异。
on()和off()函数的语法非常类似，但它们的功能有时会互换：on函数通常会绑定一
个函数到某个元素上，而off函数则是解除绑定的函数，以便在不需要该函数时停用它。
one()函数在on函数的基础上有所不同，one函数只会运行一次，也就是说，绑定函
数只会运行一次，而on函数会反复运行。
使用one函数的时候需要注意，如果元素有多
个one绑定函数，只有最后一个会被调用，而且它们之前所有的绑定都无法通过off()函
数去取消。
最后，trigger()函数可以触发一个事件，它可以手动触发某个元素上指定的事件，
尽管本质上不存在这样的行为，它还是非常有用的，在很多特殊场景下都能起到很大作用。
总之，jQuery中的on函数主要用于定义元素上添加触发事件函数，以及绑定多个处
理程序函数，并支持传递数据。
它的on()和off()的功能有时会互换，而one()函数只会
运行一次，而trigger()函数可用于手动触发特定的事件。
onfling()和onscroll()方法的参数
onfling()和onscroll()方法的参数
onfling()和onscroll()都是JavaScript中用于监听页面滚动和触摸滑动事件的函数。
它们的参数可能会有所不同，具体取决于使用的库和框架。
通常情况下，onfling()函数的参数取决于使用的触摸事件库或框架。
通常，它接受一个回调函数作为参数，该回调函数在触摸滑动事件发生时被调用。
回调函数可以接受一些事件相关参数，例如触摸点的位置、时间、速度等。
以下是一个示例，展示了如何使用onfling()函数：
javascript
// 使用jQuery Mobile库
$('#myElement').on('fling', function(event) {
// 处理触摸滑动事件的逻辑
});
onscroll()函数通常接受一个回调函数作为参数，该回调函数在页面滚动时被调用。
回调函数可以接受一些与滚动事件相关的参数，例如滚动的距离、方向等。
以下是一个示例，展示了如何使用onscroll()`函数：
javascript
// 使用原生JavaScript
window.onscroll = function(event) {
// 处理页面滚动的逻辑
};
需要注意的是，具体的参数列表可能因使用的库、框架或浏览器而有所不同。
jQuery点击事件绑定onClick和on（）
jQuery点击事件绑定onClick和on（）⼀、静态绑定（1）onclick⽅法jsp代码<button href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default" onClick = "audit('{{info.id}}')">审核</button>js事件处理function audit(absenceId) {//弹出对话框$.confirm("确认审核", function() {//确定，发送post请求$.post("/leave/audit", {"absenceId" : absenceId,}, function(data) {//成功，跳转到指定页⾯location.href = "/qingjia/index";}, 'json');}, function() {//点击取消后的回调函数});}（2）通过jQuery的id选择器⽤.click()绑定点击事件这种⽅式不⽀持给动态元素或者样式重新绑定事件。
jsp代码<a href="javascript:;" id="release-button" class="weui_btn weui_btn_primary">发布</a><a href="javascript:;" id="cancel-button" class="weui_btn weui_btn_default">取消</a>js事件处理$("#release-button").click(function() {content = $("#content").val();if (!content) {showTips("请输⼊内容");return;}publish();});$("#cancel-button").click(function() {window.history.back();});⼆、动态绑定⽀持给动态元素和属性绑定事件的是o()n，on前⾯的元素必须在页⾯加载的时候就存在于dom⾥⾯，动态的元素或者样式等，可以放在on的第⼆个参数⾥⾯。
bind,unbing,on,live,delegate绑定和解绑事件
bind,unbing,on,live,delegate绑定和解绑事件<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</title><style type="text/css">.myred{border:4px solid red;}</style><script src="js/jQuery1.11.1.js"></script><script src="js/jquery-migrate-1.2.0.js"></script><script type="text/javascript">$(function() {/* $("input").focus(function() {$(this).css("background","pink");}).blur(function() {$(this).css("background", "");});*//* $("input").bind('focus', function () {$(this).css("background", "pink");}).bind('blur', function () {$(this).css("background", "");});*///5分钟，⽤⼀个bind，绑定个事件/* $("input").bind('focus', function () {$(this).css("background", "pink");}).bind('blur', function () {$(this).css("background", "");});*//*$("input").bind({focus: function () {$(this).css("background", "pink");},blur: function () {$(this).css("background", "");}});*/$("input").on({focus: function () {$(this).css("background", "pink");},blur: function () {$(this).css("background", "");}});//卸载所有事件，但是不能⽤()// $("input").unbind("focus blur");$("input").off("focus blur");//live$("ul").delegate("li",{mouseover: function() {$(this).css("background","pink");},mouseout: function () {$(this).css("background", "");}});$("#btnAdd").live('click',function() {//深圳var $obj = $("<li>深圳</li>");$("ul").append($obj);});});</script></head><body>⽤户名:<input type="text"/>密码:<input type="password"/><ul><li>北京</li><li>上海</li><li>⼴州</li></ul><input id="btnAdd" value="添加节点" type="button"/></body></html>//JQuery的1.9版本以后不再⽀持 on , live 的函数事件，得引进相应的 jquery-migrate-1.2.0.js插件包才⾏。
jQuery之on
jQuery之on在jQuery1.9版本中，已经去掉了live和delegate⽅法，从⽽将on⽅法的地位进⼀步提升。
jQuery如此推崇on⽅法，必有其⽜逼的地⽅。
那么我们就有必要了解这个on，并在代码中利⽤它，从⽽优化代码和提⾼性能。
注：在jQuery1.7后，on⽅法就可以全⾯绑定任何事件了。
.on( events [,selector] [,data] ,handler) event:为事件类型，可以有多个事件类型。
selector:可选，过滤绑定在on⽅法上的后代元素。
注：如果有selector，on⽅法是采⽤事件代理，这样可以提升代码性能。
data:可选，当事件被触发时，它会传给event.data，从⽽可以加以利⽤ handler:当事件被触发时，执⾏的⽅法。
下⾯写个demo，看看on的使⽤：//当p元素的click事件，被触发时，弹出p元素的⽂本信息$('p').on('click',function(){alert( $(this).text() );});//在上⾯的基础上，传值给p元素$('p').on('click',{foo:"bar"},function(event){alert( event.data.foo );});标准浏览器中都有事件冒泡(bubble)或捕获(propagate)机制(除IE)。
如下图：--当⽬标元素被触发时，它的流程是，先从它祖先元素⼀层⼀层，跋⼭涉⽔将事件传达给⽬标函数，如上图中P的⽗元素 à target的⽗元素P à target，此为事件捕获；--当⽬标函数被触发后，⼜将事件⼀层⼀层传递到根节点，即⽼祖宗，此为事件冒泡。
所有浏览器都有事件冒泡机制。
所以，我们可以利⽤这⼀特性，优化代码，减少事件绑定。
on⽅法也利⽤了这⼀特性。
js与jquery实时监听输入框值的oninput与onpropertychange方法
js与jquery实时监听输⼊框值的oninput与onpropertychange⽅法本⽂实例讲述了js与jquery实时监听输⼊框值的oninput与onpropertychange⽅法。
分享给⼤家供⼤家参考。
具体如下：最近做过⼀个项⽬，需求是下拉框⾥⾃动匹配关键字，具体细节是实时监听⽂本框 value 值的变化，然后匹配相关内容。
初接项⽬，⾸先想到的是 JQ ⾥的 change，但是马上排除此⽅法，因为 change 是在⽂本框失去焦点时才会触发。
曲线救国⼀下，想到⽤ keydown 来解决。
其他⼀切还好，只是当不通过键盘操作，⽽是通过⿏标来复制粘贴时，这个事件是⽆法触发的。
所以这个⽅法也排除掉了。
然后，查询了⼀些相关资料，发现只有原⽣ js 的 oninput & onpropertychange 符合此要求，接着便去 JQ 的 API ⾥去找符合的⽅法，很失望，并未找到，但是 bind 确实会绑定类似的事件，那便是 input & propertychange，通过测试，确实是没问题的。
现在将例⼦奉上：JQ：$('input').bind('input propertychange', function() {//进⾏相关操作});其中：propertychange 是为了兼容 IE9 以下版本的。
JS中的 oninput 事件在 IE9 以下版本不⽀持，需要使⽤ IE 特有的 onpropertychange 事件替代，这个事件在⽤户界⾯改变或者使⽤脚本直接修改内容两种情况下都会触发，有以下⼏种情况：修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发⽣变化。
修改了 input:text 或者 textarea 元素的值，value 属性发⽣变化。
修改了 select 元素的选中项，selectedIndex 属性发⽣变化。
jquery中on的用法
jquery中on的用法jQuery 中 on() 方法是一种事件代理的方式去绑定事件处理程序（Event Handler），其最大的优势在于它可以为DOM元素动态的绑定事件处理程序，即使后来添加的元素，也能够自动的绑定其事件。
on() 方法的最基本语法如下：```$(selector).on(event,childSelector,data,function)```其中，各参数含义如下：- event：必需，规定要绑定的一个或多个事件，多个事件可以使用空格分开。
- childSelector：可选，用于委托事件的子元素选择器。
相当于on()函数在DOM中只绑定到了父元素上，当执行操作的时候，子元素将会借用父元素的处理程序进行操作。
这样，我们可以动态的添加或删除子元素，而不再需要重新绑定事件处理程序。
- data：可选，传递到事件处理程序中的额外数据对象。
- function：必需，绑定到事件的处理函数。
下面，我们通过几个例子来详细介绍 on() 方法的使用。
### 示例1：基本用法```$(document).on('click', '#btn1', function() {console.log('按钮被点击了！');});```这个代码片段的作用是在整个文档中绑定一个点击事件，当点击 id 为 btn1 的元素时，就会执行一个匿名的事件处理程序（将一串输出内容打印到控制台上）。
### 示例2：on() 和 click() 的区别$(document).click(function(){console.log("click方法绑定的事件处理程序");});$(document).on("click",function(){console.log("on方法绑定的事件处理程序");});```这个例子中我们创建了两个事件处理程序，一个是使用 click() 方法绑定，另一个是使用 on() 方法绑定，它们都是针对 document 元素的 click 事件。
$on的用法
$on的用法
在许多编程和脚本语言中，"$on" 看起来像一个特殊的符号，但它的确切含义取决于上下文和使用它的语言。
没有提供特定的语言或上下文，因此我将提供一些可能的解释和用法，但请注意，这可能并不是所有语言或环境中的通用情况。
1. JavaScript中的事件处理器：
在前端开发中，特别是在JavaScript中，事件处理器经常以"on" 为前缀，例如`onclick`、`onmouseover`、`onchange` 等。
这些是事件处理器属性，用于指定在特定事件发生时执行的函数。
例如：
```javascript
button.onclick = function() {
// 处理点击事件的代码
};
```
2. Shell脚本：
在Shell脚本中，"$on" 可能是一个变量名或其他标识符，具体取决于脚本的上下文。
例如：
```bash
on="some_value"
echo $on
```
3. 其他编程语言：
在其他编程语言中，"$on" 可能是变量、函数名或其他标识符。
具体的含义和用法会根据语言的语法和规则而异。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery on()方法
jQuery 事件方法
实例
向<p> 元素添加click 事件处理程序：
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
尝试一下»
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自jQuery 版本1.7 起，on() 方法是bind()、live() 和delegate() 方法的新的替代品。
该方法给API 带来很多便利，我们推荐使用该方法，它简化了jQuery 代码库。
注意：使用on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用off()方法。
提示：如需添加只运行一次的事件然后移除，请使用one()方法。
语法
$(selector).on(event,childSelector,data,function,map)
一些说明：
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别：
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。
更适合列表类型的，绑定到document DOM节点上。
和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。
而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。
delegate()与on()同理，毕竟是用on()实现的：。