zoukankan      html  css  js  c++  java
  • JQuery事件机制笔记

    一、事件绑定及移除
    1.bind()
    bind()为每个匹配的元素绑定一个或多个事件处理函数;
    语法:bind(event,fn)//不能给未来元素添加事件;
    bind(event,fn);
    bind({
    key1: value1,
    key2: value2,
    key3: value3
    });
    unbind(event,fn)-->bind()的反向操作,删除元素的一个或者多个事件。
    2.live()
    live()把事件绑定到当前及以后添加的元素上面//JQ1.9已经放弃使用。
    语法:live(event,fn);
    live(event,fn);
    JQ1.4之前使用的比较多,现在已经放到不推荐的使用列表中;
    die(event,fn)-->live()的反向操作,删除先前使用的live()绑定的事件。
    3.delegate();
    delegate()把事件绑定到当前及以后添加的元素上面。
    语法:delegate(selector,event,fn);
    JQ1.4之后加入的,和live有点相似;
    undelegate(selector,event,fn) --> 删除由delegate()方法添加的一个或多个事件处理程序。
    4.on();
    on() 把事件绑定到当前及以后(采用事件委托的方法)添加的元素上面。
    语法:on(event,seletor,fn);
    JQ1.7开始引入了全新的事件绑定机制;
    off(event,seletor,fn)-->on()的方向操作,移除on()绑定的事件处理程序。
    总结:从JQ1.7开始,JQuery开始引入了全新的事件绑定机制,on()和off()两个函数统一事件绑定。
    JQuery退出on()的目的有两个,一个是为了统一接口,二是为了提高性能。建议使用on()和off()。
    5.one();
    one()为匹配的元素绑定一次性的事件处理函数。
    语法:one(event,fn);//未来元素无效;
    当使用one()方法时,每个元素只能运行一次事件处理器函数,执行完之后事件就会被移除。
    6.JQ合成事件---hover();
    语法:hover(fn1,fn2);鼠标进入时执行fn1,鼠标离开时执行fn2。
    7.JQ合成事件 ---toggle();
    语法:1.toggle(fn1,fn2,fn3,fn4,...);
    2.响应匹配元素的轮流的click事件或隐藏或显示。
    8.事件对象
    事件对象存储了和事件相关的信息
    原生JS事件对象:
    oDiv.onclick = function(ev) {
    var oEvent = ev || window.event;
    console.log(oEvent);//oEvent即为事件对象;
    }
    JQ处理了其中的兼容问题,可以直接使用
    $('body').click(function(e){
    console.log(e);//e即为事件对象;
    });
    常用的事件对象的属性:
    阻止冒泡/传播:e.stopPropagation();
    阻止默认行为:e.preventDefault();
    事件类型:e.type;
    触发事件的元素:e.target;
    相对文档的坐标:e.clientX/Y e.pageX/Y;
    鼠标事件中离开或者进入的DOM元素:e.relatedTarget;
    事件发生的时间戳:e.timeStamp;(返回总毫秒数);
    指示按了哪个键或者按钮:e.which;
    9.转换
    使用JS获取的DOM对象,然后在JQ中使用;
    使用JQ获取的DOM对象,然后在JS中使用。
  • 相关阅读:
    第二阶段站立会议(3)
    第二阶段站立会议(2)
    第二阶段站立会议(1)
    返回一个最大联通子数组的和
    场景调研
    课程改进意见
    百度搜索引擎——评价
    求1的个数
    《校园封神榜》个人工作总结——第十天
    《校园封神榜》个人工作总结——第九天
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5910059.html
Copyright © 2011-2022 走看看