事件处理

SnowRomance

于 2016-05-09 16:19:31 发布

阅读量470

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/lyj1101066558/article/details/51353978

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ready 方法

1. $(document).ready(function(){

})

简写方式

$(function(){

});

2.ready() 和 window.load 的区别

（1） ready() 在 DOM 结构加载完成之后马上执行；window.load 在网页上所有元素全部载入成功后，

才执行。列入：图片展示类网站，可能存在 css文件，js 文件，html 文件和大量的图片文件

（2）同一个网页中，可以写多个 ready(),但是只能有一个生效的window.load

jQuery 事件方法

   
   blur([[data],fn])   $(':text').blur(function(){});
   
   
   
   change([[data],fn])  $(':text').change(function(){});
   
   
   
   click([[data],fn])
   
   
   
   dblclick([[data],fn])
   
   
   
   error([[data],fn])
   
   
   
   focus([[data],fn])
   
   
   
   focusin([data],fn)
   
   
   
   focusout([data],fn)
   
   
   
   keydown([[data],fn])
   
   
   
   keypress([[data],fn])
   
   
   
   keyup([[data],fn])     $(':text').keyup(function(){var  value=$.trim($(this).val()); if(value == 'laodai') {  $('#out').text('....')}else{$('#out').text('***')}})  每当输入完成一个字符的时候就判断一次
   
   
   
   mousedown([[data],fn])
   
   
   
   mouseenter([[data],fn])
   
   
   
   mouseleave([[data],fn])
   
   
   
   mousemove([[data],fn])
   
   
   
   mouseout([[data],fn])
   
   
   
   mouseover([[data],fn])   $('div:last').mouseover(function(){})
   
   
   
   mouseup([[data],fn])
   
   
   
   resize([[data],fn])
   
   
   
   scroll([[data],fn])
   
   
   
   select([[data],fn])
   
   
   
   submit([[data],fn])
   
   
   
   unload([[data],fn])

jQuery 事件切换

hover([over,]out)

$('div:last').hover(function(){

//移动到上面的时候

},function(){

//移除鼠标的时候

});

toggle(fn1,fn2[,fn3...]) 触发点击事件

$('#out').toggle(function(){

第一次

},function(){

第二次

},function(){

第三次

},function(){

第四次

});

1.javascript 事件流知识

按一定顺序决定一个事件到底由哪个节点接受，这就是事件流

目前支持的两种事件流：事件冒泡、事件捕获

2.事件冒泡与事件捕获

1）事件冒泡：

最早由 IE 实现，目前主流的浏览器都支持

具体含义：最具体的节点，最早接收到事件；然后逐级向上传播到不太具体的节点

2）事件捕获：

最早由 Netscape 提出，除 IE 外，其他主流浏览器都支持

具体含义：不太具体的节点首先接收到事件，最具体的节点最后接受到事件

3）jQuery 的事件流处理方案：

出于兼容性的考虑，jQuery 始终会在模型的冒泡阶段注册事件处理函数

也就是说，总是最具体的元素会首先获得响应事件的机会

3.jQuery 事件对象

  
  eve.currentTarget  在事件冒泡阶段中的当前DOM元素
$('div').click(function(event){
    
    var id = event.currentTarget.id;
alert(id);
})
  
  eve.data  当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
var mydata = {name:'', gender:''}
$('#phpchina').click(mydata , function(event){
    
    var str = event.data.name;  //直接访问  mydata 的属性值
alert(str);
//全局版本，处理函数内部使用了外部定义的变量名
//降低了可维护性
alert(mydata.name);
});
  
  eve.delegateTarget
  
  eve.namespace
eve.pageX  鼠标相对于文档的左边缘的位置
eve.pageY  鼠标相对于文档的顶部边缘的位置
eve.relatedTarget  在事件中涉及的其它任何DOM元素
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素
$('#phpchina').mouseover(function(event){
    alert(event.relatedTarget.id);
});
eve.result
eve.target  最初触发事件的DOM元素
$('div').click(function(e){
    var id = e.target.id;
    alert(id);
})
eve.timeStamp 获取时间戳
$('#phpchina').click(function(event){
      var time = event.timeStamp;
      alert(time);
})
eve.type   alert(event.type)  点击所有锚点后弹出事件类型
eve.which  alert(event.which) 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

eve.isPropagationStopped()  根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值
eve.stopPropagation()  防止事件冒泡到DOM树上，但是不阻止事件行为

eve.isDefaultPrevented()  根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
  
        
      
       
       eve.preventDefault()   阻止默认事件行为的触发，但是冒泡了

eve.isImmediatePropagationStopped() 根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值
  
       
     
      
      eve.stopImmediatePropagatio() 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上