JQuery事件机制

时间 2020-08-01

标签 jquery 事件机制栏目 JQuery 繁體版

原文原文链接

1 事件操做

1.1 页面载入事件

$(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你能够在这里继续使用$做为别名... });

1.2 事件绑定

on(eve,[sel],[data],fn)      1.7+ 在选择元素上绑定一个或多个事件的事件处理函数
bind(type,[data],fn)         3.0- 请使用on()
one(type,[data],fn)            为每个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

1.3 解除事件绑定

off(eve,[sel],[fn])         1.7+ 在选择元素上移除一个或多个事件的事件处理函数
unbind(t,[d|f])                3.0- 请使用off()

1.4 触发事件

trigger(type,[data])         在每个匹配的元素上触发某类事件

triggerHandler(type, [data]) 
这个特别的方法将会触发指定的事件类型上全部绑定的处理函数。但不会执行浏览器默认动做，也不会产生事件冒泡
这个方法的行为表现与trigger相似，但有如下三个主要区别：
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，若是最开始的jQuery对象集合为空，则这个方法返回 undefined 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件</title>
</head>
<body>
    <h1>jquery事件</h1>
    <hr>

    <button id="btn">按钮</button>
    <button id="btn2">解除绑定</button>
    <hr>

    <button id="btn3">下载</button>

    <br>

    <a href="1.html" id="a1">超连接</a>

    <hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dolores eos quasi laborum earum libero est doloremque, tempora error at tempore nostrum! Fugit saepe ipsam deserunt commodi asperiores, unde.</p>

    
    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 绑定事件
            $('#btn').on('click', function(){
                alert('啊，你点我了')
            });
            
            // off()解除绑定
            $('#btn2').on('click', function(){
                $('#btn').off();
            });

            //one()绑定一个一次性事件，即该事件只会被触发一次
            $('#btn3').one('click', function(){
                alert('哈哈哈');
            });


            $('#a1').on('click', function(){
                alert('啊，我是超连接');

                //阻止事件冒泡 和 默认动做
                return false;
            });


            //手动 代码触发 事件
            //$('#btn').click()       //刷新网页是会自动触发
            /*$('#btn').trigger('click')   //刷新网页时也会出发啊
            $('#btn').trigger('click')
            $('#btn').trigger('click')*/

            // 鼠标悬停在p元素上，事件就被执行一次
            $('p').hover(function(){
                console.log('OK');       
            })
        })
    </script>
</body>
</html>

1.5 事件委派

live(type,[data],fn)    1.7-
die(type,[fn])            1.7-
delegate(s,[t],[d],fn)    3.0-
undelegate([s,[t],fn])    3.0-
所有移除了，请使用 on()

$(document).on('click', 'button', fn)

1.6 事件切换

hover([over,]out)           一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
toggle([spe],[eas],[fn])   1.9-用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

2 事件列表

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)         
    当元素得到焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他能够在父元素上检测子元素获取焦点的状况

focusout([data],fn)
    当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他能够在父元素上检测子元素失去焦点的状况。

keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
    当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一块儿使用。与 mouseover 事件不一样，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。若是鼠标指针穿过任何子元素，一样会触发 mouseover 事件。

mouseleave([[data],fn])
    当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一块儿使用。与 mouseout 事件不一样，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。若是鼠标指针离开任何子元素，一样会触发 mouseout 事件。

mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

3 事件对象

属性html

eve.currentTarget        在事件冒泡阶段中的当前DOM元素
eve.data                当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
eve.delegateTarget        1.7+ 当currently-called的jQuery事件处理程序附加元素
eve.namespace            当事件被触发时此属性包含指定的命名空间
eve.pageX                鼠标相对于文档的左边缘的位置
eve.pageY                鼠标相对于文档的顶部边缘的位置
eve.relatedTarget        在事件中涉及的其它任何DOM元素
eve.result                这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
eve.target                最初触发事件的DOM元素
eve.timeStamp            返回事件触发时距离1970年1月1日的毫秒数
eve.type                事件类型
eve.which                针对键盘和鼠标事件，这个属性能肯定你到底按的是哪一个键或按钮

方法jquery

eve.preventDefault()            阻止默认事件行为的触发
eve.isDefaultPrevented()        根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
eve.stopPropagation()            防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
eve.isPropagationStopped()        检测 event.stopPropagation() 是否被调用过
eve.stopImmediatePropagation()     阻止剩余的事件处理函数执行而且防止事件冒泡到DOM树上
eve.isImmediatePropagation()     检测 event.stopImmediatePropagation() 是否被调用过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件对象</title>
    <style>
        #box {
            width:300px;
            height:200px;
            border:2px solid #ccc;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <h1>事件对象</h1>
    <hr>

    <div id="box"></div>

    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $('#box').on('click', function(en) {
                //鼠标的位置
                console.log(en.clientX, en.clientY); //鼠标相对于视口的位置
                console.log(en.pageX, en.pageY);   //鼠标相对于页面的位置，不滑动滚动条的状况下，和client获取的位置同样，滑动时高就会不一样
                console.log(en.offsetX, en.offsetY); //鼠标在本元素的位置，即鼠标相对于框的左上角的位置
            });

            $(document).on('keyup', function(en) {
                console.log(en.which)    //按键按下并释放时事件会被触发,打印按键对应的ASCII码值
            });
            $('#box').on('mousedown', function(en) {
                console.log(en.which)     //鼠标键按下时会被触发，打印出对应的ASCII码值（1 2 3  ）  
            })

        })
    </script>
</body>
</html>