mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题

原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

return false  ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

e.target.value

e.target就等价于$('target1')
故e.target.value就等价于$('target1').val()

mouseover，mouseout，mouseenter，mouseleave的区别发现，mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover，mouseout 方法，而 mouseenter，mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说，后两者是不冒泡的事件，前两者是会冒泡的事件。

卸载事件off()方法

• 通过.on()绑定的事件处理程序

• 通过off() 方法移除该绑定

根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：.on( events ,[ selector ] ,[ data ] )。

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

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

最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看

多个事件绑定同一个函数

 $("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

以上都是on方法基本用法，具体可以参考下右边的代码的一些使用

keypress事件与keydown和keyup的主要区别

• 只能捕获单个字符，不能捕获组合键

• 无法响应系统功能键（如delete，backspace）

• 不区分小键盘和主键盘的数字字符

总而言之，

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的

注意：

• keydown是在键盘按下就会触发

• keyup是在键盘松手就会触发

• 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

focus焦点

in 在里面  focusin聚焦

out在外面  focusout失去焦点

mouseover鼠标移入移出元素都会触发事件

mouseenter鼠标移入元素会触发事件

可以这样理解吧，e.target指向当前点击的DOM元素，点击哪个li就是哪个li,点击ul就是ul.因为js是会冒泡的，所以点击li的时候，this会变成ul.

 //多事件绑定一
        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent +$(this).text())
        })

结果为：

触发的元素是内容是: 点击：触发三
                点击：触发一
                点击：触发二
                点击：触发三
                点击：触发四

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

e.which 按键的键值

e.key 按键的名字

表单中的focus与blur不存在冒泡问题，而focusin与focusout存在冒泡问题