jQuery基础（三）事件
1、鼠标事件
jQuery鼠标事件之click与dblclick事件
click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作。
- 方法一：$ele.click()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").click(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").click() //手动指定触发事件
});
- 方法二：$ele.click( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});
- 方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。
jQuery鼠标事件之mousedown与mouseup事件
mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。
<h4>测试一</h4>
<button>弹出回调中的鼠标键</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').mousedown(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mousedown(function() {
$('p').mousedown() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<div class="test3">
<p>$('.right').mousedown(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function mydata(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, mydata)
}
a();
</script>
注意：
- 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
- target：返回触发事件的节点
- e：指代event（事件）
- data：是event的属性
- $ele.click( [eventData ], handler(eventObject) )eventData可以被当作参数传递到事件event的data属性里
jQuery鼠标事件之mousemove事件
mousemove的快捷方法可以监听用户移动的的操作
- 方法一：$ele.mousemove()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mousemove(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").mousemove() //指定触发事件
});
- 方法二：$ele.mousemove( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#test").mousemove(function() {
//this指向 div元素
});
- 方法三：$ele.mousemove( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").mousemove(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
- jQuery html() 方法：html() 方法设置或返回被选元素的内容（innerHTML）。
jQuery鼠标事件之mouseover与mouseout事件
移入移出事件
- 方法一：$ele.mouseover()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mouseover(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").mouseover() //指定触发事件
});
- 方法二：$ele.mouseover( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#test").mouseover(function() {
//this指向 div元素
});
- 方法三：$ele.mouseover( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").mouseover(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
jQuery鼠标事件之mouseenter与mouseleave事件
mouseenter事件和mouseover的区别
关键点就是：冒泡的方式处理问题
简单的例子：
mouseover为例：
<div class="aaron2">
<p>鼠标离开此区域触发mouseleave事件</p>
</div>
如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:
- p元素响应事件
- div元素响应事件
这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
所以在这种情况下面，jQuery推荐我们使用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
这就是最本质的区别。
jQuery鼠标事件之hover事件
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件，避免冒泡问题。
$(ele).mouseenter(function(){
$(this).css("background", '#bbffaa');
})
$(ele).mouseleave(function(){
$(this).css("background", 'red');
})
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
<script type="text/javascript">
// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
</script>
jQuery鼠标事件之focusin事件
当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。
当在元素或在其内的任意元素上发生 focus 事件时，focusin() 方法添加要运行的函数。
与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。
提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
提示：该方法通常与 focusout() 方法一起使用。
<script type="text/javascript">
//input聚焦
//给input元素增加一个边框
$("input:first").focusin(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('慕课网', fn)
}
a();
</script>
jQuery鼠标事件之focusout事件
当元素（或在其内的任意元素）失去焦点时发生 focusout 事件。
当在元素或在其内的任意元素上发生 focusout 事件时，focusout() 方法添加要运行的函数。
与 blur() 方法不同的是，focusout() 方法在任意子元素失去焦点时也会触发。
提示：该方法通常与 focusin() 方法一起使用。
2、表单事件
jQuery表单事件之blur与focus事件
当元素失去焦点时发生 blur 事件。
它们和focusin事件与focusout事件之间的本质区别:
- 是否支持冒泡处理
- focus()在元素本身产生，focusin()在元素包含的元素中产生；blur与focusout也亦是如此
jQuery表单事件之change事件
- 当input元素，textarea和select元素的值改变时发生 change 事件（仅适用于表单字段）。
- change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
- 注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
input元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素
多行文本输入框，当有改变时，失去焦点后触发change事件
<script type="text/javascript">
//监听input值的改变
$('.target1').change(function(e) {
$("#result").html(e.target.value)
});
//监听select：
$(".target2").change(function(e) {
$("#result").html(e.target.value)
})
//监听textarea：
$(".target3").change(function(e) {
$("#result").html(e.target.value)
})
</script>
jQuery表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。
<script>
$(document).ready(function(){
$("input").select(function(){
alert("文本已选中!");
});
});
</script>
- 当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。ready() 方法不应该与 一起使用。
jQuery表单事件之submit事件
当提交表单时，会发生 submit 事件。
该事件只适用于
posted on 2019-04-15 16:16 louisduan66 阅读(212) 评论(0) 编辑 收藏 举报
