首页 > 技术文章 > jq事件

laiso 2017-11-21 14:15 原文

1,ready:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在使用之前必须确保body元素的onload事件,,没有注册函数,否则不会触发ready函数。

$(document).ready(function(){
           alert("sss")请确保在 <body> 元素的onload事件中没有注册函数,否则不会触$(document).ready()事件。
 })
$(function($) {
                alert("Sss");
            })
2,on函数:用于在元素上绑定一个或者多个事件;
object.on(events,selector,Data,function);
传进来的Data被归属为event.data.Data
selecter 是一段选择器代码,可以选择object下的子元素
<p>王瑞睿<a href="#">真的是</a></p>
 $("p:first").on("click","a",{Text:"一个大帅比"},function(event){
            alert($(this).parent().text()+event.data.Text);
        })
当然也可以传进来很多个事件了:如下,既添加了点击事件,又添加了鼠标移入的操作
 $("p:first").on("click mouseover","a",{Text:"一个大帅比"},function(event){
            alert($(this).parent().text()+event.data.Text);
  })
on()还可以用来取消表单的提交,
$("form").on("submit",false);
$("form").on("submit",function(event){
event.preventDefult;
})
3,off()函数:在选择的元素使用on方法中绑定的事件的事件处理函数
object.off():直接把object上所有的事件都解绑,
命名空间:一个并发的环境,每一个事件的绑定都可以让它进入一个特定的空间里,然后取消某空间的的某事件,就可以实现解除同一个元素上面的不同空间的相同事件函数;
<button>button</button>
 
$('button').on("click.one",function(){
       alert("one");
 })
 $('button').on("click.two",function(){
                alert("two");
})
 $('button').off("click.one"); //再点击的时候只能弹出two
 
<div class="box">
            <p class="p1">1</p>
            <p>2</p>
            <p>3</p>
</div>
<p>4</p>
<script>
            $("p").on("click.first",".p1",function(){
                alert($(this).text());
            })
            $("p").on("click.second",function(){
                alert($(this).text()+"ss");
            })
            $("p").off("click",".p1");  //为所有的p元素取消在.first空间里的click事件
                    off事件中的selector元素相对应on事件的selector事件
</script>
4.one()函数:
<p style="background: red;">努力的人拥有全世界</p>
  $("p").one("click",{Text:"没错"},function(event){
                alert($(this).text()+":"+event.data.Text);
   })
 
为某元素绑定一个事件吗,但只执行一次
如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
5,trigger函数():规定指定元素的触发事件,但是不能阻止事件冒泡。
1>.触发事件
<input type="text" name="FirstName" value="Hello World" />
<button>激活 input 域的 select 事件</button>
$(document).ready(function(){
    $("input").select(function(){
          $("input").after("文本被选中!");
        });
   $("button").click(function(){
           $("input").trigger("select");
         });
});
2>,传递参数,但是可以使所绑定的事件函数自动触发,但是必须指定事件名称
<p>王瑞睿</p>
$("p").click(function(event,a,b){
              alert(a+b);
  }).trigger("click",["wrr","莱索"]);
 
3>,为trigger函数传递jquery.event()的事件对象
var e = jQuery.Event("select");
object.trigger(e);
4>,事件冒泡
<p>
            <p>王瑞睿</p>
</p>
$("p").click(function(event,a,b){
                alert(a+b);
}).trigger("click",["wrr","莱索"]);
6,triggerHandler()与trigger相似,但是阻止了事件冒泡
<p>
        <p>王瑞睿</p>
</p>
$("p").click(function(event,a,b){
                alert(a+b);
}).triggerHandler("click",["wrr","莱索"]);
 
7,delegate(selector,type,data,function)函数:给自定元素的每一个子元素都加上了一个事件。
<div style="background-color:red">
            <p>这是一个段落。</p>
            <button class="btn1">请点击这里</button>
            <button>请点击这里</button>
            <button>请点击这里</button>
</div>
$("div").delegate("button.btn1", "click", function() {
                $("p").slideToggle();
});
8,
 $(".btn2").click(function(){
            $("<p>wangruiui</p>").appendTo($(this).parent().find("p:first"));
 })
8.undelegate()函数:
1>,删除由delegate()函数添加的一个或者多个事件处理程序
<div>
            <button>button</button>
</div>
function f1(){
                alert("1");
            }
