jQuery学习笔记（二）

1、mousedown事件触发

• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

<h4>测试一</h4>
    <button>弹出回调中的鼠标键</button>
    <script type="text/javascript">
    //this指向button元素
    $("button:eq(0)").mousedown(function(e) {
        alert('e: ' + e.which)
    })
    </script>

2、mousemove事件

mouseover事件是当鼠标指针移动时触发的，即使是一个像素

如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能 造成浏览器的严重的性能问题

pageX() 属性是鼠标指针的位置，相对于文档的左边缘。

语法

event.pageX

参数 描述

event 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。

    <h4>测试二</h4>
    <div class="left">
        <div class="aaron1">
            <p>鼠标在绿色区域移动触发mousemove</p>
            <p>移动的X位置：</p>
        </div>
    </div>
    <script type="text/javascript">
    //绑定一个mousemove事件
    //触发后修改内容
    $(".aaron1").mousemove(function(e) {
        $(this).find('p:last').html('移动的X位置：' + e.pageX)
    })
    </script>

3、mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题；
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

4、.hover方法

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

5、带参数的事件书写方式

$(input).focusin('参数',function(e){
    $(this).val(e.data);
})

focus与blur、focusin与focusout都能接受到冒泡

但是 focus与blur对冒泡不会处理，focusin与focusout会对冒泡事件处理

区别就在于“处不处理”冒泡事件

6、change事件

input元素，textarea和select元素的值都是可以发生改变的，改变时触发

获取所改变后的值

 $('.target').change(function(e) {
        $("#result").html(e.target.value)
    });

e.target表示该DOM元素，然后在获取其相应的属性值。

select事件只能用于<input>元素与<textarea>元素（鼠标选中文字）

7、事件冒泡

1.event.stopPropagation();
　　事件处理过程中，阻止了事件冒泡，但不会阻击默认行为

2.return false;
　　事件处理过程中，阻止了事件冒泡，也阻止了默认行为

3.event.preventDefault();
　　它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为

$('#target1').submit(function(e) {
        alert('捕获提交表达动作,阻止页面跳转')
        e.preventDefault();
        //return false;
    });

8、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 );

9、事件对象的属性和方法

event.type：获取事件的类型

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

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

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

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

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

this和event.target的区别：

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

.this和event.target都是dom对象

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

10、jQuery.trim()函数用于去除字符串两端的空白字符

11、第二个a元素的查找： $(a).get(1)
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1，$(a).get(-1)