Jquery——Day3（事件对象+事件冒泡+默认行为阻止）

忘是亡心i 2022-07-12 13:08 256阅读 0赞

1、事件对象

即event对象，通过处理函数默认传递接受。

//通过处理函数传递事件对象；
    $(function(){
     $("input").bind('click',function(e){
     alert("欢迎光临！");
     });
    });

凡是事件，都包含有 属性和方法

A、event.target与event.currentTarget、relatedTarget区别：

（1）event.target是获取触发DOM元素，即点击了哪个就是哪个；

（2）event.currentTarget表示的是监听某个元素，即绑定了哪个就是哪个；

（3）event.relatedTarget表示的是移入移出目标点离开或进入的那个DOM元素。

B、screenX/screenY、pageX/pageY、clientX/clientY

（1）第一组表示获取页面显示器屏幕位置的水平、垂直坐标；

（2）第二组表示获取页面原点的水平、垂直坐标；（最大，含有下拉加载滚动条）

（3）第三组表示获取相对于页面视口的水平、垂直坐标。

2、事件冒泡

（1）定义：在页面中有多个事件，也可以多个元素响应同一个事件（几个元素出现重叠）

简单而言，从最小的范围到最大的范围“冒”，即为“冒泡”，这几个元素为重叠的关系。

$(function(){
     $('input').click(function(e){
     alert('input');
     });
    
     //为div点击事件
     $('div').click(function(e){
     alert('div');
     });
    
     $('body').click(function(e){
     alert('body');
     });
    });

上述三个事件含有重叠的关系，同时按照元素的“click”点击顺序来看，

input——> div——> body

之所以为冒泡，是因为事件会按照DOM的层次结构像水泡一样由下向上依次上升。

（2）阻止事件默认行为

由于网页中的元素有自己的默认行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有事需要阻止元素的默认行为。

在Jquery中，常用的阻止元素的默认行为的方法是preventDefault()

对submit提交按钮，取消其默认行为，如下：

$(function(){ $("form").submit(function(e){ e.preventDefault(); }); });

（3）停止事件冒泡

停止事件冒泡作用是：阻止事件中其他对象的事件处理函数被执行。

在Jquery中常用的是stopPropagation()方法来停止事件冒泡。

$(function(){
     $('p').bind("click",function(e){
     alert("欢迎光临");
     $('div').html(txt);
     e.stopPropagation();  //停止事件冒泡
     });
    
    });

上述案例中，只会触发第一个p事件，而不会触发div的事件。

（4）若既阻止了冒泡，又阻止了默认行为

$('a').click(function(e){
     e.preventDefault();
     e.stopPropagation();
     alert("dsd");
    });
    
    $('div').click(function(){
     alert('div');
    });
    
    $(document).click(function(){
     alert('documnet');
    });

在上述代码中“e.preventDefault()、e.stopPropagation()”可以用一句话代替，

即“return false；”

$('a').click(function(e){
    	return false;
    	alert("dsd");
    });

（5）其他方法

isDefaultPrevented()   是否调用了方法

isPropagationStopped()

stopImmediatePropagation()

isImmediatePropagation()

3、事件捕获

事件冒泡与事件捕获是两种截然相反的过程。

（1）事件冒泡是范围由小到大的触发过程；

（2）事件捕获是范围由大变小的触发过程。