JQ基础事件

旧城等待， 2022-08-01 12:24 200阅读 0赞

最近终于学到了事件，也是最常用到的地方，李炎恢老师详细的介绍了各种方法，我也是把李炎恢老师所讲的总结一下

学过JS肯定知道DOM2级的绑定事件方法addEventListener()及attachEvent()，这两个方法本质一样，只是之后的方法是用来兼容IE的（果然IE还是很特立独行的）我们用原生JS时就需要考虑到跨平台的问题，而JQ就不需要考虑这个问题，下面就开始第一个方法：绑定事件

**绑定事件**`bind(type,[data],function)//第一个为事件类型是一个字符串，第二个可选的额外数据，第三个就是一个方法用执行的`

$("input").bind('click',function(){ //当然我们也可以不用匿名函数，不过匿名包装好，但不方便删除
        alert("1");
    })
    //也可以是传入多个事件类型
    $("input").bind('click mouseover',function(){ //感觉意义不是那么大
        alert("1");
    })
    //还有一种比较好用的就是类似字面创建JS对象的一种写法
    $("input").bind({
        mouseover:function(){ 
            alert("1");
        }
        mouseout:function(){ 
            alert("2");
        }
    });

**删除绑定事件**

$("input").unbind()   //删除所有的
    $("input").unbind('click')  //删除click事件
    $("input").unbind('click',fn1)//删除绑定了fn2的鼠标点击事件，但匿名函数就没法使用了

**简写事件，很多常用的已经简写了**可以不用bind绑定了直接用就好

$('input').click(function(){ 
        alert("1");
    })
    $('input').dbclick(function(){ //双击事件很少用
        alert("1");
    })
    $('input').mousedown(function(){ //鼠标按下
        alert("1");
    });
    `
    $('input').mouseup(function(){ //鼠标弹起
        alert("1");
    })
     //还有很多就不全部举例了都是一些键盘鼠标的事件，可以自行到JQ中文网上查看
     //还有一些unload()但已经为JQ封装到ready函数里了,单独的话用来清理，
     $('input').resize(function(){ //窗口大小改变
        alert("1");
    })
    $('input').scroll(function(){ //滚动条改变
        alert("1");
    })
    $('input').select(function(){ //文本选定
        alert("1");
    })
    $('input').change(function(){ //文本改变
        alert("1");
    })
    $('form').submit(function(){ //开头一定要以form，用以表单提交
        alert("1");
    })

**接下来写几个重点的，会经常用到的**

//首先是mouseover mouseout与mouseenter mouseleave
    //两者有乍一实践一下可能没有太大的区别，但如果绑定到下面的div中时就会出现问题
    <div>
        <p><p>
    </div>
    //再有子元素的时候mouseover会在子元素和父元素之间多次触发事件，而mouseenter就不会多次触发可以理解为他把子父元素看成一个集体。剩下的那种也是一样的道理
    
    
    ----------
    //再就是对键盘的事件 keydown() keyup() keypress()注意的是前两种返回对应的的键码，而最后一个是字符编码
    <input type="text" value="text"/>
     $('input').keydown(function(){ //按下
        alert("1");
    })
     $('input').keydown(function(e){ //这里就涉及到事件对象
        alert(e.keyCode);//65 返回的是键码
    })
     $('input').keypress(function(e){ //按下
        alert(e.charCode);//97 字符编码
    })
    
    
    ----------
    //光标的激活和消失focus() blur() focusin() focusout()
    $('input').focus(function(){ //激活
        alert("1");
    })
    $('input').blur(function(){ //丢失
        alert("1");
    })
    $('input').focusin(function(){ //激活
        alert("1");
    })
    他们有什么区别呢，就跟上面一样还是子父元素的区别
    <div>
        <input type="text"/>
    </div>
    如果是这样的话，用focus就无法激活里面的input而focusin可以激活换而言之，它支持事件冒泡
    
    
    ----------
    //复合事件 ready(fn) DOM加载完毕后触发，用于一开始 
    //hover(fn1,fn2) 移入和移出，当然你想传入一个也可以的（但是这个是mouseenter和mouseleave的结合）