jQuery基础(三)—事件篇（慕课网）

作者: 张中华 | 来源:发表于2021-05-19 07:40 被阅读0次

第一章事件介绍

第二章鼠标事件

2-1 jQuery鼠标事件之click与dbclick事件

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作。
使用方法：
方法一： $ele.click() 绑定$ ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

方法二： $ele.click( handler(eventObject) ) 绑定$ ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据
});

核心代码理解：

先定义了一个带参数的函数data，传出这个参数里的数据；
再定义一个带传递数据的点击函数，调用data函数；
执行入口函数。
执行顺序是由上至下的，人的思维逻辑是由下至上的。

<script type="text/javascript">

        //不同函数传递数据
        function data(e) {
            alert(e.data) //1111
        }

        function a() {
            $("button:eq(2)").click(1111, data)
        }
        a();

    </script>

2.2 JQ鼠标事件之mousedown与mouseup事件

方法一： $ele.mousedown() 方法二：$ ele.mousedown( handler(eventObject) )
方法三：$ele.mousedown( [eventData ], handler(eventObject) )
注意：click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发

<script type="text/javascript">
    //不同函数传递数据
    function data(e) {
        alert(e.data) //1111
    }

    function a() {
        $("button:eq(2)").mousedown(1111, data)
    }
    a();
    </script>

2.3 jQuery鼠标事件之mousemove事件

方法一： $ele.mousemove() 方法二：$ ele.mousemove( handler(eventObject) )
方法三：$ele.mousemove( [eventData ], handler(eventObject) )

<script type="text/javascript">
    //不同函数传递数据
    function data(e) {
        $(this).find('p:last').html('数据:' + e.data)
    }

    function a() {
        $(".right").mousemove(1111, data)
    }
    a();
    </script>

2.4 jQuery鼠标事件之mouseover与mouseout事件

方法一： $ele.mouseover() 方法二：$ ele.mouseover( handler(eventObject) )
方法三：$ele.mouseover( [eventData ], handler(eventObject) )

2.5 jQuery鼠标事件之mouseenter与mouseleave事件

事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

(2.6丢到月球啦……为了章节与该课程匹配，就这样吧……)

2.7 jQuery鼠标事件之hover事件

<script type="text/javascript">

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


    </script>

一般自己写的时候ele:hover{ }就好了，用js更改的时候用到这个吧……

2.8 jQuery鼠标事件之focusin事件

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件。
方法一： $ele.focusin() 方法二：$ ele.focusin( handler )
方法三：$ele.focusin( [eventData ], handler )

2.9 jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件。
方法一： $ele.focusout() 方法二：$ ele.focusout( handler )
方法三：$ele.focusout( [eventData ], handler )

第三章表单事件

3.1 jQuery表单事件之blur与focus事件

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

是否支持冒泡处理

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

3.2 jQuery表单事件之change事件

可用于监听：input元素、select元素、textarea元素。

3.3 jQuery表单事件之select事件

方法一：.select()
方法二： $ele.select( handler(eventObject) ) 方法三：$ ele.select( [eventData ], handler(eventObject) )

3.4 jQuery表单事件之submit事件

方法一： $ele.submit() 方法二：$ ele.submit( handler(eventObject) )
方法三：$ele.submit( [eventData ], handler(eventObject) )

第四章键盘事件

4.1 jQuery键盘事件之keydown()与keyup()事件

注意：

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

<script type="text/javascript">
    //监听键盘按键
    //获取输入的值
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)
    });

    //监听键盘按键
    //获取输入的值
    $('.target2').keyup(function(e) {
        $("em:last").text(e.target.value)
    });

    </script>

4.2 jQuery键盘事件之keypress()事件

在input元素上绑定keydown事件会发现一个问题：

每次获取的内容都是之前输入的，当前输入的获取不到

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

第五章事件的绑定和解绑

5.1 on()的多事件绑定

基本用法：.on( events ,[ selector ] ,[ data ] )

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

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

5.2 on()的高级用法

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

例子：

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

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

    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

5.3 卸载事件off()方法

通过.on()绑定的事件处理程序
通过off() 方法移除该绑定

绑定2个事件

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

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

第六章事件对象的使用

6.1 jQuery事件对象的作用

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

<h3>事件委托，通过事件对象区别触发元素</h3>
    <div class="left">
        <div class="aaron">
            <ul>
                <li>点击：触发一</li>
                <li>点击：触发二</li>
                <li>点击：触发三</li>
                <li>点击：触发四</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        //多事件绑定一
        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent)
        })



    </script>

