您的位置: 首页  >  IT文章  >  【jquery事件对象event】| jqeury bind 绑定事件与 unbind剔除绑定事件

【jquery事件对象event】| jqeury bind 绑定事件与 unbind剔除绑定事件

分类: IT文章 • 2022-05-04 10:12:32
【jquery事件对象event】| jqeury bind 绑定事件与 unbind删除绑定事件


<1>

jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。

<html>
<head>
    <title></title>
    <script src="../jquery-2.1.3.js"></script>
</head>
<body>
    <button id="a">a</button>
    <button id="b">b</button>
    <button id="c">c</button>
</body>
</html>
<script type="text/javascript">
    
    //绑定一个事件
    $("#a").bind("click", function () {
        alert("单击事件");
    })


    //同时绑定多个事件,每个事件执行不同的任务
    $("#b").bind({
        "mouseover": function () {
            alert("鼠标进入");
        },
        "mouseout": function () {
            alert("鼠标移出");
        }
    });
    //同时绑定多个事件，多个事件都执行一个任务
    $("#c").bind("click mouseover", function () {
        alert("弹窗！");
    })

    
    $("button").bind("dblclick", f1);

    function f1() {
        alert("我是f1");
    }

    $("button").unbind();//删除button控件的全部事件。这样上面button按钮绑定的事件就全被被删除掉了，所以的事件就不起作用了。

    $("button").unbind("click"); //删除button控件绑定的click事件。 这样绑定在button控件上的click事件就不起作用了

    $("button").unbind("click mouseover"); //删除button控件绑定的click，和mouseover事件

    $("button").unbind("click", f1); //删除button控件上绑定f1函数的click事件 （即：假如我button控件绑定了click事件，如果这个事件的处理函数是f1，那么就删除这个click事件）
</script>


jquery事件对象 event

jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../jquery-2.1.3.js"></script>
    <style type="text/css">
        button {
            width:100px ;height:30px ;background:red; border-radius:4px; margin:50px auto; line-height:30px;text-align:center;
        }
    </style>
</head>
<body>
    <button id="a">a</button>
    <button id="b">b</button>
    <button id="c">c</button>
    <button id="d">d</button>
    <button id="e">e</button>
    <button id="f">f</button>
    <button id="g">g</button>
</body>
</html>
<script type="text/javascript">
    //jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。

    
  

    $("#a").click(function (e) {
        alert(e.type); //获取这个click事件的事件类型 这里打印出：click
        alert(e.target)//获取绑定事件的DOM 元素  这里打印出：[object HTMLDivElement] 我们可以看到HTML后面是一个DivElement 这说明这个DOM元素是一个div元素
        alert(e.timeStamp); //获取事件触发的时间戳


    })

    关于额外数据data

    $("#b").click(123, function (e) { //第一个参数就是一个额外数据，他可以是数值，字符串，对象，数组。这个额外数据可以是一个变量当然也可以直接写，比如这里我们就直接将额外数据设为数值123
        alert(e.data); //获取事件调用时的额外数据 打印出：123
    })

    $("#c").click("中国", function (e) {   //额外数据可以是一个字符串
        alert(e.data); //打印出：中国
    })

    $("#d").click({ user: '张三', age: 25 }, function (e) {   //额外数据可以是一个对象
        alert(e.data); //打印出：[object Object]
        alert(e.data.user); //打印出：张三
        alert(e.data.age); //打印出：25
    })

    $("#e").click([1, 2, 3, "a", "b", "c"], function (e) {    //额外数据可以是一个数组
        alert(e.data); //打印出 1,2,3,a,b,c
        alert(e.data[1]); //打印出：2
        alert(e.data[3]); //打印出：a
    })
   
    var aa = "abc";
    $("#f").click(aa, function (e) {  //额外数据可以是一个变量
        alert(e.data); //打印出：abc
    })



    //关于result  获取上一个相同事件的返回值

    $("#g").click(function (e) {
        return "美国";
    });

    $("#g").click(function (e) {
        alert(e.result);  //上一个相同事件（click事件）的返回值是美国，所以这里 打印出：美国 
    })



    //关于pageX/pageY

    

    $(window).click(function (e) {
        //pageX:获取相对于页面原点的水平坐标
        //screenX:获取显示器屏幕位置的水平坐标
        //clientX:获取相对于页面视口的水平坐标
        alert(e.pageX + "-" + e.screenX + "-" + e.clientX); //通过打印这个三个水平坐标我们得知，他们的值都是一样的。
    })

    $(window).click(function (e) {
        //pageY:获取相对于页面原点的垂直坐标 （假如我的显示器分辨率是1920*1080，如果我可以拖动滚动条的话，pageY的值可能远远超过1080）
        //screenY:获取显示器屏幕位置的垂直坐标  （假如我的显示器分辨率是1920*1080 那么screenY能够获取到的最大值也就是1080，即便你往下拖动滚动条，也没效果，它的最大值只能是1080）
        //clientY:获取相对于页面视口的垂直坐标  （假如我的显示器分辨率是1920*1080 那么clientY能够获取到的最大值是1080-(浏览器头部的高度)）

        alert(e.pageY + "-" + e.screenY + "-" + e.clientY); //通过打印这个三个垂直坐标得知，他们是不一样的
        
    })

    //which 获取鼠标的左中右键(1,2,3)，或获取键盘按键

    $(window).click(function (e) {
        alert(e.which);  //当我按下左键 打印出：1     当我按下滑轮 打印出：2      当我按下右键 打印出：3
    })

    $(window).mousedown(function (e) {
        alert(e.which);  //当我按下左键 打印出：1     当我按下滑轮 打印出：2      当我按下右键 打印出：3
    })
    
    //keyup是获取键盘按键

    $(window).keyup(function (e) {
        alert(e.which);  //当我按下键盘按键的时候会弹对应键 键盘码(键盘码是数字)
    })

    
    $(window).click(function (e) {
        alert(e.altKey) //获取是否单击的时候同时按下了alt键 ； 当我仅仅点击的时候打印出：false  ;当我按住alt的同时在单击的时候 打印出:true
    })

    //这个window可以换成你需要的元素 比如$("input").click(function(e){ alert(e.altKey)})

  
    $(window).click(function (e) {
        alert(e.ctrlKey) //获取是否单击的时候同时按下了ctrl键 ； 当我仅仅点击的时候打印出：false  ;当我按住ctrl的同时在单击的时候 打印出:true
    })


    $(window).click(function (e) {
        alert(e.shiftKey) //获取是否单击的时候同时按下了shift键 ； 当我仅仅点击的时候打印出：false  ;当我按住shift的同时在单击的时候 打印出:true
    })

</script>


关于坐标我们用图片来解释一下。看下图  。注：平常我们用的最多的就是pageX pageY

alert(e.pageX + "-" + e.screenX + "-" + e.clientX); //通过打印这个三个水平坐标我们得知，他们的值都是一样的

那我们就主要来关注这三个垂直坐标


pageY:获取相对于页面原点的垂直坐标 （假如我的显示器分辨率是1920*1080，如果我可以拖动滚动条的话，pageY的值可能远远超过1080）


 screenY:获取显示器屏幕位置的垂直坐标  （假如我的显示器分辨率是1920*1080 那么screenY能够获取到的最大值也就是1080，即便你往下拖动滚动条，也没效果，它的最大值只能是1080）


clientY:获取相对于页面视口的垂直坐标  （假如我的显示器分辨率是1920*1080 那么clientY能够获取到的最大值是1080-(浏览器头部的高度)



【jquery事件对象event】| jqeury bind 绑定事件与 unbind剔除绑定事件







相关推荐