[JQ_node3] 事件机制

来源：互联网发布：金大师软件下载编辑：程序博客网时间：2024/04/29 11:22

JQ事件绑定及移除

bind() 为每个匹配的元素绑定一个或多个事件处理函数
语法：bind( event , fn ) //不能给未来元素添加事件
```
$("p").bind("click", function(){   alert( $(this).text() );});$("button").bind({  ‘mouseover’:function(){$("body").css("background","red");},    ‘mouseout’:function(){$("body").css("background","#FFF");}  });
```
unbind(event , fn )–bind()的反向操作，删除元素的一个或多个事件示例：$(‘.btn’).unbind(‘click’);
live() 把事件绑定到当前及以后添加的元素上面
语法：live( event , fn ) //1.9以后放弃
```
$("p").live("click", function(){   alert( $(this).text() );});
```
JQ1.4之前用得比较多，现在已被放到不推荐使用列表中
die(event , fn )–live()的反向操作，删除先前用live()绑定的事件
delegate() 把事件绑定到当前及以后添加的元素上面
语法：delegate( selector , event , fn )
```
$("ul").delegate("li", "click", function(){     alert( $(this).html() );});
```
JQ1.4之后加入的，和live有点相似
undelegate( selector , event , fn )–删除由 delegate() 方法添加的一个或多个事件处理程序
on() 把事件绑定到当前及以后添加的元素上面
语法：on( event , selector , fn )
```
$("p").on("click", function(){ //未来元素无效   alert( $(this).text() );});$("ul").on( "click" , "li",  function(){     alert( $(this).html() );});
```
JQ1.7开始引入了全新事件绑定机制
off( event , selector , fn )–on()的反向操作，
移除用on()绑定的事件处理程序
one() 为匹配的元素绑定一次性的事件处理函数
语法：one( event , fn ) //未来元素无效
```
$("p").one("click", function(){   alert( $(this).html() );});
```
当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除
从jQuery1.7开始，jQuery引入了全新的事件绑定机制，
on()和off()两个函数统一处理事件绑定。
jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。
尤其是不要再用live()了，因为它已经放入不推荐使用列表中，随时会被弃用。

JQ合成事件

Jq合成事件—-hover( )方法

语法：hover(fn1,fn2); 鼠标进入时执行fn1，鼠标离开时执行fn2

$("td").hover(   function () {      $(this).addClass("hover");   },   function () {      $(this).removeClass("hover");   });

Jq合成事件—-toggle( )方法
语法：toggle(fn1,fn2,fn3,fn4…);
响应匹配元素的轮流的click事件或显示/隐藏

$("li").toggle(  function () {    $(this).addClass("show");  },  function () {    $(this).removeClass("show");  });

demo_hover&toggle：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>model</title><style>*{margin:0;padding:0;list-style: none;font-size: 40px;}.con{    width:300px;    height:300px;}.bgor{    background: orange;}</style></head><body><button class="btn">btn</button><div class="con">    128217843782</div><script src="jquery-1.8.3.min.js"></script><script>$(function(){//hover    /*$('.con').hover(function(){        $(this).css('background','green');    },function(){        $(this).css('background','red');    })*///toggle1    /*$('.btn').toggle(function(){        $('.con').css('background','blue');    },function(){        $('.con').css('background','pink');    })*///toggle2-显示隐藏    /*$('.btn').toggle(function(){        $('.con').toggle();//con的事件触发开关    },function(){        $('.con').toggle();    })*/    $('.btn').click(function(){        $('.con').toggle();    })//toggle3-循环发生    /*$('.btn').toggle(function (){//点击事件        alert('11');    },function (){        alert('22');    },function (){        alert('33');    })*///toggle4-属性设置翻转    /*$('.btn').click(function(){        $('.con').toggleClass('bgor');    })*/})</script></body></html>

事件对象Event

事件对象存储了和事件相关的信息
原生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

event事件demo

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>model</title><style>*{margin:0;padding:0;list-style: none;font-size: 40px;}.outer{width:600px;height:400px;margin:20px auto;padding: 100px 0;background: purple;}.center{width:400px;height:200px;margin:0 auto;padding: 100px 0;background: indigo;}.inneer{width:200px;height:200px;margin:0 auto;background:orange;}</style></head><body><button class="btn">btn</button><div class="outer">    <div class="center">        <div class="inneer">        </div>    </div></div><form method="GET" action="https://www.baidu.com/">    账号：<input type="text" name="username" value="">    <input type="submit" value="提交"></form><script src="jquery-1.8.3.min.js"></script><script>$(function(){    /*$('.btn').click(function(e){        console.log(e);    })*//*阻止冒泡/传播：e.stopPropagation()*/    $('.inneer').click(function(e){        alert('inneer被点击');        e.stopPropagation();//阻止事件传播        // return false;//阻止在他之后的所有代码执行    })    $('.center').click(function(e){        alert('center被点击');    })    $('.outer').click(function(e){        alert('outer被点击');    })    $('html').click(function (){        alert('html被点击');    })    $(document).click(function (){        alert('document被点击');    })//阻止默认行为：e.preventDefault();    $('form').submit(function(e){        if ($('input:eq(0)').val()=='') {            alert('账号不能为空');            e.preventDefault();            // return false;        }    })//指示按了哪个键或按钮：e.which    $('.btn').mousedown(function (e){//不能用click        if (e.which==1) {            alert('左键');        };        if (e.which==2) {            alert('中键');        };        if (e.which==3) {            alert('右键');        };    })})</script></body></html>

转换

使用JQ获取DOM对象，然后在JS使用

$("#div1").get(0).style.background="red";//get(index)方法：取得其中一个匹配的元素

JS获取的DOM对象，然后在JQ使用

var oDiv=document.getElementById("div1");$(oDiv).css("background","red");

js&js转换-demo

<!doctype html><html><head><meta charset="utf-8"><title>js&js转换</title><meta name="keywords" content=""><meta name="description" content=""><style>*{margin:0; padding:0; list-style:none;}.con{width: 400px;height: 100px;background: red;}</style></head><body><button class="btn">按钮</button><div class="con"></div><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script>var div=document.getElementsByTagName('div')[0];var $div=$('.con');// this->js对象// $(this)->jq对象// e.target->js dom对象// $(e.target)->jq对象$('.btn').click(function (){    // $div.style.background='green';//报错    // div.css('background','blue');//报错    // div.style.background='green';    // $div.css('background','blue');    $div.get(0).style.color='blue';    $div[0].style.background='green';    // document.getElementsByTagName('div')[0].style.background='yellow';})</script></body></html>

0 0