学习情况：

继续学习JQ操作基本-事件篇。

1、单击与双击click与dbclick

（1）不带参数用来指定触发一个事件，用的比较少；

（2）

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

<div id="test">点击触发<div>

$("#test").click(function() {//this指向 div元素});

（3）方法三：$ele.click( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#test").click(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

（4）dblclick又是由2个click叠加而来的，用法类似。

2、鼠标按下与弹起mousedown与mouseup事件。方法同1。

3、鼠标移动事件mousemove。方法同1。

4、鼠标进出区域事件mouseover与mouseout。方法同1。

5、鼠标进出元素内外部事件mouseenter与mouseleave。方法同1。

6、鼠标悬停事件hover

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

7、鼠标点击聚焦focusin事件。方法同1。

8、鼠标失去聚焦focusout事件。方法同1。 //7.8支持事件冒泡，即点击子元素时，即使子元素没有绑定函数事件，也会逐级向上查找父元素并执行。

9、表单点击聚焦和失去焦点blur与focus //与7、8的区别是不支持事件冒泡。

10、表单内容变更事件change

$(selector).change(function() {} 

表单内容变更后执行事件。input元素和多行文本框元素textarea元素，更改并失去焦点后执行，select元素，下拉选择后立即执行。

11、表单内容选中事件select

必须选中表单内容，只针对input和textarea。方法同1。

12、表单提交submit

用于监听用户提交的数据，方法同上。

具体能触发submit事件的行为：

<input type="submit">

<input type="image">

<button type="submit">

当某些表单元素获取焦点时，敲击Enter（回车键）

注意：return false;   //阻止默认跳转行为，提交表单

13、键盘事件keydown/keyup

分别监听，键盘上面键位按下/松开事件。方法同1。

14、多事件绑定/解绑 on/off

（1）最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同$("#elem").click(function(){})    //快捷方式

$("#elem").on('click',function(){})   //on方式

最大的不同点就是on是可以自定义事件名

$("#elem").on("mouseover mouseout",function(){ });   //通过空格分离，传递不同的事件名，可以同时绑定多个事件

$("#elem").on({mouseover:function(){}, mouseout:function(){}});  //多个事件绑定不同函数,中间有逗号隔开。

（2）解除绑定

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

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

$("elem").off("mousedown mouseup")  //删除所有事件, 也可以不加事件名$("elem").off()

15、jQuery事件对象的作用/事件委托

event.target代表当前触发事件的元素，通过事件冒泡到父系元素，激活绑定事件。

<ul><li>点击：触发一</li><li>点击：触发二</li></ul>  //html结构

$("ul").on('click',function(e){alert('触发的元素是内容是: ' +e. targe.textContent) })  //jq结构，通过点击li元素，冒泡到ul元素并实现绑定事件的激活，如果换为this.textContent则显示全部li内容。

16、jQuery事件对象的属性和方法

事件对象的属于与方法有很多，但是我们经常用的只有那么几个：

（1）event.type：获取事件的类型

$("a").click(function(event) {alert(event.type); // "click"事件});

（2）event.pageX 和 event.pageY：获取鼠标当前相对于页面（左、上）的坐标。

（3）event.preventDefault() 方法：阻止默认行为（常用！比如阻止链接跳转等）。且可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。

（4）event.stopPropagation() 方法：阻止事件冒泡

（5）event.which：获取在鼠标单击时，单击的是鼠标的哪个键（左中右键分别对应1/2/3）

（6）event.currentTarget : 在事件冒泡过程中的当前DOM元素，等同于this。（区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；）

困难：今天的教程MS被吐槽的厉害，确实在实践和内容讲解上比较感觉敷衍，质量较之前有落差，学习起来囫囵吞枣，只能看个大概，离应用也差得比较远。师兄有其他好的网站分享下吗

计划：开始着手任务4，计划周日完成吧。