js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

event.currentTarget : 在事件冒泡过程中的当前DOM元素

mark2

$('body').on('click', 'div', function(e) {

       alert(e.target.textContent)

    })

e代表当前事件对象,e.target表示当前触发事件的元素。如果点击a触发的事件e.target就表示a元素，如果是点击div触发的事件，e.target就表示div元素

focus，blur和focusin,focusout的区别

事件委托！！！！

mouserenter/mouseleave和mouseover/mouseout的区别

触发元素的事件类型

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

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

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

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

keydown事件：

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

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

 

keyup事件：

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

 

注意：

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

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

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

  <h2>submit</h2>

    <div class="left">

        <div class="aaron">

            <form id="target1" action="test.html">

                回车键或者点击提交表单： 

                <input type="text" value="输入新的值" />

                <input type="submit" value="Go" />

            </form>

        </div>

        <div class="aaron">

            <form id="target2" action="destination.html">

                回车键或者点击提交表单,禁止浏览器默认跳转： 

                <input type="text" value="输入新的值" />

                <input type="submit" value="Go" />

            </form>

        </div>

    </div>

    <script type="text/javascript">

    //回车键或者点击提交表单

    $('#target1').submit(function(e) {

        alert('捕获提交表达动作,不阻止页面跳转')

    });

    //回车键或者点击提交表单,禁止浏览器默认跳转：

    $('#target2').submit(function() {

        alert('捕获提交表达动作,阻止页面跳转')

        return false;

    });

    </script>

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

select事件只能用于<input>元素与<textarea>元素

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

 

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

 

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

 

change事件很简单，无非就是注意下触发的先后行为

//监听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) })

在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件

它们之间的本质区别:

是否支持冒泡处理

举个简单的例子

<div>
  <input type="text" />
</div>

其中input元素可以触发focus()事件

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。

focus()在元素本身产生，focusin()在元素包含的元素中产生

blur与focusout也亦是如此

focus不触发冒泡事件

blur不触发冒泡事件

    <h2>.focusout()方法</h2>

    <div class="left">

        <div class="aaron">

            点击触发失去焦点：<input type="text" />

        </div>

    </div>

    <div class="right">

        <div class="aaron1">

            点击触发失去焦点并传递参数：<input type="text" />

        </div>

    </div>

    <script type="text/javascript">

        //input失去焦点

        //给input元素增加一个边框

        $("input:first").focusout(function() {

             $(this).css('border','2px solid red')

        })

    </script>

    <script type="text/javascript">

        //不同函数传递数据

        function fn(e) {

             $(this).val(e.data)

        }

        function a() {

            $("input:last").focusout('慕课网', fn)

        }

        a();

    </script>

 <h2>.focusin()方法</h2>

    <div class="left">

        <div class="aaron">

            点击聚焦：<input type="text" />

        </div>

    </div>

    <div class="right">

        <div class="aaron1">

            点击聚焦并传递参数：<input type="text" />

        </div>

    </div>

    <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>

jq自定义事件

triggerHandler

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

triggerHandler与trigger不同之处

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素

• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined