脚本宝典收集整理的这篇文章主要介绍了js实例教程-JQuery基础总结三：事件篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

基础-事件篇

1.jQuery鼠标事件之click与dbclick事件

第一种：

$("ele").click(function(){

    alert('触发指定事件')

})；

$("ele").click() //手动指定触发事件

第二种：

$('p').click(function(e) {

            alert(e.target.textContent)

        })；

第三种：

$("button:eq(2)").click(1111, function(e){

    alert(e.data);  //1111

})；

2.jQuery鼠标事件之mousedown与mouseup事件(鼠标按下，释放事件)

3.jQuery鼠标事件之mousemove事件(在固定区域里移动触发)

4.jQuery鼠标事件之mouseover与mouseout事件

5.jQuery鼠标事件之mouseenter与mouseleave事件

和mouseover与mouseout事件差不多，但是这里的两个事件不会冒泡

6.jQuery鼠标事件之hover事件（处理一些简单的移入移出事件）

function handlerIn(){  //移入事件发生    }

function handlerOut(){   //移入事件发生    }

$(selector).hover(handlerIn, handlerOut)；

hover()这个方法里头封装的是mouseenter(), mouseleave()两个方法, 可以阻止冒泡问题.

7.jQuery鼠标事件之focusin与focusout事件   （元素获得/失去焦点时触发）

8.jQuery表单事件之blur与focus事件

与focusin与focusout事件差不多，但是这里的事件不支持冒泡

9.jQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变动作

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

10.jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select事件只能用于<input>元素与<textarea>元素

11.jQuery表单事件之submit事件

<form id="target1" action="test.html">

                回车键或者点击提交表单：

                <input type="text" value="输入新的值" />

                <input type="submit" value="Go" />

</form>

jq:

$('#target1').submit(function(e) {

        if(不通过验证的事情){

                    //处理code

                    return false;//阻止默认事件（将数据提交到test.html）

            }

    });

12.jQuery键盘事件之keydown()与keyup()事件

keydown是在键盘按下就会触发

keyup是在键盘松手就会触发

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

13.jQuery键盘事件之keypress()事件

keypress()=keydown()+keyup()

与keydown()的区别：在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符

14.on()的多事件绑定

用法一：

$("#elem").on('click',function(){}) //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 );

高级用法：

<p class="left">

        <p class="aaron">

            <a>目标节点</a> //点击在这个元素上

        </p>

</p>

jq:

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

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

15.卸载事件off()方法   （卸载通过on绑定的事件）

$("elem").off("mousedown")  删除一个事件

$("elem").off("mousedown mouseup")   删除多个事件

$("elem").off()   删除所有事件

16.jQuery事件对象的作用

$(elem).on("click",function(event){

            event //事件对象

});

触发目标的文本内容：event.target.textContent

事件类型:event.type

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

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

阻止冒泡：event.stopPropagation()

获取单击鼠标是哪个：event.which    （左键报告1，中间键报告2，右键报告3）

触发事件的当前元素：event.currentTarget    （等同于this）

注意：

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

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

17.jQuery自定义事件之trigger事件   (会触发默认事件)

<h2>自定义事件trigger</h2>

    <p class="left">

        <p><span></span><span>0</span>点击次数</p>

        <button>直接点击</button>

        <button>通过自定义点击</button>

    </p>

    <script type="text/javascript">

    //点击更新次数

    $("button:first").click(function(event,bottonName) {

        bottonName = bottonName || 'first';

        update($("span:first"),$("span:last"),bottonName);

    });

    //通过自定义事件调用，更新次数

    $("button:last").click(function() {

        $("button:first").trigger('click','last');    //调用click事件，并传入参数值为‘last’

    });

    function update(first,last,bottonName) {

        first.text(bottonName);

        var n = parseInt(last.text(), 10);

        last.text(n + 1);

    }

    </script>

18.jQuery自定义事件之triggerHandler事件

$("button:first").triggerHandler('click','last'); 

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JQuery基础总结三：事件篇全部内容，希望文章能够帮你解决js实例教程-JQuery基础总结三：事件篇所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。