jquery基础学习之事件篇（三）

一.鼠标事件

---

click 单击 与 dbclick 双击

用于监听用户的点击操作，在同一元素上同时绑定 click 和 dblclick 事件是不可取的。。。根据浏览器支持不同
一个点击事件是由mousedown和mouseup组成
点击事件可接受两个参数，第一个为数据，第二个参数为回调函数，数据就是用来给回调函数传参的

$('.div1').click({x:'background',y:'black'},function (e) {
console.log(e.data); //{x: "background", y: "black"}
$(this).css(e.data.x,e.data.y)
})

mousedown 鼠标按下mouseup 鼠标抬起

跟click的用法一样
//鼠标按下的时候颜色变成红色
$('.div2').mousedown({x:'background',y:'red'},function (e) {
console.log(e.data);//{x: "background", y: "black"}
$(this).css(e.data.x,e.data.y)
})

//鼠标抬起的时候颜色变成绿色
$('.div2').mouseup({x:'background',y:'green'},function (e) {
console.log(e.data);//{x: "background", y: "black"}
$(this).css(e.data.x,e.data.y)
})

//注意，如果这时候再给div2加点击事件，上面的up效果会被覆盖掉，最终显示的是click的效果，但是实际上他执行了
/*$('.div2').click({x:'background',y:'black'},function (e) {
console.log(e.data);//{x: "background", y: "black"}
$(this).css(e.data.x,e.data.y)
})*/

再注意

1.mouseup强调是松手触发，与mousedown是相反的
2.mouseup与mousedown组合起来就是click事件
3.如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件，如果这时候
4.已经移动到元素外面去了，并不会触发up事件，up与down,是针对鼠标必须还停留在元素上方来说的
5.用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
6.e为事件对象，是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象即被销毁。

mousemove 移动
mouseover 移入
mouseout 移出
mouseenter 移入元素内部
mouseleave 移入元素外部

mouseenter 与mouseover 的区别

冒泡的方式处理问题, 推荐使用mouseenter，事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
在元素上移进移出切换其换色，一般通过2个事件配合就可以达到,这里用mouseenter与mouseleave，这样可以避免冒泡问题

hover() 方法

规定当鼠标指针悬停在被选元素上时要运行的两个函数。(替代mouseenter与mouseleave)

方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

focusin

当一个元素，或者其内部任何一个元素获得焦点的时候 做的某些操作

focusout

失去焦点

这些事件大概的用法就是：

$(selector).eventName(data,function)

先选中元素，然后发生一个动作eventName，这个动作需要什么效果function，如果需要参数data，写在function前面

二，键盘事件

---

keydown 按下

keyup 抬起

keypress 按下的瞬间

基本用法相同，如下，当键盘被按下时，可以对某些元素进行某些操作，e是事件对象，

$('input').keydown(function (e) {
$('em').html(e.key)//a,b,c,d...
$('span').html(e.which)// 35,60,54..
})

三，表单事件

---

blur与focus 不支持冒泡
focusin 和focusout支持冒泡处理

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。
（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了

$('div').focus(function () {
$(this).css('background','green')
})

这个函数点击了没有任何反应，因为div本身是没有聚焦功能的，且focus不会冒泡，这样子元素的事件focus传递不到父元素上去

$('div').focusin(function () {
$(this).css('background','green')
})

这个函数，因为focusin这个事件会冒泡，当子元素获取焦点时，会把这个事件传递给父元素，这时候如果父元素上有绑定相关的处理函数就会执行
点击a元素，删除li

$('li').click(function (e) {
//console.log(e.target.nodeName=='A')//nodeName时节点名称的大写
if(e.target.nodeName=='A'){
$(this).remove();
}
})

这个方法还能通过事件委托来实现

$('.list').on('click','li',function (e) {
if(e.target.nodeName=='A'){
$(this).remove();
}
})

change事件

当下面三项失去焦点，且值发生改变，才会触发
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，可以通过change事件去监听这些改变的动作

input元素 监听value值的变化，当有改变时，失去焦点后触发change事件。
对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素 对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素 多行文本输入框，当有改变时，失去焦点后触发change事件

select()

当文本或者文本域被选中时触发
$('input:last').select(function () {
alert('是否复制？')
$('li:first').html($(this).val())
})

submit 提交
当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});

四，自定义事件

---

trigger

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

//自定义事件对象，是jQuery模拟原生实现的，自定义事件可以传递参数
//本来，只有点击到div1,才能改变他的颜色
$('.div1').on('click',function () {
$(this).css('background','black')
})

//现在，点击button就能执行原来的div事件，我的理解是另外一种形式的事件委托或者冒泡，通过这种方法可以把事件委托给非儿子的元素
$('input:button').click(function () {
$('.div1').trigger('click')
})

trigger 会在dom树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
 triggerHandler 不会触发浏览器的默认行为，不会冒泡，只影响第一个匹配的元素，比如input的焦点动作，trigger执行了，input会获得焦点
triggerHandler执行了，input不会获得焦点，只会执行获得焦点之后的那个动作

五，文档/窗口事件

---

当调整浏览器窗口大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 focus 事件时运行的函数。

对浏览器窗口调整大小进行计数：

$(window).resize(function(){ $('span').text(x+=1); });

scroll() 发生滚动
对元素滚动的次数进行计数：

$("div").scroll(function(){ $("span").text(x+=1); });

六，事件对象

---

event
在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象 event

事件对象是用来记录一些事件发生时的相关信息的对象。
事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target

代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素，//event.target.nodeName Li

$('p').on('click',function (e) {

console.log(e.type)//click,触发元素的事件类型

console.log(e.pageX,e.pageY)//鼠标相对于当前页面的坐标

e.preventDefault();//在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了

event.stopPropagation() 方法：阻止事件冒泡 事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键 左键报告1，中间键报告2，右键报告3

console.log(e.currentTarget ) //<p></p>//: 在事件冒泡过程中的当前DOM元素冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
this和event.target都是dom对象如果要使用jquey中的方法可以将他们转换为jquery对象。
比如this和$(this)的使用、event.target和$(event.target)的使用；

七，on的多事件绑定

---

$(selector).on(event,childSelector,data,function) 事件类型，孩子，回调参数，回调

通过空格分离，传递不同的事件名，可以同时绑定多个事件
绑定多个函数，多个函数用{}包起来

on() 的事件委托机制
$('div').on('click','p',function () {
console.log(1)
})
上述代码中，如果没有第一个参数p,点击div会触发函数，如果把点击事件委托给了他儿子p,那么只有点击了p的时候，才会执行函数

卸载事件off()方法

绑定2个事件
$("elem").on("mousedown mouseup",fn)

删除一个事件
$("elem").off("mousedown")

删除所有事件
$("elem").off("mousedown mouseup")
不传参全部删除