jQuery-事件

事件

on off bind unbind 事件的绑定和事件移除;
参数1 事件 类似js里面的事件
参数2 执行该事件调用的函数
参数data · 触发事件的时候传递的数据

对象类型的数据 或者说是json类型的数据 类型即是数组型也是对象型;
执行力事件传递的数据在e(事件的执行对象) 获取 data属性;

json集合获取单个值
         for (var i = 0; i < e.data.length; i++) {
         console.log(e.data[i].name, e.data[i].age, e.data[i].sex, e.data[i].hobby);
         }
同一个回调函数里面如何区分事件  借助事件的参数  e   event
        if (e.type == "click") {
        单击的时候移除鼠标进入事件
        在事件里面找当前的执行对象  $(this)
       
        off 写一个参数  可以移除指定的事件
        fn  不是回调函数     之前你在添加事件的时候将之前的匿名回调转化为基本函数写法  在到off中写移除的函数名称
        添加fn 时候和js里面removeeventlisten  参数是一致的   这个参数可写可不写
              $(this).off("mouseenter", handle);
          }
           else if (e.type == "mouseenter") {
                console.log("鼠标进入");
            }
           else {
               console.log("鼠标离开");
            }
       
        }

off 事件的移除

	不写任何参数该元素的所有事件全被移除
    $("#btn").off();

bind 绑定事件 unbind 移除事件 和on off一致

	:绑定多个事件空格隔开
	unbind  移除事件   如果不写参数全部移除
    $("#btn").unbind();

on 和 off 中的参数 sel (选择器)

    委托   父元素将自身的事件委托给子元素来执行
    selector  是一个选择器字符串   $(".box")  直接写  ".box"
    $("ul").on("click", ".box", handlelist);
    function handlelist() {
       点击完成之后移除当前的事件委托
       当事件委托之后  事件内部的$(this)  指针发生变化
       $("ul").off("click");//·这样写可以移除
        $("ul").off("click",".box");也是可以移除的
        $("ul").off("click", ".box", handlelist);
    }

事件处理

one(type,[data],fn) 一次性事件

	var str={"name":"张三"};
    var str='abc';  字符串传递不过去

绑定一次性事件

    $("#btn").one("click",str,function (e){});

trigger(type,[data]) 触发指定类型事件 自动触发事件

能写自定义的事件

    $("input").on("userclick",function (){
        $(this).css({
            border:"1px solid red"
        });
    }).trigger("userclick");

$(“input”).trigger(“select”, [data]);//默认触发选择事件

hover([over,]out)

    toggle([spe],[eas],[fn])1.9*   动画的方法

jquery 里面封装的事件方法

    blur([[data],fn])
    change([[data],fn])
    click([[data],fn])
    dblclick([[data],fn])
    error([[data],fn])1.8-
    focus([[data],fn])
    focusin([data],fn)
    focusout([data],fn)
    keydown([[data],fn])
    keypress([[data],fn])
    keyup([[data],fn])
    mousedown([[data],fn])
    mouseenter([[data],fn])
    mouseleave([[data],fn])
    mousemove([[data],fn])
    mouseout([[data],fn])
    mouseover([[data],fn])
    mouseup([[data],fn])
    resize([[data],fn])
    scroll([[data],fn])
    select([[data],fn])
    submit([[data],fn])

浏览器窗口变化事件

    $(window).resize(function (){
        console.log(1);
    }).scroll(function (){
        console.log($(this).scrollTop());
        console.log("滑动");
    });

事件的执行参数

		eve.currentTarget  当前点击的目标元素
        eve.data  //事件传递的数据
        eve.delegateTarget1.7+  在事件委托中 获取委托的元素
        eve.isDefaultPrevented()  返回值true/false  是否使用过preventDefault
        eve.isImmediatePropag...()
        eve.isPropagationStopped() 返回值true/false  是否使用过stopPropagation
        eve.namespace
        eve.pageX
        eve.pageY
        eve.preventDefault()  阻止事件的默认行为
        eve.relatedTarget
        eve.result
        eve.stopImmediatePro...()
        eve.stopPropagation()  阻止事件冒泡
        eve.target   执行事件的目标元素
        eve.timeStamp   执行的事件  ms
        eve.type   类型
        eve.which  键盘上的ascii值   1 是  鼠标


        $("ul").on("click",".box",function (e){
        $(this)  指向子元素
        console.log(e.delegateTarget);
    	});

   		$(window).mousedown(function (e){
        console.log(e.which);  //输出ascii值
    	});

事件的冒泡和处理

$(function (){
    $("div").click(function (e){
        console.log(1);
        处理事件的冒泡  用事件参数
        e.stopPropagation(); //处理事件冒泡
        console.log(e.isPropagationStopped());
        return false; //处理事件冒泡
    });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值