jQuery事件

Posted 2020-12-14 zhuxiang1633

1.event对象

　　在IE、chrome中它是全局变量
与事件相关的信息会保存在event对象中，只有在事件发生的过程中，event才有信息

　　在其他浏览器中；
通过事件函数的第一个参数传入的

　　event属性及属性值：
clientX（Y）：在可视区内的发生事件时 鼠标的坐标

鼠标移动事件触发的频率 不是跟移动的像素成正比的，而是 在一定的时间间隔内，如果鼠标的坐标发生改变，那个就会触发鼠标移动事件。

window.onload=function(){
    var oBtn=document.getElementById(‘btn‘);
    document.onclick=function(ev){
        ev=ev||event;
        console.log(ev.target)；
        alert(ev[‘clientX‘]);
    };
    
    
};<input type="button" value="点击" id="btn" />

获取鼠标坐标：

document.onmousemove=function(ev){
    ev=ev||event;
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
    oDiv1.style.left=ev.clientX+‘px‘;
    oDiv1.style.top=ev.clientY+scrollTop+‘px‘;
};

2.hover事件

$("#container").hover(function(){
    $(‘#div1‘).css(‘width‘,in_wid+‘px‘)
    .css(‘height‘,in_wid+‘px‘)
    .css(‘margin‘,(out_wid-in_wid)/2+‘px ‘+(out_hei-in_hei)/2+‘px‘);
},function(){
    $(‘#div1‘).css(‘width‘,‘200px‘)
    .css(‘height‘,‘200px‘)
    .css(‘margin‘,‘0‘);
});

3.事件参数-this

<button id="btn1" onclick="fun(this)">按钮</button>

<script>
    function fun(ev) {
        alert($(ev).html())
    }
    })
</script>

4.动态绑定事件【后出现的标签也会自动添加事件】

$(父选择器).on(‘click‘, 子选择器, function(){})

$(body).on(‘click‘, ‘.div1‘, function(){})

5. 防止事件的重复注册

先接触绑定

$().unbind(‘mousewheel DOMMouseScroll‘).bind(‘mousewheel DOMMouseScroll‘, function(){{});

自定义事件

jquery

1. 定义事件

$(document).bind("panelWidthChange",function(){
    console.log(‘hello‘)
});

1. 触发事件

$(document).trigger("panelWidthChange");

鼠标滚动事件

$("#ip-img-preview").unbind(‘mousewheel DOMMouseScroll‘).bind(‘mousewheel DOMMouseScroll‘, this.onMouseScrollEvent);

function onMouseScrollEvent(e) {
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel));
    if (delta < 0) { //向下滚动
        $(this).width($(this).width() / 1.1);
        $(this).height($(this).height() / 1.1);
    } else { //向上滚动
        $(this).width($(this).width() * 1.1);
        $(this).height($(this).height() * 1.1);
    }
}