鼠标事件

click():单击事件

dblclick():双击事件

mousedown():鼠标点击事件

mouseup():鼠标释放事件

click事件就是由mousedown和mouseup两个动作构成,所有click事件需要鼠标松手后执行

mousemove():鼠标移动事件,每当鼠标移动到jQuery对象每一像素都会执行

mouseover():鼠标移入事件,当鼠标移动到元素上就会执行事件,子元素也会触发

mouseout():鼠标移出事件,当鼠标移动出元素时就会执行事件

mouseenter():(IE专用)只有在鼠标指针移动到被选元素时,才会触发 mouseenter 事件。

mouseleave():(IE专用)只有在鼠标指针穿过被选元素时,才会触发mouseleave事件。

mouseover、mouseenter、mousemove区别

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
    }
    p{
        height: 50px;
        border: 1px solid red;
        margin: 30px;
    }
    .left div {
        background: #bbffaa;
    }
    .right div {
        background: yellow;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.mouseover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p>鼠标离开此区域触发mouseover事件</p>
            <a>mouseover事件触发次数:</a><br/>
            <a>mouseover冒泡事件触发次数:</a>
        </div>
    </div>

    <h2>.mouseenter()方法</h2>
    <div class="right">
        <div class="aaron2">
            <p>鼠标进入此区域触发mouseenter事件</p>
            <a>mouseenter事件触发次数:</a><br/>
            <a>mouseenter冒泡事件触发次数:</a>
        </div>
    </div>
    <br/>

    <h2>.mousemove()方法</h2>
    <div class="left">
        <div class="aaron3">
            <p>鼠标进入此区域触发mousemove事件</p>
            <a>mousemove事件触发次数:</a><br/>
            <a>mousemove冒泡事件触发次数:</a>
        </div>
    </div>
   
    
    <script type="text/javascript">
        var a1 = 0;
        $(".aaron1 p").mouseover(function(e) {
            $(".aaron1 a:first").html('mouseover事件触发次数:' + (++a1))
        })

        var a2 = 0;
        $(".aaron1").mouseover(function() {
            $(".aaron1 a:last").html('mouseover冒泡事件触发次数:' + (++a2))
        })
    </script>


    <script type="text/javascript">
        var b1 = 0;
        $(".aaron2 p").mouseenter(function(e) {
            $(".aaron2 a:first").html('mouseenter事件触发次数:' + (++b1))
        })

        var b2 = 0;
        $(".aaron2").mouseenter(function() {
            $(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++b2))
        })
    </script>

    <script>
        var c1 = 0;
        $(".arron3 p").mousemove(function() {
            $(".aaron3 a:first").html("mousemove事件触发次数:" + (++c1))
        });

        var c2 = 0;
        $(".aaron3").mousemove(function() {
            $(".aaron3 a:last").html('mousemove冒泡事件触发次数:' + (++c2))
        })
    </script>
</body>
</html>

 hover(进入事件、离开事件):鼠标进入元素/鼠标离开元素所执行的事件。

focusin():聚焦事件。

focusout():失焦事件。

表单事件

blur():当元素失去焦点时执行事件。

focus():当元素获得焦点时执行事件。

blur、focus 不支持冒泡,focusin、focusout 支持冒泡

change():input元素会监听value值的变化,当有所改变,失焦后就会触发事件;select元素鼠标做出选项即会触发时间;

     textarea元素同input一样。

select():只能用于input元素和textarea元素,元素内容被选择时触发事件。

submit():表单提交事件

冒泡事件

顾名思义冒泡时间就跟冒泡一样是一连串发生的,也就是说在页面上可以有多个事件,也可以是多个元素响应到有个事件。比如说,在网页上有 两个元素,其中一个元素嵌套在另一个元素上,并且都绑定了一个事件,当你触发其中的一个内嵌事件的时候,js会执行两个事件结果,而且这个结果是按照一定的顺序来执行的响应事件的。之所以称之为冒泡,是因为事件会按照一定的层次结果像是冒泡一样不断向上直至顶端。

例如:

<BODY onclick="alert('aaa');">
<div onclick="alert('bbb');">
 <a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');">
   提示
  </a>
</div>
</BODY>

上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body。

键盘事件

keydowm():当用户按下键盘键时,就会触发事件。

keyup():当用户松开键盘键时,就会触发事件。

keypress():与keydown类似,当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。

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

  • 只能捕获单个字符,不能捕获组合键
  • 无法响应系统功能键(如delete,backspace)
  • 不区分小键盘和主键盘的数字字符

总而言之,

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

事件绑定与解绑

on( events ,[ selector ] ,[ data ] ):事件绑定。

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

//快捷方式
$(".btn1").click(function() {})

// on方法
$(".btn1").on("click",function() {})

// 多事件单函数
$(".btn").on("mouseout mouseover", function(){})


//多事件多函数
$(".btn").on({
    mouseout : function(){},
    mouseover : function(){}
})

 on()的高级用法--事件机制委托的机制

事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>
$("div").on("click","p",fn)

 off():卸载事件

事件对象的使用

event.target:代表当前触发事件的元素。

event.type:获取事件的类型

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

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

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

event.which:获取在鼠标单击时,单击的是鼠标的哪个键(左键报告1,中间键报告2,右键报告3

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

this和event.target的区别:

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

.this和event.target都是dom对象

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

自定义事件

trigger(事件名,[可选参数]):能触发任何事件,但没有事件源对象,即事件对象event无法完美的实现,并且会在DOM树上冒泡。

.triggerHandler():触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件。