jQuery基础_事件

0.event.type返回事件类型

1.click与dbclick事件

注意，除了click(function(){})外还有，双参数形式。

click(1111,fun);

function fun(e){e.data;//1111}

mousedown，mouseup注意触发时区域，且可以用event.which来区别，event.which=1为左键，2为中键，3为右键。

2.mouseover，mouseout事件

可以用event对象.pageX,.pageY来传递鼠标移动时的坐标

ie独有的mouseenter和mouseleave事件有相同作用，但是区别是，mouseenter与mouseleave自动停止了冒泡，相当于mouseover里封装了阻止冒泡方法。

类似的还有hover，可以减少代码量，传入两个回调函数即可，$().hover(funIn,funOut)

    // hover()方法是同时绑定 mouseenter和 mouseleave事件。
    // 我们可以用它来简单地应用在 鼠标在元素上行为
    $("p").hover(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );

3.获得焦点触发事件focusin()

配合失焦事件focusout()

同样也有不支持冒泡的blur与focus事件

4.change事件

<input>,<textarea>,<select>元素的值都是可以发生改变的，可以通过change事件来监听这些改变。

文本的话，失焦时若有改变则触发，选项则是作出选择时触发。

5.select事件

在textarea或input元素中文本被选择时，触发select事件，select事件只能用于这两个标签。

http://www.imooc.com/code/9799

这里题目使用搜狗浏览器会弹出三次。这是浏览器默认行为导致的。表单元素中常见

 $("input").select(function(e){
        alert(e.target.value);
        // return false;
         //stopPropagation();
         //e.preventDefault() 
    })
    $("#bt1").click(function(){
        $("input").select();

    })

用jQuery对象调用弹出三次

$("input").select();

用原生js对象是两次

$("input")[0].select();

可以理解为调用函数执行一次，但是执行函数会引发对应jQuery对象与原生js对象的选中行为，从而再次引发函数调用！这就是弹出多次的原因。

这可以用return false阻止函数被再次调用，或者用阻止浏览器默认行为的e.preventDefault()，或者阻止冒泡。

6.submit事件

在用户提交时，验证表单输入的正确性，若错误终止提交。

同样因为是表单元素中使用，要注意阻止浏览器默认行为（默认跳转等，有些浏览器阻止了提交，但是还是会跳转页面），加return false；

7.keydown,keyup,keypress

keyup是在松开键盘字符后触发，看起来是输入同步的。

keydown是在敲击键盘字符时触发，因为敲击时，字符还未来得及输入，所以若alert出来是空值，再次敲击才能输出前一个敲击的字符。

keypress与keydown/keyup的区别是：

（1）只能捕获单个字符，不能捕获组合键

（2）无法响应系统功能键

（3）不区分小键盘与主键盘的数字字符

故而keydown，keyup处理keypress不能处理的功能键（f1-f12等），keypress主要用来接收字母数字等ANSI字符。

8.多事件绑定on,删除off事件

多个事件绑定同一个函数

 $("#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还有一个参数，过滤器：

$("div").on("click","p",fn)

事件委托（利用冒泡）：点击p子元素a时，会向上一层层冒泡直到div，加了p过滤器，使得将事件委托给了p，即点击a冒泡遇到p则执行事件，继续冒泡，若无p了则不执行事件。

删除事件，所有事件：

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

$("elem").off()

9.event.target

代表当前触发事件的元素，用于事件冒泡时处理事件委托，判断元素。
在事件委托中：

<ul>
  <li>点击：触发一</li>
  <li>点击：触发二</li>
  <li>点击：触发三</li>
  <li>点击：触发四</li>
</ul>

$("ul").on('click',function(e){
           alert('触发的元素是内容是: ' +e.target.textContent)
        })

上面这个例子中，点击li，冒泡触发事件，this为ul，target为li。

event.target!=this

event.currentTarget==this

this,event.currentTarget是会随冒泡变化的，但是event.target不会，他是直接引发事件的DOM元素。

注意：他们都是DOM对象，用$(this),$(event.target)转换为jQuery元素。

10.事件触发器与自定义函数trigger()

同样可以传参数。详见http://www.imooc.com/code/10155这个例子。

用法：

$('#elem').trigger('click');

trigger会触发浏览器默认、原生行为，此时使用triggerHandler（）。

它只影响第一个匹配到的元素，不会冒泡，不会触发浏览器默认行为，这个例子很好的说明了triggerHandler既没有冒泡也没有触发默认聚焦事件。

-----------------------------------------------------------------------------------

ps:附加

parseInt（“”，10）意思是用10进制解析前面字符串，将之变为int，即“11”为11。