jQuery笔记-事件

6 篇文章 0 订阅
4 篇文章 0 订阅

***事件冒泡和事件捕获***

---事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

这是HTML结构

1

2

3

<div id="parent">

  <div id="child" class="child"></div>

</div>

现在我们给它们绑定上事件

            document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+this.id)
            })

结果:

child事件被触发,child
parent事件被触发,parent

结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

现在改变第三个参数的值为true

       document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+e.target.id)
            },true)

结果:

parent事件被触发,parent
child事件被触发,child

结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。

1.click事件

-$("ele").click()                                         绑定$ele元素,不带任何参数一般用来指定触发一个事件,用的较少

-$("ele").click(handler(eventObject))       绑定$ele元素,每次$ele元素触发点击操作会执行回调handler函数,方法中的this指向绑定

                                                           事件的元素

-$("ele").click([eventData],handler(eventObject))    用法与二一致,但可以接受一个数据参数,可解决不同作用域下数据传递的问题

2.dbclick事件

满足条件:1.鼠标指针在元素里面点击

                  2.鼠标指针在元素里面时释放

                  3.鼠标指针在元素里面时再次点击,点击间隔时间,由系统而定

                  4.鼠标指针在元素里面时再次释放

3.mousedown与mouseup事件

-$("ele").mousedown()                              绑定$ele元素,不带任何参数,一般用来指定触发一个事件

-$("ele").mousedown(handler(eventObject))    绑定$ele元素,每次$ele元素点击操作会执行回调handler函数

-$("ele").mousedown([eventData],handler(eventObject))   ~~~~

注:1.若一个元素按住了鼠标不放,并且拖动鼠标离开这个元素,并释放鼠标键,仍算作mousedown事件

        2.用event对象的which区别按键,敲击鼠标左键which的值为1,鼠标中键的值为2,鼠标右键的值为3

4.mousemove事件

         -mousemove事件是当鼠标指针移动时触发的,即使是一个像素

5.mouseover和mouseout     会触发事件冒泡,给子元素绑定该事件,父元素也会触发

6.mouseenter和mouseleave   只会在绑定它的元素上被调用,不会再后代节点上被触发

7.hover事件        

-$("ele").hover(function1(){},function2(){})  function1表示当鼠标进入元素时触发的事件,function2表示当鼠标

                                                                      离开时触发的事件

8.focusin事件       用户在聚焦时,若需要捕获这个动作时,调用focusin事件

9.focusout事件     用户失去焦点时触发的事件

10.blur和focus事件    与focusin和focusout的区别是支持冒泡,focus在元素本身产生,focusin在元素包含的元素中产生

11.change事件 

-input元素    监听value值的变化,当由改变是,失去焦点后触发change事件,对于单选框和复选框,当用户做出选择时,该事件

                     立即触发

-select元素   对于下拉选择框,当用户鼠标做出选择时,该事件立即触发

-textarea元素   多行文本输入框,当有改变时,失去焦点后触发change事件

12.select事件    当textarea或文本类型的input元素中的文本被选择时,会发生select事件,这个函数会调用执行绑定到select事

                          件的所有函数,包括浏览器的默认行为,可以通过在某个绑定的函数中返回false来防止触发默认浏览器行为

13.submit事件   通过submit事件监听提交表单的操作

-具体能触发submit事件的行为:

  • <input type="submit">
  • <input type="image">
  • <button type="submit">
  • 当某些表单元素获取焦点时,敲击Enter(回车键)

-form元素由默认提交表单的行为,如果通过submit处理,需要禁止浏览器的这个默认行为

 传统的方式是调用事件对象e.preventDefault()来处理,Jquery中可以直接在函数最后结尾return false

$("#target").submit(function(data) { 
   return false; //阻止默认行为,提交表单
});

14.键盘事件keydown()与keyup()

-keydown()  

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

-keyup()

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

 

-15.键盘事件keypress

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

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

总而言之,

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

16.on()的多事件绑定

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

多个事件绑定同一个函数

 $("#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 );

可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的

17.on()的高级用法

-事件委托机制

委托机制

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

在on的第二参数中提供了一个selector选择器,简单的来描述下

参考下面3层结构

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

给出如下代码:

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

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

18.卸载事件off()方法

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

 

绑定2个事件

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

删除一个事件

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

删除所有事件

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

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

$("elem").off()

19.jquery对象的作用

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

event.target

target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

简单来说:event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

20.jquery事件对象的属性和方法

--event.type                                    获取事件的类型

--event.pageX和event.pageY         获取鼠标当前相当于页面的坐标(从页面左上角开始)

--event.preventDefault()方法     阻止默认行为(阻止页面默认跳转)

--event.stopPropagation()         阻止事件冒泡

--event.which                                 获取鼠标单击时,单击的是哪个键

--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)的使用;

20.jquery自定义事件trigger事件

在jQuery通过on方法绑定一个原生事件

$('#elem').on('click', function() {
    alert("触发系统事件")
 });

如果不同用户交互,可在某一时刻自动触发该事件

$('#elem').trigger('click');
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

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

21.triggerHandler事件

-trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象event无法完美的实现,毕竟一个是浏览器给的,一个是自己模拟的。尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替

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

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

22.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

顾十方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值