6.2 jQuery事件对象的属性和方法

event.type：获取事件的类型
触发元素的事件类型

$("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)的使用；

<body>
    <h3>事件对象的属性与方法</h3>
    <div class="left">
        <div id="content">
            外层div元素
            <br />
            <span style="background: silver;">内层span元素</span>
            <br /> 外层div元素
        </div>
        <br />
        <div id="msg"></div>
    </div>
    <script type="text/javascript">
    //为 <span> 元素绑定 click 事件  
    $("span").click(function() {
        $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
    });
    //为 Id 为 content 的 <div> 元素绑定 click 事件  
    $("#content").click(function(event) {
        $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
        event.stopPropagation(); //阻止事件冒泡  
    });
    //为 <body> 元素绑定 click 事件  
    $("body").click(function() {
        $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
    });
    </script>
</body>

第七章自定义事件

7.1 jQuery自定义事件之trigger事件

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

7.1 jQuery自定义事件之triggerHandler事件

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

     <script type="text/javascript">
     //给input绑定一个聚焦事件
     $("input").on("focus",function(event,title) {
       $(this).val(title)
       });

       $("#accident").on("click",function() {
       alert("trigger触发的事件会在 DOM 树中向上冒泡");
         });
           //trigger触发focus
             $("button:first").click(function() {
       $("a").trigger("click");
       $("input").trigger("focus");
           });

           //triggerHandler触发focus
           $("button:last").click(function() {
       $("a").triggerHandler("click");
       $("input").triggerHandler("focus","没有触发默认聚焦事件");
           });
       </script>

jQuery基础(三)—事件篇（慕课网）

第一章事件介绍

第二章鼠标事件

2-1 jQuery鼠标事件之click与dbclick事件

2.2 JQ鼠标事件之mousedown与mouseup事件

2.3 jQuery鼠标事件之mousemove事件

2.4 jQuery鼠标事件之mouseover与mouseout事件

2.5 jQuery鼠标事件之mouseenter与mouseleave事件

2.7 jQuery鼠标事件之hover事件

2.8 jQuery鼠标事件之focusin事件

2.9 jQuery鼠标事件之focusout事件

第三章表单事件

3.1 jQuery表单事件之blur与focus事件

3.2 jQuery表单事件之change事件

3.3 jQuery表单事件之select事件

3.4 jQuery表单事件之submit事件

第四章键盘事件

4.1 jQuery键盘事件之keydown()与keyup()事件

注意：

4.2 jQuery键盘事件之keypress()事件

第五章事件的绑定和解绑

5.1 on()的多事件绑定

5.2 on()的高级用法

5.3 卸载事件off()方法

第六章事件对象的使用

6.1 jQuery事件对象的作用

event.target

6.2 jQuery事件对象的属性和方法

第七章自定义事件

7.1 jQuery自定义事件之trigger事件

7.1 jQuery自定义事件之triggerHandler事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术

jQuery基础(三)—事件篇（慕课网）

第一章 事件介绍

第二章 鼠标事件

2-1 jQuery鼠标事件之click与dbclick事件

2.2 JQ鼠标事件之mousedown与mouseup事件

2.3 jQuery鼠标事件之mousemove事件

2.4 jQuery鼠标事件之mouseover与mouseout事件

2.5 jQuery鼠标事件之mouseenter与mouseleave事件

2.7 jQuery鼠标事件之hover事件

2.8 jQuery鼠标事件之focusin事件

2.9 jQuery鼠标事件之focusout事件

第三章 表单事件

3.1 jQuery表单事件之blur与focus事件

3.2 jQuery表单事件之change事件

3.3 jQuery表单事件之select事件

3.4 jQuery表单事件之submit事件

第四章 键盘事件

4.1 jQuery键盘事件之keydown()与keyup()事件

注意：

4.2 jQuery键盘事件之keypress()事件

第五章 事件的绑定和解绑

5.1 on()的多事件绑定

5.2 on()的高级用法

5.3 卸载事件off()方法

第六章 事件对象的使用

6.1 jQuery事件对象的作用

event.target

6.2 jQuery事件对象的属性和方法

第七章 自定义事件

7.1 jQuery自定义事件之trigger事件

7.1 jQuery自定义事件之triggerHandler事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术

第一章事件介绍

第二章鼠标事件

第三章表单事件

第四章键盘事件

第五章事件的绑定和解绑

第六章事件对象的使用

第七章自定义事件