委托机制：$('elem').on('click', 'selector', function(e)是委托机制    在点击selector这个元素时  事件向上传递（冒泡）  直到与第二个参数相等  事件被消费  并产生回调函数  就这个函数

运用场景：  当然委托机制和直接绑定selector标签效果也是一样 内部实现不同  但是如果selector标签的祖父级要拿到selector标签的点击事件或者selector标签的内容就可以用这个函数

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

表单中的blur和focus方法在元素本身，该元素设置了该方法，点击该元素就会触发该方法。

focusin和focusout方法支持冒泡方法，在元素包含的元素中产生，点击某个元素，会往上查找父元素是否有这个方法，有就触发。

1：点击指定点击事件后直接弹出

2：点击某个指定点击事件，触发里面自定义的点击事件

3：点击某个指定的点击事件，里面放一个数据，和一个方法，方法接受那个数据

$('textarea').select(function(e) {

        console.log( window.getSelection());

    });

获取textarea选中时选中的文字

$('.target1').change(function(e) {        $("#result").html(e.target)    });会出问题待解决

鼠标按下触发mousedown按钮,离开元素不会触发mouseup事件

鼠标左键按下,触发鼠标左键mousedown事件,不放按下鼠标右键触发鼠标右键的mousedown事件,左键松开触发左键mouseover,以此类推

共有8种骚操作(左中右)

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

冒泡事件及捕获事件

1、冒泡现象其实可以理解为：遇到“问题”找“爸爸”。

 “问题”：就是一些特定的事件。 

“爸爸”：就是父级元素。 

举例：focusin案例中第二个绿盒子里的input元素被我们点击时，就触发了focusin事件。

 但是input表示：我很方啊，我没有这个事件的处理方法啊！咋整？找老爸，问他有没有！

 绿盒子老爸说：莫方，我有，让我来！ 最终就调用了绿盒子老爸的方法。

 PS:如果绿盒子老爸自己也没有呢？他会问他的老爸，以此类推，一直问到老祖宗window，都没有的话就只好啥也不做啦！

2、mouseenter （鼠标进入）和mousesleave（鼠标离开）是由内像外进行事件冒泡。

mouseover（鼠标进入）和mouseout（鼠标离开）是由外像内进行捕获，

所以当父元素添加了mouseover（鼠标进入）和mouseout（鼠标离开）时子元素也会触发聚焦或者失焦事件

总结

冒泡：mouseenter （鼠标进入）、mousesleave（鼠标离开）

捕获：mouseover（鼠标进入）、mouseout（鼠标离开）

冒泡事件及捕获事件

1、冒泡现象其实可以理解为：遇到“问题”找“爸爸”。

 “问题”：就是一些特定的事件。 

“爸爸”：就是父级元素。 

举例：focusin案例中第二个绿盒子里的input元素被我们点击时，就触发了focusin事件。

 但是input表示：我很方啊，我没有这个事件的处理方法啊！咋整？找老爸，问他有没有！

 绿盒子老爸说：莫方，我有，让我来！ 最终就调用了绿盒子老爸的方法。

 PS:如果绿盒子老爸自己也没有呢？他会问他的老爸，以此类推，一直问到老祖宗window，都没有的话就只好啥也不做啦！

2、focus（获得焦点）和blur（失去焦点）是由内像外进行事件冒泡。focusin（获得焦点）和focusout（失去焦点）是由外像内进行捕获，所以当父元素添加了focusin和focusout时子元素也会触发聚焦或者失焦事件

总结

冒泡：focus（获得焦点）、blur（失去焦点）

捕获：focusin（获得焦点）、focusout（失去焦点）

1, input添加的是focus事件, #accident添加的是click事件

2, trigger()会冒泡,  当左边按钮点击后触发$("a").trigger("click")---a点击事件(自定义事件,我们没有点击a,只点击了按钮),a点击后冒泡到拥有click事件的祖先元素, 于是#accident的click事件执行,alert出"trigger触发的事件会在 DOM 树中向上冒泡"这句话,弹框关闭后$("input").trigger("focus")会让input的光标聚集--即focus事件.

3,triggerHandler()不会冒泡,且不会触发浏览器的默认行为,所以右边按钮点击后1, 不会alert出弹框;2, input不会focus;

第一大段代码$("button:first").click(function(event,bottonName)你只要点击按钮1就会触发点击事件.click(function(event,bottonName)由于一开始的bottonName这个参数是不存在的所以bottonName=bottonName|| 'first';这个语句的返回值是'first'  然后再调用update这个函数 update($("span:first"),$("span:last"),‘first’);  解释完第一段代码的含义我们来看第三段代码 用得出的参数去替换第三段代码函数的三个参数可得 $("span:first").text('first')        var n=parseInt($("span:last").text(), 10);       $("span:last").text(n+1);        你看原文第31行的代码 原文结构体中定义着<div><span></span><span>0</span>点击次数</div>   所以点击按钮一执行一次这三个语句后   <div><span>first</span><span>1</span>点击次数</div>  按照这个道理你可以去看第二段代码的应用

//点击更新次数

    $("button:first").click(function(event,bottonName) {

        bottonName = bottonName || 'first';

        update($("span:first"),$("span:last"),bottonName);

    });

    //通过自定义事件调用，更新次数

    $("button:last").click(function() {

        $("button:first").trigger('click','last');

    });

    function update(first,last,bottonName) {

        first.text(bottonName);

        var n = parseInt(last.text(), 10);

        last.text(n + 1);

    }

event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为(可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了)
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素

.this和event.target都是dom对象

var n  = 0;

    //绑定事件

    $(".aaron:last").on('mousedown mouseup', function(e) {

        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)

        ++n;

    })

    //删除事件

    $("button:last").click(function() {

        $(".aaron:last").off()

    })