美文网首页JQuery
jQuery事件基础

jQuery事件基础

作者: 柚吖柚柚子 | 来源:发表于2017-06-01 09:34 被阅读16次

1、on()多事件绑定(多事件绑定同一个函数、多事件绑定多个函数、高级用法)

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

$("#elem").on({//每一个事件绑定自己的回调方法
 mouseover:function(){},
 mouseout:function(){}
})
$("div").on("click",selector,fn)//可绑定第二参数,on事件会发生冒泡,在冒泡过程中遇到了匹配选择器的元素将会触发回调

2、jQuery事件对象/事件委托(event)

[--事件委托--如监听每个li事件,因每个li的事件都是相同的,可利用事件冒泡把事件处理函数绑定到父元素上,在触发每个li时冒泡到父元素]
[--事件对象--记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁]
$("ul").on('click',function(e){
 console.log(e.target.textContent)//target注册事件的元素或子元素
 })
//事件对象的属性和方法
event.pageX;event.pageY//获取鼠标当前相对于页面的坐标,以页面为参考点,不随滚动条变化而变化
event.preventDefault()//阻止标签默认行为,如a标签跳转
event.stopPropagation() //阻止事件冒泡,return false亦可
event.currentTarget//事件冒泡过程中当前DOM元素,类似this(this可变,currentTarget不变)

3、自定义事件trigger(事件触发)

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自定义事件")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])//会发生事件冒泡,会影响所有匹配元素,返回jq对象以供链式调用
$('#elem').triggerHandler('Aaron',['参数1','参数2'])//不会触发浏览器默认行为,也不回发生时间冒泡,仅影响第一个匹配元素,返回事件处理值,如果没有发生事件就会返回undefined

4、.bind()方法

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$(selector).bind({event:function, event:function, ...})

5、$.Event()方法

+function($){
    function testEvent(){
        var hidden = $.Event("hide.bs",{
            user:"foo",
            pass:"bar",
            relatedTarget:$("#input")[0]
        })
        $("#input").trigger(hidden)// 默认事件触发 把属性绑定到事件上
    }
    $("#input").on({
        'hide.bs':function(e){
            console.log(8)   
            alert(e.user)
        },
        click:function(){
            testEvent()
        }
    }) 
}(jQuery)

原生事件绑定

element.onclick = function(e){
      //传统方法只会在事件冒泡中运行,而非捕获和冒泡
      //一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
 };
element.addEventListener('click', function(e){
      // 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false (冒泡) 或 true (捕获)
      // 可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件
}, false);

相关文章

  • jq知识体系

    1 jQuery基础语法 1.1 jquery语法结构 $('选择器').事件名(function(){}) 1....

  • jQuery事件基础

    1、on()多事件绑定(多事件绑定同一个函数、多事件绑定多个函数、高级用法) 2、jQuery事件对象/事件委托(...

  • jQuery基础知识点1

    基础概念 介绍 jQuery 针对 DOM 的封装的本质,能够基于 jQuery 完成节点查找、事件监听、样式处理...

  • jQuery基础

    jQuery基础 一、jQuery简介 是一款JavaScript库方便地处理HTML、事件、动画等 可以兼容多浏...

  • 二、Jquery 选择器

    选择器是 Jquery 的基础,在 Jquery 中,对事件的处理、DOM 操作、Ajax 操作都是依赖选择器。 ...

  • jQuery基础-事件篇

    1、鼠标事件 常见的click等事件这里不做详细介绍 1、mousemove: 用来监听用户移动的操作,基于移动的...

  • jQuery基础——事件篇

    第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...

  • jQuery基础事件篇

    一、事件 1.1、绑定事件 1.2、解除事件 1.3、简单事件 1.4、复合事件hover(fn1,fn2):鼠标...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

  • jQuery的基础事件篇

    基础事件 1.绑定事件 jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(ty...

网友评论

    本文标题:jQuery事件基础

    本文链接:https://www.haomeiwen.com/subject/vgusfxtx.html