function f2(){
                alert("2");
             }
$("div").delegate("button","click",f1);
$("div").delegate("button","click",f2);
$("div").undelegate("button","click",f1);
2>,使用命名空间
$("div").delegate("button","click.f",f1);
$("div").delegate("button","click.s",f2);
$("div").undelegate("button","click.s");
3>,取消由delegate方法绑定所有事件
$("div").undelegate();
4>,取消某类事件的所有监听
$("div").undelegate("click");
 
1.hover()方法
1>:hover(function1,function2);
<p style="border: 1px solid red;width: 100px;">hover</p>
$("p").hover(
function(event){alert($(event.target).text()+"on");},
function(event){alert($(event.target).text()+"out");}
)
text()方法获取元素div等块级的时候,都会包括文本元素,文本元素就是所留的空白,所以要求紧凑
2>hover(function):移入和移出都只有一个方法
<p style="border: 1px solid red;width: 100px;">hover</p>
$("p").hover(handlerInout);
function handlerInout(){
       alert("S");
}
 
2,blur():是元素处于一个失去焦点的状态
<input type="text" />
$("input").blur(function(){
                alert("blur");
})
3.change():当元素的值被改变的时候触发
<input type="text"  value="123"/>
$("input").change(function(){
                alert("change");
})
 3,error事件():
当页面的js发生错误时,window对象error触发事件
当图像的src属性无效时,比如文件不存在或者数据错误时,也会触发图像对象的error事件
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("img").error(function(msg,url,line) {
                alert(msg+url+line);
                $("img").replaceWith("<p><b>图片未加载!</b></p>");
            });
        })
</script>
<body>
        <img src="errorimg.gif" />
        <p>如果上面的图像没有正确地加载,会被替换为一段 "图片未加载" 的文本。</p>
</body>
4,focus事件与focusin、focusout
focusin与focus的事件区别是:她可以在父元素上子元素获取焦点的情况
<input type="text" />
        <div class="box">
            <input type="text" />
</div>
$("input:first").focus(function(){
        $(this).blur();
 })//是一个输入框处于一个禁用的状态
 $("div").focusin(function(event){
        console.log(event.target);
 }) //inputelement
$("div").focusout(function(event){
                console.log(event.target);
})
5,keydown keyup keypress三个事件键盘事件。不能同时用,会出现事件被吞没
6,select事件:针对于input、textarea
<input type="text" value="select"/>
$("input").select({Text:"w"},function(e){
                alert($(this).val()+e.data.Text);
})
7,submit事件:
<form>
            <input type="text"/>
            <input type="password" />
            <button type="submit">submit</button>
</form>
$("form").submit(function(){
       alert("submit");//事件触发函数
      return false;//阻止提交
})
8,remove()事件:是把一个元素移除,但是函数返回一个相同的节点,但是元素所绑定的事件都已经消失
<div class="div" style="width: 100px;height: 100px;background: red;">王瑞睿</div>
$(".div").on("click",function(){
        alert("ss");
})
var w=$(".div").remove();
$("body").append(w);
9,detch()事件,把一个元素删除,并且返回一个相同的节点,并且所有的事件绑定都返回了,也就是说保留了所有的事件
 
 
 
注意事项:
1,jq中事件函数的第一个参数就是兼容后的事件对象,
 ev.pageX (相当于文档)= ev.clientX(相当于可视区)+ev.scrolltop
 ev.which : keyCode
 ev.preventDefault() //阻止默认事件
 ev.stopPropagation() //阻止事件冒泡
return false:== ev.preventDefault() //阻止默认事件+ ev.stopPropagation() //阻止事件冒泡
 2,jq的位置操作:
1>:offset()  是获取元素到浏览器边框时的距离,
offest().left 是获取元素到屏幕左边的距离
offest().top 是获取元素到屏幕顶部的距离
2>:position() 首先把元素分装成有定位的元素,获取元素到定位父级的距离,而不包括magin值
position().top  :到定位父级的顶部距离
position() .left  :到定位父级的左边距离
3,offsetParent():获取有定位的父级
parent():获取父级
4,val(参数)方法:
如果有参数的话就直接替代原来的value值。如果没有参数的话。就获得原来的参数值
5,size(),获取数组的长度
6,obj.each(function(i,elem){
    $(elem).html(i);第一个参数:index,第二个参数:当前元素
})

推荐阅读